iWebの飾り枠を使うときのポイント

実は、iWebでのメインウィンドウに表示されている通りにブラウザで表示される訳ではありません。FirefoxやIEはもちろんのことですが、Safariでさえも全く同じようには表示されないのです。
特に飾り枠で囲んでいる部分が崩れる場合があります。

そこでこのページでは、飾り枠でテキストボックスを囲んで、表示が崩れてしまう場合の回避方法を解説しています。

飾り枠で囲むと空白が出来てしまう・・・

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

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

下の写真は、普通に飾り枠を設定したテキストボックスを設置して、中にテキストを書いた場合のiWebでの見え方です。
テキストがきっちりと飾り枠の中に収まっていますので、非常に見栄えも良くすっきりとしています。

では、このように設定をした後、「フォルダに公開…」を選んでHTMLを出力して、Safariでの表示を検証をしてみましょう。
フォルダに公開して、Safariで表示したのが下の写真です。飾り枠の下部分に大きめの空白が生まれてしまっています。

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

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

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

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

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

「役にたった」と思ったらシェアお願いします