1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. ブラウザ全体に広がる背景をページに設定する方法

ブラウザ全体に広がる背景をページに設定する方法

今回は番外編として、今ご覧になっているような、ブラウザ全体に広がる背景(上下にある横帯の事です)をページに設定する方法をご説明します。 ページごとに設定を変えて […]

  • 2016/5/4
  • 2010/5/16

今回は番外編として、今ご覧になっているような、ブラウザ全体に広がる背景(上下にある横帯の事です)をページに設定する方法をご説明します。

ページごとに設定を変えていく必要があるかもしれないので、ちょっと面倒です。

ヘッダ/コンテンツ/フッタの3つのエリアについて

iWebでは、ページを構成する要素として、前述のヘッダ/コンテンツ/フッタの3つのエリアがあり、それぞれの高さを個別に設定・調節する事ができます。

下の図で、赤い部分がヘッダ、青い部分はコンテンツ、緑の部分はフッタです。
それぞれの高さは、ページインスペクタのレイアウトタブから設定をする事ができます。

ヘッダ・コンテンツ・フッタの設定画面

しかしこの設定はあくまでもページの設定にすぎませんので、それぞれのエリアに設定した数値より大きいものを配置すれば、その分だけ自動的に広がります。

この例で言えば、コンテンツの高さは480ピクセルに設定されていますが、高さ500ピクセルの写真をコンテンツエリアに配置すれば、コンテンツエリアの高さは自動的に20ピクセル大きくなり、500ピクセルになります。

まずこのページの構成要素の基本をしっかりと理解してください。

ブラウザ全体に広がる背景画像を設定する方法

ブラウザ全体に広がる背景を設定する方法は、ページインスペクタのレイアウトタブにある「ブラウザの背景」に背景画像を設定します。

配置方法は「タイル状に配置」を選択しておきます。
「タイル状に配置」の図例

この背景画像を作成する時に、今回の最大のポイントがあります。

いまご覧のこのページの例で言えば、ヘッダの高さは100ピクセルで、ヘッダとコンテンツエリアの境界部分に高さ20ピクセルの帯があります。

つまり、上から80ピクセルの部分に高さ20ピクセルの帯を入れた背景画像を作る訳です。
タイル状に配置されますので、横幅は1ピクセルでOKです。(容量の節約にもなります)

80ピクセルの部分に高さ20ピクセルの帯を入れた背景画像

しかし、上記のような高さ100ピクセルの画像を背景画像として設定した場合、上下に配置されてしまい、横縞のような背景になってしまいます。
これはこれでも良いという場合もあるでしょうが、今回の意図とは異なります。

背景画像を埋め込んだ例

そこで、コンテンツエリアの高さ+フッタの高さ分の余白を背景画像にも用意しておけば、横縞になってしまう問題は解消できます。
つまり、コンテンツエリアが480ピクセル、フッタが150ピクセルの場合は、合計630ピクセルの余白を用意して、ヘッダの部分も合わせて高さ730ピクセルの背景画像を作ります。

コンテンツエリアのサイズも加味した背景

この画像を設定すれば、横縞のようになったりはしませんが、コンテンツの高さが480ピクセルを超えてしまうと、先ほどのように横縞が現れてしまいます。

実際に運用するには、コンテンツエリアの高さ別に複数の背景画像を準備する必要がありますので、面倒かもしれません。
しかしこの方法でならブラウザ全体に広がる背景を設定する事ができます。
またご覧のこのページには、フッタ部分に薄いグレーの帯が引かれています。

これも同じようにヘッダ+コンテンツの高さ分の場所に、帯を引いた画像を背景画像にしているのです。
背景画像の高さは4,400ピクセルにもなっていますが、シンプルにしているので、ファイルサイズは4KB程度です。

iWebについて

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

WordPressの使い方

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

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

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