Home / Index / Prev / Next

7.ページの色と背景を指定する

■ ページの色

ページの文字色と背景色を指定します。前に説明した [設定] ダイアログボックスの [新しいページの設定] カテゴリで既に指定していれば、ここでの指定は不 要です。

今、トップページはこうなっています。
いまのトップページ

[書式(O)] メニューから [ページの色と背景(U)] をクリックすると、[ページの配色と背景] ダイアログボックスが開きます。
ページの色と背景を選択→ページの色と背景ダイアログ
[ページの配色と背景] ダイアログボックスの使い方は、前に新しいページの設定で説明しました。
[読者のデフォルト色] は、自分で配色は設定しないので、読者（訪問者）のブラウザの設定により表示される配色が変わることになります。
[ユーザ定義色の使用] で、自分の好きな色を指定することができます。指定したい色ボ タンをクリックすると、カラーパレットが表示されるので、その中から好きな色を選択して [OK] をクリックします。

文字色を選択する
同じように、リンク部分の文字色は [リンクの文字の色] ダイアログボックス、リンク部分にマウスカーソルを当てた時の文字色は [アクティブなリンクの色] ダイアログボックス、リンク先に既に訪れた後のリンク部分の文字色は [アクセス済みのリンクの色] ダイアログボックスを開き、好きな色を選択して、 [OK] をクリックします。
文字色を指定する
背景色の指定も、文字色の指定と同じ要領で、[背景(B)] の右にある色ボタンをクリックする と、[領域(Block)の背景色]ダイアログボックスが開くので、好きな色を選択して、[OK] をクリックします。
ページの背景色を指定する
[ページの配色と背景] ダイアログボックスの [OK] をクリックすると、ページはこのようになります。
背景色がついたページ
ページの文字色と背景色を指定すれば、ソースはこのようになります。
<body style="color: rgb(0, 0, 0); background-color: rgb(204, 255, 255);" alink="#000099" link="#000099" vlink="#990099">
画面に表示される部分全部に適用されるため、<body>要素に色に関するプロパティを設定しています。
「color: rgb(0,0,0)」は文字色、「background-color: rgb(204, 255, 255);」は背景色を、それぞれ CSS で指定しています。「alink="#000099"」はアクティブリンク色（active link）、「link="#000099"」はリンク色、「vlink="#990099"」は訪問済みリンク色（visited link）を HTML で指定しています。

なお、背景色を指定して[OK]をクリックしてから、やっぱり違う色にしたいと思って再度背景色を指定しても、背景色が変わらない場合は、編集モードツー ルバーの<HTML>ソースを開いて、「background-color: rgb(204, 255, 255);」を消してから再度指定すれば変更できます。

実は、[ページの配色と背景] ダイアログボックスを開かなくても、書式ツールバーにある、背景色ブロックを使えば、簡単に背 景色を指定（変更）することができます。
作成しているページ内をクリックしてから、背景色ブロックの下の方（白い方）をクリックする と、[領域(Block)の背景色] ダイアログボックスが開くので、好きな色を選択して、[OK] をクリックします。

なお、背景色ブロックの上の方はテキスト の色を選択するときに使います。文字列を入力してから色を変えたい部分を範囲指定（ドラッグ）してからクリック すると、[文字列の色] ダイアログボックスが開くので、好きな色を選択して、[OK] をクリックします。

■ 背景画像の挿入

続いて背景画像を挿入します。
背景画像は、画像処理ソフト（とセンス）があれば簡単に作ることができますが、”インターネットは宝の山”、さまざまなホームページ用の画像を作っているホームページ（素材屋さんといいます）がたくさんあります。Yahoo! などの検索サイトで、「ホームページ素材＋自分のホームページのテーマ」で検索すれば、テーマにあった画像が見つかると思います。
「スキー大好きっ！」の場合は、こんな感じですね。

他にも、素材の森、sozai-R といった素材関連サイトを集めたホームページなどでも探すことができます。

気に入った画像が見つかったら、素材屋さんの注意事項をよく読んでから素材を使わせていただきましょう。
素材屋さんで表示されている画像は、素材屋さんが使っている Web サーバーに置いてあるので、これを自分のパソコンに保存（ダウンロード）してから使います。
Mozilla の場合は、画像の上で右クリック→[画像を名前を付けて保存(V)] で、[画像を保存] ダイアログボックスが開くので、自 分でわかりやすい名前をつけて、保存したいフォルダの中に保存します。
画像を名前を付けて保存
最初はわかりやすいように、、画像を保存する場所は、画像を使用するページを保存したのと同じフォルダに保存しましょう。
ホームページ作成に慣れてきて、画像ファイルがいっぱいになってきたら、同じフォルダの中に、画像専用フォルダを作って整理していきます。フォルダを変え たりファイルの保存場所を移動したりすると、画像ファイルのある場所（URL）が変わるので、その都度修正する必要がありますが、ホームページを作ってい ると、この程度の修正はよくあることです。

