リンクを貼ってみよう　画像編

●　リンクを貼ってみよう　画像編

今回は　画像を貼り付けて　その画像にリンクを貼る方法です
このお話は　せつらさんのページでも　同じ内容を説明してありますので
そちらも参考にしてみてください

まず　画像を用意しましょう
楽天広場の場合は　画像の倉庫に登録する必要があります
登録できる画像のファイル形式は
「jpeg、　gif、　png」　のファイルのみ登録できます

普通にHPを作る場合は　HTMLファイルとは別にフォルダを作って
イラストや写真をまとめておくと　あとで編集がしやすいです
その場合のタグの指定は

<a href="フォルダ名/ファイル名"></a>　

と　指定するわけですね
画像のファイル形式ついては　また　別の機会でお話します

まず　画像を貼り付けてみましょう
とりあえず　こんな画像を用意しました

パソコン

このHTMLのタグは　楽天広場の画像倉庫に登録してある画像なので
このようになっています

　　□　<IMG SRC="画像のURL">　で　画像を貼り付けることができます

　　□　width="90"　は　画像の幅を　　height="78"　は　画像の高さを
　　　　ピクセルであらわしています

　　□　alt="代替テキスト" で　画像が表示されなかったときの替わりになる
　　　　テキストを指定しています
　　　　ここでは　画像が表示されなかったら　「パソコン」と　テキストで
　　　　表示してくれます

ざっとですが　画像の貼り付けのタグ　おわかりいただけたでしょうか？
さて　この画像にリンクをはってみましょう
「げっ！」　なんて思わないでね♪（笑）
タグが　ちょっと長ったらしくなりますが　理屈は同じですので
安心してください

まず　　上の画像に　リンクを貼るわけですから
リンクのタグと　画像を貼り付けるタグが必要なのはわかりますよね
では　やってみましょう

リンク先は　mamohoのＨＰ作成講座　の　トップページにします

　<a href="http://plaza.rakuten.co.jp/mamoho/">mamohoのＨＰ作成講座</a>

です

でも　これだとテキストのリンクですので

mamohoのＨＰ作成講座

こうなってしまいます　ですから　上の赤い部分のテキストが
そのまま表示されてしまいます

そこで　この　「mamohoのHP作成講座」　というテキストの部分に
画像のタグ　<img src=～　てやつを　入れてやればよいのです

では　さっきのパソコンの画像を　mamohoのＨＰ作成講座　のトップページに
リンクさせてみます

<a href="http://plaza.rakuten.co.jp/mamoho/"><IMG SRC="http://plaza.rakuten.co.jp/img/user/94/55/869455/146.jpg" width="90" height="78" alt="パソコン"></a>

ほら　できました　簡単ですね

ところが。。。。。。

画像の周りに　変な枠ができてしまいました
画像にただ　リンクをすると　こうなってしまいます
では　どうやってとってしまうんでしょう
ここで　せつらさんのページをみていただければわかるんですが
外枠をなしにしてね♪　　という　border="0"　の指定をおこないます

これで完成です