919726

モックン☆彡の部屋

画像でリンク（低）

画像でリンク（低）

今回使うタグ
< 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>

上のようなタグになり、