アフィリエイト タグ　仕組み

＊タグのかぎかっこは反映されるので省いています。

 

アフィリエイターとして覚えておくべきタグ
そもそも。ホームページの基本構成として使われている
html、head、title、body、h1

 

といったタグについて説明させていただきました。

 

 

これらの他にもサイトでは数多くのタグが使われています。

 

 

今回は、その中でもアフィリエイターさんが知っておくと
便利なimgタグについてお話させていただきます。

 

タグというのは、開始タグ～/閉じタグという２つでセットになりますよ～
とお話させていただいたのは覚えてますか？

 

今日お話させていただ（img）タグというのは中でも
例外的なタグで「閉じタグ」というものがありません。

 

だから（img）という形で、単独使用するものなんですね。
さて、このタグどうやって使ったら良いのでしょうか？

 

（img）だけだと、どの画像を表示させたら良いのか分かりませんよね？
なので、画像のソース（画像のURL）を指定してあげましょう。

 

画像のURLを指定してあげるには（src）という記号を使います。
これは、ソース（source）が由来になっています。
画像データの情報源という意味ですね。

 

img src="画像のURL"

 

はい、これだけで画像を表示させることができました。
とっても簡単ですね。でも、たまにホームページを見ていると

 

画像がうまく表示されず「×」みたいになっているページを
見かけることってありますよね。

 

僕や皆さんのようにサイトを運営する側としては、
もちろん、画像をしっかり表示させるに越したことはないのですが、
万が一のことも考えて、備えをしておく必要があります。

 

その方法の１つが、画像がうまく表示されなかった場合でも、
訪問者に意味が伝わるよう代わりとなるテキストを指定してあげます。

 

「代わり：alternate」の最初の３文字を取った
「alt」という記号を使います。

 

img src="画像のURL" alt="画像の説明"

 

これで画像が表示されなかった場合でも、
テキストが代わりに表示してくれるので

 

ユーザービリティの低下をある程度は
防ぐことができますね。

 

このように「alt」を指定しておくことには、
もうひとつメリットがあります。

 

それは、このように画像に説明を付け加えることで
Googleがキーワードと、画像を関連付けを行ってくれるので
画像検索で表示されやすくなるというものです。

 

もしかしたら、アフィリエイターさんたちの間では
こっちの意味の方がよく知られているかもしれませんね。

 

さて、画像が表示されなかった場合に
もうひとつ問題が出てくることがあるのですが、
それが何か分かりますか？

 

先ほど、画像のリンク先が切れていると、
「×」が表示されるとお伝えしました。

 

このとき、本来、画像が占めるはずだったスペースが
表示されないことで空いてしまい周りのテキストなどが
大きくズレてしまうことがあります。

 

画像があってもなくても、特に問題がない場所なら良いのですが、
これが原因でページ全体のデザインが崩れてしまうという事もあります。

 

このようにデザインが崩れてしまうのを防ぐために、
あらかじめ画像の大きさを指定してあげるという方法が有効です。

 

（img src="画像のURL" alt="画像の説明" width="画像の幅" height="画像の高さ"）

 

 

「width」が幅、「height」が高さになり、それぞれ数字で指定します。
こうすることで、どんな意味があるのでしょうか？

 

画像の大きさを指定すれば、そのサイズで画像が表示されるのは
誰でもわかると思います。

 

実は、こうしておくことで、画像が表示されなかった場合でも、
そのサイズの枠が代わりに表示されるので、

 

ページのデザイン全体が崩れるのを防ぐ事が出来るのです！
このようにサイトを作る時は、色んな事を想定しておかなくてはいけません

 

さて、最後にこの画像にリンクを貼ってバナーにしましょう。

 

リンクを作るには、アンカー（anchor）の頭文字を取った
（a）というタグでくくってあげます。

 

a　img src="画像のURL" alt="画像の説明" width="画像の幅" height="画像の高さ"　/a

 

ただ、これだけだと、リンク先がないので意味がありません。
参照先（Hypertext Reference）という英語から
「href」という記号で指定してあげます。

 

a href="リンク先"　img src="画像のURL" alt="画像の説明" width="画像の幅" height="画像の高さ"　/a
はい、これでバナーの完成です。

 

今まで、アフィリリンクを貼るときに、このようなソースを
コピペしたことはあるかもしれませんが、改めて意味を知ると、
ちょっと親しみがわきませんか？