ホームページ・ビルダーを使う － 文字飾り
ホームページビルダーで文字飾り
ホームページ・ビルダーでの文字飾りの方法を紹介します
- 文字に網掛けを入れる
- 文字の字下げ
- ワードアートの挿入
- ワードアート挿入の準備
- ワードアートの挿入
文字に網掛けを入れる
① 強調（網掛け）したい文字をマウスでドラッグして範囲選択します。
② メニューバーから 「書式」 → 「文字飾り」 → 「フォントスタイルの設定(SPAN)」 を選択します。
- 「スタイルの設定」ダイアログが表示されます。
③ ［スタイルシートマネージャーで編集］ ボタンをクリックします。
- 「スタイルシートマネージャ」ダイアログが表示されます。
④ ［ルール情報］ の ［追加］ ボタンをクリックします。
- 「スタイルの設定」ダイアログが表示されます。
⑤ 左上の枠内から ［クラスのスタイルを設定］ を選択します。［クラス名］ 欄に、半角英数でクラス名を指定します。(クラス名の先頭 1 文字目に数字は使えません。)
⑥ ［色と背景］ タブをクリックします。
⑦ ［背景色］ 欄で色を選択します。(［背景画像］ 欄で画像ファイルを選択することもできます。)
⑧ ［OK］ をクリックします。
- 「スタイルシートマネージャ」 ダイアログに戻ります。
⑨ 「スタイルシートマネージャ」 ダイアログの ［ルール情報］ 欄にクラス名が追加されたのを確認し、［閉じる］ ボタンをクリックします。
- 「スタイルの設定」ダイアログに戻ります。
⑩ 「スタイルの設定」ダイアログの［定義済みクラスの指定］ 欄の ［▼］ をクリックし、先ほど設定したクラス名を選択します。
⑪ ［OK］ ボタンをクリックします。
⑫ プレビュー画面にて網掛けを確認します。
この結果、ソースは次のようになっています。
- CSSソース：
- .amikake{ background-color : silver; }
- XHTMLソース：
- <p align="center">文字に<span class="amikake">網掛け</span>を入れる</p>
- ブラウザでの見え方 ⇒ hpb31_sample01.html
文字の字下げ
① 字下げしたい段落の最初の文字をマウスでドラッグして範囲選択します。
② メニューバーから 「書式」 → 「文字飾り」 → 「フォントスタイルの設定(SPAN)」 を選択します。
- 「スタイルの設定」 ダイアログが表示されます。
③ ［スタイルシートマネージャーで編集］ ボタンをクリックします。
- 「スタイルシートマネージャ」ダイアログが表示されます。
④ ［ルール情報］ の ［追加］ ボタンをクリックします。
- 「スタイルの設定」ダイアログが表示されます。
⑤ 左上の枠内から ［クラスのスタイルを設定］ を選択します。［クラス名］ 欄に、半角英数でクラス名を指定します。(クラス名の先頭 1 文字目に数字は使えません。)
⑥ ［文字のレイアウト］ タブをクリックします。
⑦ ［インデント］ 欄で ［予約語］ の▼をクリックし、その中から［文字の高さ］ を選択します。その左の欄に字下げする文字の数を入力します。
⑧ ［OK］ をクリックします。
- 「スタイルシートマネージャ」 ダイアログに戻ります。
⑨ 「スタイルシートマネージャ」ダイアログの ［ルール情報］ 欄にクラス名が追加されたのを確認し、［閉じる］ ボタンをクリックします。
- 「スタイルの設定」ダイアログに戻ります。
⑩ 「スタイルの設定」ダイアログの［定義済みクラスの指定］ 欄の ［▼］ をクリックし、先ほど設定したクラス名を選択します。
⑪ ［OK］ ボタンをクリックします。
⑫ プレビュー画面にて字下げを確認します。
この結果、ソースは次のようになっています。
- CSSソース：
- .jisage { text-indent : 1em; }
- XHTMLソース：
- <p><span class="jisage">パ</span>ソコンあれこれ.................................</p>
- ブラウザでの見え方 ⇒ hpb31_sample02.html
なお、ホームページビルダーでは上記のように、span 要素でスタイルを設定するようになっているが、インデントのようなスタイルを span 要素で設定すると、ブラウザによる違いが出やすいので、p 要素でスタイルを指定したほうがよい。その方法を紹介するページを参照ください。
ワードアートの挿入
ワードアートにある、斜めになったり、波打つ文字を、ホームページビルダーにコピーして貼り付ける場合の手順を示します。
ワードアート挿入の準備
ワードについてくる、ワード固有あるいはマイクロソフト固有のコメントを削除します。そのために、次の設定を事前に行います。
① 「ツール」 から 「HTMLクリーンアップ」 を選択し 「設定」 をクリックします。
- HTMLクリーンアップ設定の画面が表示されます。
② 「Word固有のタグ・属性」 にチェックを入れ、「OK」 をクリックします。これで準備完了です。
-
Word固有のタグ・属性
Microsoft Word で出力された HTML には、Word で再編集するのに必要な固有の情報が多く含まれています。これらは Web ブラウザ上でのページの表示にはほとんど影響しないので、削除することでファイル サイズを大幅に削減することができます。Word で出力された HTML の場合、このチェック ボックスにチェック マークを付けて不要なタグ・属性が無いかをチェックすることがお奨めです。
ワードアートの挿入
① このようなワードアートをマイクロソフト・オフィスのワード（ Word ）アプリケーションで作ります。
② これをコピーします。
③ ホームページ・ビルダーで、挿入する場所にカーソルを持っていきます。
④ そこで貼り付けをします。
⑤ 「ツール」 から 「HTML クリーンアップ」 そして 「クリーンアップ」 をクリックします。
- HTMLクリーンアップの画面が表示されます。そこでは、SPANとコメントが削除の対象としてリストされます。
⑥ 「すべて削除」 をクリックし、次に 「OK」 をクリックします。
- 作成中のページが表示されます。
- 構文エラーの画面が表示されます。
⑦ １行目が選択されているところで、「エラー行を表示」 をクリックします。
- HTMLソースが表示されます。
⑧ 選択され反転表示されている<!［if />を削除します。（そのままでDelete キーを押す）
⑨ 構文エラーの画面に戻り、２列目を選択して、「エラー行を表示する」 をクリックします。
- HTMLソース画面が表示され、エラー行が反転表示されます。
⑩ エラー行の中で v:shapes= で始まる指定を選択して削除します。
⑪ 構文エラーが消えたことを確認します。構文エラーの画面が残っていたら、「最新の情報に更新」 をクリックします。「エラーはありません」 と出れば、完了です。「閉じる」 をクリックしてページ編集に戻ります。
