ＨＴＭＬタグ（画像の表示編）：０から稼ぐサイトをつくろう

ＨＴＭＬタグ（画像の表示編）

あなたのサイトに画像やバナーを表示させたい場合、HTMLタグはどのように記述すれば
良いでしょうか？

画像（バナー）というと、アフィリエイトでのASP（アフィリエイトサービスプロバイダ）のバナ
ー画像が、すぐに思い浮かびますね。

ASPのバナー画像は、あらかじめタグが用意されているので、その用意されたタグを貼り
付けるだけで簡単に表示できるのですが、それ以外に画像を表示させたい場合も多々あ
りますから、説明したいと思います。

●画像（バナー）を表示させるHTMLタグ

　 ①画像を表示させる場合は、以下のHTMLタグが基本になります。

　　　上記のタグの個別の意味は、以下のようになります。

◆　<img src="">	画像（バナー）の表示

◆　<img src="" width="" height="">	画像（バナー）の幅と高さを指定
※幅と高さを指定する場合、width=""とheight=""の""の間に、ピクセル　　単位の数値を半角で入力します。
(例）幅200ピクセル、高さ150ピクセルの場合は、width="200" 　　　　　height＝"150"と指定します。

◆　<img src="" border="">	画像（バナー）の周囲に枠を表示
※枠を表示させない場合、border="0"と半角で指定します。　　枠を表示させる場合、border=""の""の間に、ピクセル単位の数値を半角で入　　力します。
（例）枠の太さを1ピクセルと指定する場合は、border="1"と半角で入　　　　力します。

◆　<img src="" alt="">	代替テキスト（altタグ）の表示
※代替テキスト（altタグ）とは、画像（バナー）をポイントしたときに表示されるテキ　　スト（文字）のことです。基本は代替テキストも表示させます。　　代替テキスト（altタグ）を表示させる場合、alt=""の""の間に、テキスト（文字）を　　入力します。
（例）画像（バナー）をマウスポインタでポイントしたときに「インターネット」と表示　　　　　させたい場合は、alt="インターネット"と入力します。

　　　では、例として以下の画像を表示させてみましょう。

・画像のURL	：　http://site.dream101.net/images1/image1c.jpg
・画像の幅	：　150ピクセル
・画像の高さ	：　111ピクセル
・枠線	：　非表示
・代替テキスト	：　コアラ

　　　この場合、HTMLタグは、以下のように記述すればよいですね。

　　　上記で記述したHTMLタグを、ブラウザ（IE）で見てみると、以下のように表示されます。

コアラ

　　画像をマウスでポイントしてみてください、「コアラ」と表示されますね。

　　ちなみに、画像の周囲の枠を3ピクセルに指定してみると、以下のように表示されます。

コアラ

　　画像の周囲に枠線が、はっきりと表示されていますね。

　　この場合のHTMLタグは、border="0"をborder="3"として以下のように記述しています。

　②代替テキスト（altタグ）を表示させない場合

　　代替テキスト（altタグ）を表示させない場合は、alt=""の部分を記述しません。

　　つまり、以下のHTMLタグになります。

　

　　上記の例でいうと、HTMLタグは、以下のように記述します。

　　　ブラウザ（IE）で見てみると、以下のように同じ画像が表示されますが、画像をマウス
　　　でポイントしてみてください。テキスト（文字）は表示されないですね。

　

　　　なお、代替テキスト（altタグ）はなるべく入力したほうが良いでしょう。
　　　理由は、見る人に親切ということもあるかもしれませんが、検索エンジン対策にもなる
　　　からです。

　　　つまり、ロボット型検索エンジンは、代替テキスト（altタグ）も拾いますので、画像（バナ
　　　ー）には代替テキスト（altタグ）を設定しておくのが有利に働くのです。

０から稼ぐサイトをつくろう

あなたのサイトからジャンジャン収入を得よう！！初心者、中高年者でもできる０からのWebサイト資産化計画

ＨＴＭＬタグ（画像の表示編）