WordPress

Amazonアソシエイトバナーが正常に表示されない現象について

アイキャッチ画像 WordPress
スポンサーリンク

Amazonアソシエイトバナー

当方のブログには、Amazonアソシエイトバナーを利用させて頂いております。

このAmazonアソシエイトバナーは、Amazonアソシエイトのページに行き「商品リンク」の「バナーリンク」から色々なバナーを選ぶことが出来ます。

Amazon.co.jpで多く買物する自分にとって、自分のサイトからAmazon.co.jpのページに飛ぶのはある意味便利です。

収益については微々たるものですが、その収益はブログを開催続けるため有効に使わせて頂いております。

改めてお礼申し上げます(o_ _)o))

Amazonアソシエイトバナーが正常に表示されない現象

そのAmazonアソシエイトバナーをブログのサイドカラムに設定した場合、何故か正常に表示されません。

具体的には、下の画像のようにAmazonアソシエントバナーの2/3だけしか表示されない症状となってしまいます。

Amazonアソシエイトバナーが正常に表示されない現象について

このAmazonアソシエイトバナーが正常に表示されない現象は今始まったわけでは無く、かれこれ2017年11月位から発生している状況です。

その時に色々調べてみたところ、Amazonアソシエイトバナーのように「iframeタグ」を使ってバナーを表示している場合、正常に表示されない状態となってしまうようです。

Amazonアソシエイトバナーを正常に表示させる

Amazonアソシエイトバナーを正常に表示されるように、Amazonアソシエイトバナーのソースを修正してみました。

Amazonから提供されるAmazonアソシエイトバナーのソースが

<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=12&l=ur1&category=amazonsale&banner=0YJD2D3K0ZTSRW1PTVR2&f=ifr&linkID=1c04012bd9fd56052e47340afa74a110&t=○○○○○○website-22&tracking_id=○○○○○○website-22" width="300" height="250" scrolling="no" marginwidth="0" style="border:none;" frameborder="0"></iframe>

とした場合、Amazonアソシエイトバナーのサイズを指定している「width="300" height="250"」の部分をstyleタグで指定します。

具体的には、下記のようにAmazonアソシエイトバナーのサイズを指定している「style="width:300px; height:250px; border:none;"」に変更することで、正常に表示されるようになりました。

<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=12&l=ur1&category=amazonsale&banner=0YJD2D3K0ZTSRW1PTVR2&f=ifr&linkID=1c04012bd9fd56052e47340afa74a110&t=○○○○○○website-22&tracking_id=○○○○○○website-22" scrolling="no" marginwidth="0" style="width:300px; height:250px; border:none;" frameborder="0" rel="nofollow"></iframe>

これによりAmazonアソシエイトバナーは、正常に表示されるようになりました。

Amazonアソシエイトバナーが正常に表示されない現象について

Amazonアソシエイトバナーのセンター位置決め

ついでにAmazonアソシエイトバナーの表示位置をセンター(中央)に設定してみました。

Amazonアソシエイトバナーのソースに行った修正は、

  1. Amazonアソシエイトバナーのソース全体を「<div align="center">~</div>」で囲みます。
  2. Amazonアソシエイトバナーのソース内の「width="300"」を削除します。

の2点です。

<div align="center">
<iframe style="height: 250px; display: block; margin: 0px 0px; border: none;" src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&amp;p=12&amp;l=ur1&amp;category=amazonsale&amp;banner=0YJD2D3K0ZTSRW1PTVR2&amp;f=ifr&amp;linkID=94f53c8af7c8de64f47e1b753dca7c7c&amp;t=○○○○○○website-22&amp;tracking_id=○○○○○○website-22" frameborder="0" marginwidth="0" scrolling="no"></iframe>
</div>

これによりAmazonアソシエイトバナーは、センター(中央)に表示されるようになりました。

Amazonアソシエイトバナーが正常に表示されない現象について

最後に

今回のAmazonアソシエイトバナーがサイドカラムで正常に表示されない症状は、検索してみても事例がほとんど見つからないので、多くの方は正常に表示されていると思われます。

と言う事で、一部の環境でこの様な症状となっていると思われますが、その環境を調べるのも面倒なので当面今回の対応で使い続けたいと思います。

コメント