超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > Netscape6でホームページをつくろう! > 背景画像の挿入 > Next 

■ 背景画像の挿入

今度はページの背景に画像を挿入してみます。

背景画像を設定するには、当然、挿入する画像(イメージファイル)を準備しなければなりません。
画像は、お絵かきソフト(ペイントなど)を使えば自分で作ることもできますが、ふつう、超初心者さんは、いわゆる「素材屋さん」からいただいて使っています。
「素材」というのは、ホームページを作るための画像ファイルのことで、雑誌の付録で付いてくる場合もありますし、本屋さんに行けば素材専門の本も並んでいます。また、インターネットで検索すれば素材を無料で配布しているサイトをたくさん見つけることができます。
このサイトのリンク集(LINKS)に素材屋さんがいくつかあるんで、行ってみてね。

素材屋さんを集めたサイトもたくさんあります。
こちらも探してみましょう。

sozai-R
素材の森

どうでしたか?
たくさんあったでしょ^^
いくつか訪ねてみて、自分の作ろうとしているホームページに合った素材屋さんを見つけて下さい。

背景画像は、画面一杯の大きな画像を使っているように見えますが、通常はそうではなく、小さな画像を前後左右に繰り返し、タイル状に敷き詰めたものです。
このページの最後に画面の見本を表示していますが、この背景画像の場合は、画面の横幅一杯の画像を縦方向に繰り返し並べることで、画面一杯に表示しています。
HTML では、背景画像を指定すれば、自動的に画面一杯に繰り返し並べられるようになっています。

☆素材のいただき方☆

通常、画像は自分のパソコンに保存してから使用します。
素材屋さんで欲しい画像が見つかったら、その画像にマウスポインタをあてて、右クリックします。
Natscape の場合は、[画像に名前を付けて保存]を選択すると、[ファイルを保存]ダイアログボックスが開くので、適当なフォルダを指定して、名前を付けて保存します。
IE の場合もほとんど同じで、[名前を付けて画像を保存]を選択すると[画像を保存]ダイアログボックスが開くので、適当なフォルダを指定して、名前を付けて保存します。

☆素材をいただくときの注意点☆

素材屋さんには、だいたい使用上の注意が書いてあるので、ちゃんと読んでから使いましょう。
ここでは、一般的に書かれていることをいくつか上げておきますが、必ずしも全ての素材屋さんに当てはまるわけではありません。
(その1)直リンクはしないこと
素材は、使用するページから画像ファイルにリンクを張ることで、ページに表示されます。
リンクの方法には2つの種類があり、同じサーバ内でのリンクをローカルリンク、違うサーバ間のリンクをグローバルリンクと言います。
直リンク(直接リンク、直リン)というのは、グローバルリンクの方で、素材を使ったホームページ(あなたのホームページ)が開かれる度に、そのホームページが置いてあるサーバから素材屋さんのサーバにアクセスして、画像ファイルを読み込む必要があります。これでは、素材屋さんのサーバは忙しくて大変ですね。
素材は、自分のパソコンに保存してから使用しましょう。

※サーバ(server)
接続されているコンピュータにサービスを提供するためのソフト、またはソフトが入っているハードを含めてサーバ(またはサーバー)といいます。電子メールをやり取りするためのサーバはメールサーバ、ネットワークに不正に浸入するのを防ぐためのサーバはファイアウォールサーバです。サイトを置くためのサーバは Web サーバです。インターネットには、その他にもさまざまな種類のサーバが接続されています。
(その2)再配布はしないこと
再配布とは、素材屋さんからいただいた素材を他の人にあげちゃうことです。
無料で配布しているものでも著作権(作った人の権利)はあります。苦労して作った物を次から次へと配布されたり、自分が知らないサイトで自分が作った素材がいつの間にか使われていたら、いくら心の広い人でも、嫌な気分になっちゃいますよね。
素材を欲しいという人がいたら、素材屋さんの URL を教えて上げましょう。
(その3)加工はしないこと
加工とは、いただいた素材を自分で使いやすいように変えることです。
加工については、素材屋さんによっては許可しているところもあります。
また、素材のイメージを変えない程度の加工なら OK とか、大きさは変えても良いけど縦横の比率は変えちゃダメとか、色を変えるくらいなら・・・などなど、さまざまです。
(その4)お礼を言うこと
素材屋さんに掲示板があったら、一言お礼を書いておいた方が良いと思います。
私は素材屋さんじゃないからよくわからないけど、自分のホームページの掲示板にメッセージがあればうれしいから、素材屋さんもいっしょじゃないかなって思います。

では、背景画像を設定する方法を説明します。

背景色を設定したときと同じく、[書式]メニューから[ページの配色と背景]を選択して、ダイアログボックスを開きます。

背景画像ダイアログボックス

下の方にある[背景画像:]というところに、画像ファイル名を入力します。[ファイルを選択]をクリックすれば、[HTMLファイルを開く]ダイアログボックスが開くので、そこからファイルを選択することもできます。


