これだけは必要HTML講座・・・タグを覚えよう！画像編
画像に関するHTMLの定義方法を説明します。ネットショップの場合、商品の説明のために必ず画像の取扱いが必要になります。アフィリエイトでも商品リンクを貼る場合に必要となってきますので、是非マスターしてください。
画像をページに貼る
| <IMG src="http://business-labo.net/ref/business-image.jpg"> |
前提条件として、上の文章中の「business-image.jpg」はサイズが460-307px（ピクセル）の画像で私のサーバーの「ref」というディレクトリーにアップロードしてあります。
「http://business-labo.net/ref/business-image.jpg」というのは表示させる画像のURLです。
上のHTML文章をサーバーへアップロードしてブラウザーで見ると下のような画像が表示されます。
画像の表示サイズを指定してページに貼る
| <IMG src="http://business-labo.net/ref/business-image.jpg" width="153" height="102"> |
上で表示されている画像は、サイズが460-307px（ピクセル）ですが、画像の縦、横のサイズを約1/3にして貼付けます。そのために横のサイズをwidth="153"、縦のサイズをheight="102"と指定します。
上のHTML文章をサーバーへアップロードしてブラウザーで見ると下のような画像が表示されます。
画像にリンクを設定して、クリックすると大きな画像を表示
| <a href="http://business-labo.net/ref/business-image.jpg" target="blank"><IMG
src="http://business-labo.net/ref/business-image.jpg" width="153"
height="102"></a> |
上のように記載すると、初めに横153px、縦102の画像を表示させておいて、画像がクリックされると元のサイズが表示されるようになります。ネットショップで、小さい画像を「商品一覧」に載せておいて、詳しく見たい人は写真をクリックするという場合に使います。試しにクリックしてみてください。
画像の表示サイズを指定してページに貼る
| <IMG src="http://business-labo.net/ref/business-image.jpg" width="153" height="102"> |
上で表示されている画像は、サイズが460-307px（ピクセル）ですが、画像の縦、横のサイズを約1/3にして貼付けます。そのために横のサイズをwidth="153"、縦のサイズをheight="102"と指定します。
上のHTML文章をサーバーへアップロードしてブラウザーで見ると下のような画像が表示されます。
alt属性を付ける
| <a href="http://business-labo.net/ref/business-image.jpg"
target="blank"><IMG src="http://business-labo.net/ref/business-image-S.jpg" alt="ネットビジネスシーン"></a> |
上のように「 alt="ネットビジネスシーン"」を記載して、画像の上にカーソルを置くと、「ネットビジネスシーン」とポップアップが表示されます。
またサーバー側に「business-image-S.jpg」という画像がない場合、下のように表示されます。
alt属性は「代替テキスト」と呼ばれていて、サーチエンジンがキーワードとして認識するのでSEO対策になります。以上のことより、サーチエンジンに受けを良くするには 「画像を沢山使う」 「画像には必ずalt属性を付ける」 ということになります。
情報商材のアフィリエイト