というわけで探してきました。スキーがテーマですから、こちらの背景画像をつかってみます。
雪の背景画像 ← bg1-yuki.gif
[ページの配色と背景] ダイアログボックスの[背景画像(M)] に、背景画像にしたい画像ファイルの場所とファイル名（URL）を入力するか、[ファイルを選択(F)] ボタンをクリックして[画像ファイルを選択] ダイアロ グボックスを開き、画像ファイルを選択すると、背景画像を挿入することができます。
背景画像を指定する
[URL をページの場所に相対的にする] とありますが、これは、ファイルの場所を指定するときに、画像を表示させるページの場所を基準として指定する場合を「相 対パス」（相対 的位置指定）、画像を表示させるページの場所にかかわりなく、画像ファイルがパソコンの中のどこにあるかを指定する場合を「絶対パス」 （絶対的位置指定）と言います。
相対パスは画像を表示させるページの場所を基準にするため、ページを保存している場所が変われば、画像ファイルの URL も変える必要があります。一方、絶対パスでは、ページを保存している場所を変えても URL を変える必要はありません。しかしながら、作成したホームページが完成すれば、自分のパソコンから、Web サーバーへ転送（アップロード）することになるため、パソコンの中の位置を指定した絶対パスを、相対パス（あるいは、Web サーバーの中の位置を指定する絶対パス）に修正する必要がでてきます。
同じフォルダの中にあるファイルは、相対パスでは同じ場所にあることになります。したがって、 上の例のように、同じフォルダにファイルを置いている場合には、相対パスの URL はファイル名だけになるので、結局のところ、相対的パスにしておく方がわかりやすいです。

ページはこのようになりました。いい感じになってきましたね＾＾
背景画像挿入後のページ
<body style="background-image: url(bg1-yuki.gif); color: rgb(0, 0, 0); background-color: rgb(204, 255, 255);" alink="#000099" link="#000099" vlink="#990099">

相対パスと絶対パス
ホームページを作る時、自分のホームページの中のファイルの URL は相対パス、他の人のホームページにあるファイルの URL は絶対パスで指定するのが基本です。
画像ファイルを使うときは、通常は自分のパソコンに保存してから使うので他の人のホームページにあるファイルの URL を使うことはありませんが、他のホームページにリンクを張るときは、URL を絶対パスで指定します。"http://park16.wakwak.com/~html-css/index.html" は、このホームページのトップの URL を絶対パスで記載したものです。簡単に言えば、「絶対パスの URL ＝ホームページのアドレス」ということになります。絶対パスでは、Web サーバーにあるファイルは「http://~」、パソコンの中にあるファイルは「file:///~」と表示されます。
ファイルの階層図
相対パスについては、図を使って説明します。
左の図は、パソコンの中のファイル構造を表したものです。「マイ  ドキュメント」の中に「MyhomePage」というフォルダを作って、その中にホームページに使うファイルを保存しています。この図で、同じフォルダに 入っているファイルまたはフォルダを、「同じ階層にある」と言います。index.html、image1.gif、folderA、folderD は同じフォルダ MyHomePage の中にあるので、同じ階層にあり、folderA の中にある folderB と image2.jpg は1つ下の階層にあることになります。
画像ファイルが4つありますので、それぞれを HTML ファイル「index.html」および「contents.html」に表示するための URL を相対パスで表してみます。
表示するファイル
 表示されるファイル
 URL
index.html image1.gif "image1.gif"
image2.jpg "folderA/image2.jpg"
image3.gif "folderA/folderB/image3.gif"
image4.jpg "folderD/image4.jpg"
contents.html
 image1.gif "../../../image1.gif"
image2.jpg "../../image2.jpg"
image3.gif "../image3.gif"
image4.jpg "../../../folderD/image4.jpg"

「index.html」に表示する場合…
image1.gif は、index.html と同じフォルダに入っている（同じ階層にある）ので、URL はファイル名だけになります。
image2.jpg は、index.html と同じ階層にある folderA の中（1つ下の階層）にあります。下の階層にあるファイルを指定する時に は、先にフォルダ名を指定してからファイル名を指定し、フォルダ名とファイル名の 間を 「/」（スラッシュ）で区切ります。
image3.gif は、index.html から見ると2つ下の階層にあるので、「/」も2つ入ります。
image4.jpg は、image2.jpg と同じく index.html の1つ下の階層にあるので、"フォルダ名/ファイル名" となります。

「contents.html」に表示する場合…
image1.gif は、contents.html から見ると3つ上の階層にあります。上の階層にあるファイルを指定する時に は、ファイル名の前に「../」（ピリオド・ピリオド・スラッシュ）を 入れます。3つ上だから、「../」も3つ付くので、"../../../ファイル名" となります。
image2.jpg は、2つ上の階層にあるので "../../ファイル名" となり、image3.gif は、1つ上の階層にあるので "../ファイル名" となります。
image4.jpg は、3つ上の階層にある folderD の中にあるので、"../../../フォルダ名/ファイル名" となります。

Composer では、 [URL をページの場所に相対的にする] にチェックを入れておけば、これらを自動で記入してくれますが、一応覚えておきましょう。というよりも、こんなに複雑な ファイル構成にしないようにね＾＾

Home / Index / Prev / PageTop / Next