<a href="移動先のURL"><img src="画像のURL"></a>

ホームページに貼り付けた画像に　リンクを貼ってみましょう。
今回は　画像を貼り付けるタグ　<img src="画像のURL">　と
リンクを設定するタグ　<a href="移動先のURL"></a>　を利用します。

この　画像にリンクする設定を使えば　メールにリンクさせることも可能です。

通常のリンクの場合は　<a href="移動先のURL">任意のテキスト</a>　ですが、
この　任意のテキストの部分が　画像を表示させるタグに変わります。

<a href="移動先のURL">任意のテキスト</a> 　　　　　　↓　↓　↓　↓ <a href="移動先のURL"><img src="画像のURL"></a>

例えば　こういうメニューの画像があるとします。
それぞれにリンクを貼ってみましょう。

○　　Home　と　Profile　は　ページ内のリンクに設定してみます。

○　　BBS　は　レンタル掲示板を借りたと仮定して　外部リンクにします。

○　　Mail　は　メールにリンクしてみます。

 

サブページからトップページにリンクします。

この画像の名前は　home.gif　です。
リンク先は　トップページになりますので　index.html　です。
すると　こんな感じになります。

<a href="index.html"><img src="home.gif"></a>

ただリンクしただけでは　画像のまわりに枠線がはいってしまいます。
そこで　枠線を消す指定をしないといけません。
枠線を消すタグは　border="0"　でしたね

<a href="index.html"><img src="home.gif" border="0"></a>

トップページから　プロフィールのページにリンクします。

この画像名は　profile.gif　です
リンクするページを　profile.html　とします。
すると　こんな感じになります。

<a href="profile.html"><img src="profile.gif" border="0"></a>

今度は　レンタルした掲示板にリンクしてみます。

この画像の名前は　bbs.gif　です。
リンク先は　レンタルした掲示板のアドレスにします
レンタルした掲示板のアドレスが　　http://○○○.com/△△△　というアドレスなら、
こんな感じになります。

<a href="http://○○○.com/△△△△"><img src="bbs.gif" border="0"></a>

今度は　メールにリンクしてみます。

この画像の名前は　mail.gif　です。
リンク先は　メールアドレスになりますので
mailto:◇◇◇@▽▽▽.com　とします。

<a href="mailto:◇◇◇@▽▽▽.com"><img src="mail.gif" border="0"></a>

●　バナーを貼り付けてもらう場合

ホームページを作ったら　相手のホームページからリンクを貼って貰うとき、
バナー広告を使ってもらいたい場合がありますね。

たとえば　私の本業の　中川鍼灸院のバナーは　こんな感じです。

バナーを貼り付けてもらう場合は　画像そのものをダウンロードしてもらって
訪問者側のサーバーに画像をアップロードしてリンクしてもらう方法と、
画像のある場所を絶対URLで指定して表示してもらう方法があります。

ホームページにリンクしてもらいたいとき　こんなフレーズを書いているサイトが
あるのを　見かけたことがあると思います。

当ホームページへのリンクは　下記のHTMLタグをコピーしてご利用ください <a href="http://www.○○○.com/"><img src="http://www.○○○.com/□□□.gif" border=0></a>

ここで注目してほしいのは　画像のURLのところです。
この場合　画像のURLは

<img src="http://www.○○○.com/□□□.gif" border=0>

http://www・・・　と　絶対URLで指定されていますね。

なぜそうなるかというと

通常では　画像は制作者側のサーバーにアップロードされていますので、
http://www・・・　とは指定せず　普通に

<img src="□□□.gif"

と　指定するだけでいいのですが、
今回の場合は　表示される画像自体は　相手側のサーバーにアップロード
されていますので　絶対URLで指定しないといけないんです。

簡単にまとめてみると
画像をダウンロードして自分のサーバーにアップロードした場合は

<a href="http://www.○○○.com/"><img src="□□□.gif" border=0></a>

 

画像をダウンロードせず、相手側のサーバー内にある画像のURLを指定したときは、

<a href="http://www.○○○.com/"><img src="http://www.○○○.com/□□□.gif" border=0></a>

となるわけですね。

ちなみに　上の　中川鍼灸院のバナーを　絶対URLで指定した場合で説明すると、

中川鍼灸院のURL（ホームページアドレス）は、
http://www.mmdn-net.com/~harikyu/

バナー画像のURLは
http://www.mmdn-net.com/~harikyu/bana/shinkyuin_1.gif

これをリンクで貼り付けてみると、

<a href="http://www.mmdn-net.com/~harikyu/"><img src="http://www.mmdn-net.com/~harikyu/bana/shinkyuin_1.gif" border="0"></a>

さらに　この画像は　幅　234ピクセル　高さ　60ピクセルです。
これを　width="234" height="60"　と指定します。

さらにさらに　新しいウィンドウで表示されるように指定してみます。
新しいウィンドウに表示させるタグは
target="_blank"　でしたね。

<a href="http://www.mmdn-net.com/~harikyu/" target="_blank"><img src="http://www.mmdn-net.com/~harikyu/bana/shinkyuin_1.gif" width="234" height="60" border="0"></a>

ぱっと見ると　ぐちゃぐちゃしてて解りづらいですが、
１つ１つわけて考えると　難しいことは何もやってません。
だいたいの感じがつかめたでしょうか？

●　画像のURLの調べ方

さて　肝心の画像のURLはどうやって調べるのか　という疑問がでてくると思います。
画像のURLは　Windowsの場合は　画像の上にカーソルをもっていって　右クリックし
メニューからプロパティを選ぶと　画像のURLがわかります。

Macの場合は　画像の上で長押しクリックしてメニューを開き
「新しいウィンドウで画像を開く」　を選ぶと　画像のURLがわかります。