記事検索：
tips_031
今回は番外編として、今ご覧になっているような、ブラウザ全体に広がる背景（上下にある横帯の事です）をページに設定する方法をご説明します。ページごとに設定を変えていく必要があるかもしれないので、ちょっと面倒です。
2010/05/16
iWebでは、ページを構成する要素として、前述のヘッダ／コンテンツ／フッタの３つのエリアがあり、それぞれの高さを個別に設定・調節する事ができます。
下の図で、赤い部分がヘッダ、青い部分はコンテンツ、緑の部分はフッタです。
それぞれの高さは、ページインスペクタのレイアウトタブから設定をする事ができます。
-
ブラウザ全体に広がる背景をページに設定する方法
ヘッダ／コンテンツ／フッタの３つのエリアについて
しかしこの設定はあくまでもページの設定にすぎませんので、それぞれのエリアに設定した数値より大きいものを配置すれば、その分だけ自動的に広がります。
この例で言えば、コンテンツの高さは480ピクセルに設定されていますが、高さ500ピクセルの写真をコンテンツエリアに配置すれば、コンテンツエリアの高さは自動的に20ピクセル大きくなり、500ピクセルになります。
まずこのページの構成要素の基本をしっかりと理解してください。
ブラウザ全体に広がる背景を設定する方法は、ページインスペクタのレイアウトタブにある「ブラウザの背景」に背景画像を設定します。
配置方法は「タイル状に配置」を選択しておきます。
ブラウザ全体に広がる背景画像を設定する方法
この背景画像を作成する時に、今回の最大のポイントがあります。
いまご覧のこのページの例で言えば、ヘッダの高さは100ピクセルで、ヘッダとコンテンツエリアの境界部分に高さ20ピクセルの帯があります。
つまり、上から80ピクセルの部分に高さ20ピクセルの帯を入れた背景画像を作る訳です。
タイル状に配置されますので、横幅は1ピクセルでOKです。（容量の節約にもなります）
しかし、上記のような高さ100ピクセルの画像を背景画像として設定した場合、上下に配置されてしまい、横縞のような背景になってしまいます。
これはこれでも良いという場合もあるでしょうが、今回の意図とは異なります。
そこで、コンテンツエリアの高さ+フッタの高さ分の余白を背景画像にも用意しておけば、横縞になってしまう問題は解消できます。
つまり、コンテンツエリアが480ピクセル、フッタが150ピクセルの場合は、合計630ピクセルの余白を用意して、ヘッダの部分も合わせて高さ730ピクセルの背景画像を作ります。
この画像を設定すれば、横縞のようになったりはしませんが、コンテンツの高さが480ピクセルを超えてしまうと、先ほどのように横縞が現れてしまいます。
実際に運用するには、コンテンツエリアの高さ別に複数の背景画像を準備する必要がありますので、面倒かもしれません。
しかしこの方法でならブラウザ全体に広がる背景を設定する事ができます。
またご覧のこのページには、フッタ部分に薄いグレーの帯が引かれています。
これも同じようにヘッダ+コンテンツの高さ分の場所に、帯を引いた画像を背景画像にしているのです。
背景画像の高さは4,400ピクセルにもなっていますが、シンプルにしているので、ファイルサイズは4KB程度です。
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
