mamohoのＨＰ作成講座

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

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

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

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

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

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

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

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

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

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

　　□　<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のＨＰ作成講座　のトップページにリンクさせてみます

ところが。。。。。。

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

<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="パソコン" border="0"></a>

これで完成です