★ここで要注意!★

(その1)ファイル名を入力する場合
さっきも言ったけど、画像の挿入は、画像ファイルにリンクを張ることです。リンクを張るには、そのファイルのある場所( URL )を正しく記入しなければなりません。
画像を使うページ(リンク元ファイル:ここでは、index.html )と、画像ファイル(リンク先ファイル)が、同じフォルダにある場合は、画像ファイル名だけ入力します。
違うフォルダにある場合は、先にフォルダを指定してから画像ファイル名を入力します。この場合は、フォルダ名とファイル名の間にスラッシュ( / )を入れます。ただし、これは、リンク元ファイルと、リンク先ファイルが入っているフォルダとが同じ階層(同じフォルダの中)にある時だけです。
リンク元ファイルより、リンク先ファイルが入っているフォルダが下の階層にある場合は、「フォルダ名/フォルダ名/ファイル名」ということになります。
リンク先ファイルが入っているフォルダが上の階層にある場合は、「../ファイル名」となります。「../」(ピリオド ピリオド スラッシュ)は1つ上がるという意味だと思って下さい。

リンク説明用の画像
わかりにくいんで、図を使って説明しますね。
[index.html]をリンク元ファイルとして、4種類の画像にリンクを張ります。

[dog.gif]は、[index.html]と同じフォルダ[folderC]に入っている(同じ階層)ので、ファイル名「dog.gif」だけを入力します。

[bear.gif]は、[index.html]と[folderD]が同じフォルダに入っていて、さらにその中に入っている(1つ下の階層)ので、「folderD/bear.gif」と入力します。

[rabbit.gif]は、2つ下の階層になるので、フォルダ名を2つ、すなわち「folderD/folderE/rabbit.gif」と入力します。

[cat.gif]が入っている[folderB]は、[index.html]が入っている[folderC]と同じ階層にあります。つまり、[index.html]から見れば、1つ上の階層ということになります。1つ上がるときは、「../」を使って、「../folderB/cat.gif」と入力します。

わかりましたか〜\(^^;

ちょっとしつこいけど、リンクの張り方はホームページを作る上でとても重要なんで、もうちょっと説明しておきますね。

Qestion1:
もし、[folderA]の中に画像ファイル[mouse.gif]が入っている場合に、これにリンクを張るには?
Answer1:
[mouse.gif]は、[folderC]と同じ階層になるので、[index.html]の1つ上の階層になりますね。よって答えは、「../mouse.gif」となります。
Qestion2:
もし、[folderA]と同じ階層に、[cow.gif]があり、これにリンクを張るには?
Answer2:
[folderA]は、[index.html]から見た場合、2つ上の階層です。よって答えは、「../../cow.gif」ということになります。
(その2)ファイルを選択する場合
これもちょっとやっかいです。
ここでファイルを選択すると、なんかわけのわからない記号(?)がだらだら表示されます。
これは、作っているパソコン内のファイル指定( URL:ローカルパス )なんで、Web サーバにアップロードするとリンクが切れてしまいます。
したがって、一回ファイルを選択してから、わけのわからない部分を削除する必要があります。
わけのわからない部分というのは、記述してある頭から、画像ファイルが入っているフォルダ名の手前まで、つまり、残す部分は(その1)で説明した部分になります。
file:///C|/My%20Documents/34site/gazo/haikei_dog.gif

こんな感じで記述されます。
これは、パソコンのハード[C]の中の、フォルダ[My Documents]の中の、フォルダ[34site]の中の、フォルダ[gazo]の中の、画像ファイル[haikei_dog.gif]を指定しています。
しかし、実際にアップロードするのは、[34site]の中だけですので、[gazo]フォルダより前の部分は削除しておく必要があります。

※アップロード(uproad)
コンピュータからコンピュータにデータを送信すること。
ホームページの場合は、パソコンから、Web サーバにファイルを転送することを言います。逆に、サーバからデータを受信することをダウンロードと言いますね。
リンクを張るときの注意点を2つ説明しました。
ちょっとややこしいですが、これらは、背景画像を設定するときだけじゃなく、リンクを張るときの重要なポイントになりますので、正確に覚えておいて下さい。
リンクはホームページを作るときの要ですから。

さて、話を元に戻します。
[ページの配色と背景]ダイアログボックスの[背景画像:]というところにはこのように入力します。

ページの配色と背景ダイアログボックス

これで、OK をクリックすると、背景画像が挿入されます。

背景画像挿入後のComposer

かわいいでしょ〜♪

なお、背景画像は背景色より優先されます。背景画像を挿入するときは、背景色は何を指定しても関係ありません。
ただし、通常、画像の読込は、ページの読込よりも若干遅くなるので、ページのイメージを表示するために、背景画像と似た色彩の背景色を指定しておくようにしましょう。


 Home < Netscape6でホームページをつくろう! < Back < 背景画像の挿入 > Next