初心者の方でも簡単に
ホームページが作成できます!
Mobile Sweet Society

ホームページは難しくない  ちょこっとHTML  Lesson6

<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>

 

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


● 画像のURLの調べ方

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

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


ホームページは難しくない  ちょこっとHTML  Lesson6

当ホームページは リンクフリーです! 
Copyright (C) 2004. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。