画像素材集の利用

last modified 1st/Nov. 2000

WWW 上には、 WebPage を装飾するための「画像素材」を扱っているサイトが多数有ります。画像を自作しない場合には、大変便利ですので使ってみましょう。

ここでは、月球儀工房さんから画像を拝借してみます。以下の内容は、月球儀工房さんとは一切関係無く、独断で行っております。誤謬等の文責は私に帰しますので御了承ください。

バナー

リンク・アンカーになる画像をバナーと呼びます。バナー (banner) とは元々、旗、見だしなどの目立つ広告のことです。

素材集から画像を拝借する場合は、バナーを張るのが礼儀になっています。個人運営のサイトではほぼ必須条件ですので、特に要求されない場合もリンク・バナーを貼るように御奨めします。

まず、月球儀工房さんのリンク許諾条件「リンクについて」を確認します。
<a href="http://www.nyoro.com/factory/howlink.html" target="_blank">リンク許諾条件「リンクについて」</a>
どうやら、バナーが複数有るようです。ここでは上から四つ目のバナーを選びます；

バナーの full URL は、http://www.nyoro.com/factory/image/nyorof9.gif
表示サイズは、 88 × 31
代替テキストは、 alt="月球儀工房"

リンク許諾条件「リンクについて」によれば、月球儀工房さんはバナーも直接フル URL から参照する事を禁止しています。そこで、まずはバナー画像をダウンロードします。

Win. では、: 画像を右クリックして、「名前をつけて保存」を左クリック。I.E.とN.C.でメニューの名前が異なりますが、似たようなものになっています。
Mac. では、: 画像にカーソルをあててしばらくすると、メニューが出ます。このメニューから、「画像をディスクにダウンロード」（I.E.）、「画像を別名で保存」（N.N.）を選びます。; 或は、画像をデスクトップにドラッグ&ドロップします。

特に選ばなければ、 nyorof9.gif と云う名前で保存されると思います。今は、この画像を、本 HTML 文書と同じディレクトリに保存しました。この HTML 文書からは、相対 URL "./nyorof9.gif" で参照できます。

<img src="./nyorof9.gif" alt="月球儀工房"
  width="88" height="31">

更に、この画像がリンクの始点アンカー（リンク・アイコン）になるように、 A 要素の子要素にします。リンク許諾条件「リンクについて」に則って、リンク先を http://www.nyoro.com/factory/ にします。

<a href="http://www.nyoro.com/factory/"
  target="_blank"><img src="./nyorof9.gif" alt="月球儀工房"
  width="88" height="31"></a>

A 要素の href 属性の値がリンクの目的地の URL です。 A 要素の target 属性は表示するフレーム枠名を指定しますが、今の場合は予約語である _blank を指定しました。これは新たにウィンドウを開いて表示するように指示しています。一般に、他サイトへのリンクには、 target="_top" か、 target="_blank" を指定するように心掛けて下さい。

ブラウザによっては、画像の周囲にボーダーを表示するものがあります。例えば、 Netscape ではあらゆる画像の周囲にボーダーを引き、 I.E. では、リンク・アンカー画像の周囲にボーダーを引きます。このボーダーを表示させたくない場合は、画像要素に border 属性を与えます；

<a href="http://www.nyoro.com/factory/"
  target="_blank"><img src="./nyorof9.gif" alt="月球儀工房"
  width="88" height="31" border="0"></a>

これで画像の周囲にボーダーは表示されません。

素材の利用

素材を拝借しましょう。バナーは full URL で参照するのが通例ですが、素材を利用させていただく場合には、ダウンロードして使用するのが礼儀です。先方のサーバーに無用な負荷をかけないようにするための配慮です。

月球儀工房さんの素材集の中の、「ライン1」にある最初の画像をダウンロードします。
<br> <p>「<a href="http://www.nyoro.com/factory/material/line/line01.html" target="_blank">ライン1</a>」</p>

Win. では、: 画像を右クリックして、「名前をつけて保存」を左クリック。I.E.とN.C.でメニューの名前が異なりますが、似たようなものになっています。
Mac. では、: 画像にカーソルをあててしばらくすると、メニューが出ます。このメニューから、「画像をディスクにダウンロード」（I.E.）、「画像を別名で保存」（N.N.）を選びます。

特に選ばなければ、 line01.gif と云う名前で保存されると思います。今は、この画像を、本 HTML 文書と同じディレクトリに保存しました。この HTML 文書からは、相対 URL ./line01.gif で参照できます。

<img src="./line01.gif" alt="水平線">

水平線

この画像のサイズは 700 × 30 なので、適当な width 属性と hright 属性は次のようになります；

<img src="./line01.gif" alt="水平線"
  width="700" height="30">

素材集のサイトでは、画像の利用法を詳しく説明してあることが多いので、参照されると宜しいでしょう。

保存時の拡張子

Internet Explorer では、 JPEG 画像を保存する際に拡張子を *.bmp にしてしまう場合があるそうです。これは「インターネット一時ファイル」がたまることで起こるとされています。

「インターネット一時ファイル」は、「ツール(T)」-［インターネットオプション］-［全般］から削除できます。

Microsoft の技術情報では I.E.3.02 の症状として扱われていますが、後継バージョンでも同様の症状があるそうです。

<<PREV | TOP | NEXT>>

FC2>		モビット