1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebの飾り枠を使うときのポイント

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

実は、iWebでのメインウィンドウに表示されている通りにブラウザで表示される訳ではありません。FirefoxやIEはもちろんのことですが、Safariでさえも全 […]

  • 2016/5/4
  • 2007/11/16

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

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

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

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

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

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

iWeb上での飾り枠の部分

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

公開後の飾り枠の部分

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

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

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

行の間隔を「固定値」に変更しているところ

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

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

iWebについて

iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。

WordPressの使い方

WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。

無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。

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