1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebで作ったサイトをIEできちんと表示させるコツ(2)

iWebで作ったサイトをIEできちんと表示させるコツ(2)

世の中ほとんどの人が使っているパソコンはWindowsパソコンです。MacのSafariではきちんと表示されていても、WindowsのInternet Expl […]

  • 2016/5/4
  • 2008/6/15

世の中ほとんどの人が使っているパソコンはWindowsパソコンです。MacのSafariではきちんと表示されていても、WindowsのInternet Explorer(IE)では、iWebで作成したホームページが、きちんと正しく表示されない事があります。

そこでこのページでは、iWebで作ったホームページが、Internet Explorer(IE)でも正しく表示できるようにする為の、コツをご紹介します。

他にもIEで正しく表示する為のTipsをいくつかご紹介していますので、下記のページもあわせてご覧ください。
iWebのホームページをInternet Explorerできちんと表示させるコツ(1)

行間隔は「固定値」にすべし

iWebで作ったホームページをWindowsのIEで表示させてみると、テキスト部分が正しく表示されていない事がとても多くあります。これは、テキストボックスで設定されている「行間指定」に問題がある事が分かってきました。

iWebで、テキストボックスを選択してテキストインスペクタパネルを開くと、「間隔」の欄に「行」というスライダ(つまんで動かせる目盛り)があります。これが、テキストボックス内の行の間隔を指定するものですが、単位がいくつかあります。

このうち、「固定値」で行間隔を設定すると、WindowsのIE以外のどのブラウザで見ても、MacのSafariやFirefoxなどと「ほぼ同じ」行間に設定する事ができますので、IEで見ても正しく表示をする事ができます。

あまり行間を詰めすぎても読みにくいので、固定値で7pt〜10ptくらいに設定すると丁度読みやすい状態に出来ると思います。

背景イメージを上手に使う

行間隔の問題の他に、図形や画像を配置した時に「表示位置がずれる」という問題もあります。

下の図を見て頂ければ分かるかと思いますが、(当時の)当サイトの右側にあるメニューのようなイメージを使いたい場合、図形のサイズが異なってしまい、テキストにかぶってしまったりして、見栄えも悪くなります。

そこで、単純に図形を配置するのではなく、背景イメージを上手に使う事で、IEでもレイアウトを崩さずに表示できます。

iWebで、図形とテキストボックスを組み合わせて使用するとIE 6で、レイアウトが崩れてしまう事があります。そこで、下の図のように、ちょうどテキストボックスと同じ大きさの背景画像を用意して、テキストボックスの背景に指定します。

画像をテキストボックスの背景に指定するには、設定するテキストボックスを選択して、グラフィックインスペクタを開きます。

グラフィックインスペクタの一番上にある「塗りつぶし」の項目で、「イメージ塗りつぶし」を選んで、作成した背景画像を選択します。イメージサイズは「元のサイズ」を選びます。

これでテキストボックスの背景画像を設定する事ができます。
この方法を使えば、IE 6で表示してもレイアウトは崩れず、正しく表示する事ができます。

iWebについて

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

WordPressの使い方

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

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

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