Amazonアソシエイトバナー
当方のブログには、Amazonアソシエイトバナーを利用させて頂いております。
このAmazonアソシエイトバナーは、Amazonアソシエイトのページに行き「商品リンク」の「バナーリンク」から色々なバナーを選ぶことが出来ます。
Amazon.co.jpで多く買物する自分にとって、自分のサイトからAmazon.co.jpのページに飛ぶのはある意味便利です。
収益については微々たるものですが、その収益はブログを開催続けるため有効に使わせて頂いております。
改めてお礼申し上げます(o_ _)o))
Amazonアソシエイトバナーが正常に表示されない現象
そのAmazonアソシエイトバナーをブログのサイドカラムに設定した場合、何故か正常に表示されません。
具体的には、下の画像のようにAmazonアソシエントバナーの2/3だけしか表示されない症状となってしまいます。
このAmazonアソシエイトバナーが正常に表示されない現象は今始まったわけでは無く、かれこれ2017年11月位から発生している状況です。
その時に色々調べてみたところ、Amazonアソシエイトバナーのように「iframeタグ」を使ってバナーを表示している場合、正常に表示されない状態となってしまうようです。
Amazonアソシエイトバナーを正常に表示させる
Amazonアソシエイトバナーを正常に表示されるように、Amazonアソシエイトバナーのソースを修正してみました。
Amazonから提供されるAmazonアソシエイトバナーのソースが
とした場合、Amazonアソシエイトバナーのサイズを指定している「width=”300″ height=”250″」の部分をstyleタグで指定します。
具体的には、下記のようにAmazonアソシエイトバナーのサイズを指定している「style=”width:300px; height:250px; border:none;”」に変更することで、正常に表示されるようになりました。
これによりAmazonアソシエイトバナーは、正常に表示されるようになりました。
Amazonアソシエイトバナーのセンター位置決め
ついでにAmazonアソシエイトバナーの表示位置をセンター(中央)に設定してみました。
Amazonアソシエイトバナーのソースに行った修正は、
- Amazonアソシエイトバナーのソース全体を「<div align=”center”>~</div>」で囲みます。
- Amazonアソシエイトバナーのソース内の「width=”300″」を削除します。
の2点です。
<iframe style=”height: 250px; display: block; margin: 0px 0px; border: none;” src=”https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=12&l=ur1&category=amazonsale&banner=0YJD2D3K0ZTSRW1PTVR2&f=ifr&linkID=94f53c8af7c8de64f47e1b753dca7c7c&t=○○○○○○website-22&tracking_id=○○○○○○website-22″ frameborder=”0″ marginwidth=”0″ scrolling=”no”></iframe>
</div>
これによりAmazonアソシエイトバナーは、センター(中央)に表示されるようになりました。
最後に
今回のAmazonアソシエイトバナーがサイドカラムで正常に表示されない症状は、検索してみても事例がほとんど見つからないので、多くの方は正常に表示されていると思われます。
と言う事で、一部の環境でこの様な症状となっていると思われますが、その環境を調べるのも面倒なので当面今回の対応で使い続けたいと思います。
コメント