リンクを作成する基本的なHTMLタグ（画像編）
●画像リンク
画像リンクとは、画像をクリックすると、リンク先のページが開くリンク形式ですよね。
例えば、下記のようなものです。
クリックしてみると、当サイトのTOPページに移動しますよ。
これは、次のようなHTMLタグを記述しています。
<a href="http://site.dream101.net/">
<img src="http://site.dream101.net/images/top.gif"border="0" alt="トップへ"></a>
初心者の方のために、このタグの意味を簡単に説明しますと、
画像（URL：http://site.dream101.net/images/top.gif）をクリックすると、
リンク先のページ（URL：http://site.dream101.net/ ）に移動するという意味になりますね。
HTMLタグは全て半角で記述しますね。
URLも、もちろん半角で入力しますよ。
「トップへ」という文字は、全角で入力して構いません。
画像のURLの最後に、「border="0"」としているのは、画像の周りに枠を表示させないためです。
ちなみに、border="1"と数字をいれますと、枠が表示されてしまいます。
border="1",border="2",border="3"・・・というように、数字を大きくすると枠が太くなっていきますよ。
また、画像のタグの最後のほうで「alt="トップへ"」としているのは、画像に触れると、「トップへ」という文字を表示させるためです。
これは、代替テキスト（altタグ）と呼ばれるものです。
検索エンジン対策にもなりますので、この代替テキストは表示させるようにしてくださいね。
したがって、画像リンクは、
| <a href="リンク先のURL"><img src="画像のURL" border="0" alt="代替テキスト"></a> |
というHTMLタグを記述し、あなたのブログやＨＰに貼り付ければ良いですね。
なお、画像はあらかじめサーバーにアップロードしておく必要があります。
画像をサーバーにアップロードしておかないと、画像を表示することはできませんよね。
画像をあらかじめサーバーにアップロードしてから、画像のURLを確認して、HTMLタグを記述してくださいね！
上記の例だと、画像のURLは、下記になっていますね。
http://site.dream101.net/images/top.gif
これは、ホストサーバー（http://site.dream101.net/）の下に、画像フォルダ（images）をつくり、この中に「top.gif」という画像を入れた（アップロードした）という意味です。
さて、以上の例は、画像をクリックしてTOPページに移動させるというリンクでした。
自分のサイトの内部にリンクをはるのであれば、上記のように同じウィンドウにリンク先のページを表示して、リンクさせることで単にページを切り替え、移動させるということで良いと思います。
しかし、他人のサイトにリンクをはる場合は、別のウィンドウで開かせたいですよね。
この場合は、「target="_blank"」というタグをリンク先のURLの次に、追加しますね。
例えば、下記の条件で、
リンク先のページ：http://www.mag2.com/
画像のURL： http://site.dream101.net/images/mglogo.gif
代替テキスト： まぐまぐトップページへ
画像をクリックすると新しいウィンドウが開くリンクを作成する場合は、
<a href="http://www.mag2.com/" target="_blank">
<img src="http://site.dream101.net/images/mglogo.gif" border="0" alt="まぐまぐトップページへ"></a>
というHTMLタグを記述することになります。
これを、ブログやＨＰに貼り付けると、下のようになりますよ。
試しにクリックしてみてください。
リンク先のページ「URL：http://www.mag2.com/」が別窓で開くでしょう！？
したがって、リンク先のページを新しいウィンドウで開く画像リンクは、
| <a href="リンク先のURL" target="_blank"><img src="画像のURL" border="0" alt="代替テキスト"></a> |
というHTMLタグを記述し、あなたのブログやＨＰに貼り付ければ良いですね。
