画像でリンク（低）

画像でリンク（低）

今回使うタグ
<A href="リンク先のアドレス"></A>
<IMG src="画像のアドレス" width="" height="" alt="">

『バナー置き場』のページにも簡単な手順を書きましたが、

画像でリンクを張るにはまず、リンク先のアドレスが無ければリンクできません。

仮にリンク先のアドレスをオイラのページ『http://plaza.rakuten.co.jp/motokikun/』として、

この黄色い部分を『リンク先アドレス』とします。

例えば、オイラのページに文字でリンクを張る場合は

『リンクを張る！』のページにも説明してありますが、

<A href="リンク先アドレス"></A>タグを使ってリンクさせたい文字を挟みます。

<A href="リンク先アドレス">モックン☆彡の部屋</A>

上のように書いた結果が『モックン☆彡の部屋』です。簡単でしょ！？

上の文字をクリックするとオイラのＴＯＰページに飛ぶのは良いけど、

元のページを残したままリンクさせることもできます。（新しいページに表示する事ね♪）

その場合は、半角スペースを空けて『target="_blank"』を追加すると下のようになります。

<A href="リンク先アドレス" target="_blank">モックン☆彡の部屋</A>

注意としては、『target="_blank"』の前に半角のスペースを必ず入れて下さいね。

そしてできた結果が『モックン☆彡の部屋』です。

クリックすると分かると思いますが、新しくページが開いたでしょ♪

それでは本題の画像にリンクを張ってみましょう。

今回例として使う画像は、

　を使います

この画像を表示させるのに以下のタグを使っています。

<IMG src="http://plaza.rakuten.co.jp/img/user/87/20/1128720/148.gif" width="90" height="30" alt="モックン☆彡の部屋">

説明を簡単にするために

『http://plaza.rakuten.co.jp/img/user/87/20/1128720/148.gif』を

『画像のアドレス』とすると、下のように置き換えられます。

<IMG src="画像のアドレス" width="90" height="30" alt="モックン☆彡の部屋">

画像のリンクも文字のリンクと同じで、

<A href="リンク先アドレス"></A>タグを使ってリンクさせたい画像を挟みます。

つまり、下のようになります。

<A href="リンク先アドレス">
<IMG src="画像のアドレス" width="90" height="30" alt="モックン☆彡の部屋">
</A>

そして、結果は右のようになります。　

『width=""』、『height=""』、『alt=""』の効果については

『画像を表示する』のページを参考にしてください。

わかりづらいかもしれませんが、上に表示したリンク画像をよ～～～く見ると、

枠線が表示されてませんか？画像でリンクを張った場合は、標準でこの枠線がつきます。

この画像はリンクを張ってますよ～という目安ですね。

枠線を取りたい場合は、画像のタグに『border="0"』を入れます。

この『border="0"』も『target="_blank"』と同じように半角のスペースを入れて書きます。

<IMG src="画像のアドレス" width="90" height="30" alt="モックン☆彡の部屋" border="0">

そして、先ほど説明したようにリンクタグで挟みます。

挟んだ結果が、　

　です。上のバナーと見比べて違いが分かりますか？

逆に枠線をもっと太くしたい場合は『border="0"』の数値を大きくします。

例えば『border="10"』とすると右のようになります。　

画像の場合も文字と同じで、リンク先を新しいページで表示させたい場合は

<A href="リンク先アドレス" target="_blank"></A>

上のタグで画像のタグを挟んでください。

今までのことを合わせて（画像の周りに枠がなく、新しいページを開く）全て入力すると、

<A href="http://plaza.rakuten.co.jp/motokikun/" target="_blank">
<IMG src="http://plaza.rakuten.co.jp/img/user/87/20/1128720/148.gif" width="90" height="30" alt="モックン☆彡の部屋へようこそ♪" border="0">
</A>

上のようなタグになり、

　と表示されます。

このタグをうつせばオイラのバナーがはれるよ！　(ノ*゜▽゜*)ニパパパ

画像でリンク（高）へ