1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebでスクロールしても位置が固定の背景を設定する方法

iWebでスクロールしても位置が固定の背景を設定する方法

いきなりですが、ページをスクロールしても固定されている背景は、iWebでは設定できません。しかし、HTMLに出力した後に、ちょっとした調整を行うだけで、スクロー […]

  • 2016/5/4
  • 2010/6/6

いきなりですが、ページをスクロールしても固定されている背景は、iWebでは設定できません。しかし、HTMLに出力した後に、ちょっとした調整を行うだけで、スクロールしても位置が固定されている背景を設定できます。

このページの解説のサンプルページはこちらです。(ページ右下に背景画像を固定)

まずiWebで背景画像の設定を行います

位置を固定する背景画像を用意して、iWebで基本的な設定を行うところから始めます。基本的な設定と言っても、用意した背景画像をページに表示させておく設定だけです。

ページインスペクタのレイアウトタブを開いて、「ブラウザの背景」に位置を固定したい背景を選択します。配置方法は「元のサイズ」を選んでおきます。

今の段階では、ページのど真ん中に画像が設定されていますが、気にしないでください。設定が終わったら、ページをHTMLで出力する為に、「サイトを公開」を実行します。

HTMLファイルを開いて編集します。

ここからが本題です。今「サイトを公開」で出力したHTMLをテキストエディタで開きます。

ここでは「mi」という無償で使えるテキストエディタを使ってご説明します。

「mi」で先ほどのHTMLを開いたら、「<body ….>」と書かれた部分を探してください。
だいたい20行目くらいにあると思いますが、この部分に先ほどiWebで設定した「ブラウザの背景」の設定が書かれています。

ここでは、ページの右下に常に表示されるような設定をしていきます。

まずは、「center center」を「right bottom」と書き換えてください。これは、背景画像の表示位置を設定する部分です。
最初の「right」はページの左端からの位置を、次の「bottom」ではページの上端からの位置を設定しています。

先ほどiWebで背景画像を設定した時に、ページのど真ん中に画像が表示されましたよね?
それは、ここで「center center」つまり、ページの左端からも上端からも「真ん中」という設定がされていたからです。

次に進みます。
これだけではまだ、単純にページの右端に背景画像が設定されるだけですので、ページのスクロールをした時に背景画像は固定されません。
少々説明が前後してしまいますが、先ほど位置を指定した部分の手前に「scroll」と書かれていると思います。これを「fixed」に書き換えてください。

これで背景画像がページの右端で固定されるはずです。

別の場所に背景画像を表示させるには

この例ではページの右端に背景画像を表示させるように設定しましたが、ページの左下や右上など、どの場所に表示させるかは、簡単に変更できます。
先ほど「right bottom」と設定した部分を変更するだけです。

この設定は90%といった%値での設定の他、500pxといった数値で設定する事もできます。
つまり、ページの右上に表示させたい場合は「right top」での良いですし、「100% 0%」と設定しても良いのです。

設定をしては確認、設定をしてはまた確認を繰り返して、 ご自分のイメージしている場所に表示されるように調整してみてください。

ちなみに、ここで解説した内容はCSSというページの表示/デザインを行うための一般的な仕様です。解説ページもたくさんありますので、興味のある方は勉強してみてはいかがでしょうか。

※ここで設定した内容は、iWebから再度HTMLを出力すると、もう一度設定をし直す必要があります。

iWebについて

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

WordPressの使い方

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

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

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