行の間隔を「固定値」にする

 飾り枠で囲むと空白ができてしまう

 

ホーム > iWeb Lab > iWeb Tips > 飾り枠で囲むときのポイント

iWeb Tips - iWebのコツ -

iWebの飾り枠は、とても面白い効果が簡単に設定できますので、ページの見栄えを整えるのに非常に有効です。しかし、実は普通に設定をしただけだと、ブラウザで表示した時に「無意味な空白」ができてしまう事があります。

そこで、まずその「無意味な空白」ができてしまっている様子を確認してみましょう。


下の写真は、普通に飾り枠を設定したテキストボックスを設置して、中にテキストを書いた場合のiWebでの見え方です。

テキストがきっちりと飾り枠の中に収まっていますので、非常に見栄えも良くすっきりとしています。

では、このように設定をした後、「フォルダに公開...」を選んでHTMLを出力して、Safariでの表示を検証をしてみましょう。

フォルダに公開して、Safariで表示したのが下の写真です。飾り枠の下部分に大きめの空白が生まれてしまっています。

iWebではぴったりと収まっているはずなのに、なぜかブラウザで見ると空白が開いてしまいます。これは、テキストの行間隔の設定に問題がある場合がほとんどです。

そこで、行間隔の設定を変更して、空白を取り除く方法をご紹介します。

テキストインスペクタには、行の間隔を設定する項目があります。

普通にテキストボックスを作成すると、この設定値が「倍数」になっていると思いますが、これを「固定値」に変更して、行間隔をptで指定する設定にすると、飾り枠で空白がやたらと開いてしまったりする事はありません。

「固定値」にするだけで、SafariなどのMac用ブラウザだけでなく、Windowsで見た時にもほぼレイアウトを崩さずに表示する事ができます。

このテクニックは、飾り枠だけではなく、すべてのテキストボックスに使えますので、何かおかしな表示になってしまったら、ぜひ設定を見直してみてください。

  飾り枠で囲むときのポイント

 スポンサードリンク

 公開に関するTips

 iWeb基本のTips

  iWeb Tips:記事一覧

  iWeb Tips 記事一覧

 その他のTips

 アクセスアップ、SEO対策のTips

 iWebの機能、更新に関するTips

運営サイト・ブログ

このサイトはApple iWeb を使用して作成しています。

ご意見などはお問い合わせフォームからお願いいたします。

当サイトは、Yahoo!カテゴリMacintosh > アプリケーションソフト)掲載サイトです。

    iWeb Q&A

スポンサードリンク