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