【THE THOR】Amazonアソシエイトバナーを中央表示させる設定

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

今回、WordPressテーマ THE THOR(ザ・トール)で、Amazonアソシエイトバナーを中央表示にする設定についてまとめてみました。

WordPressテーマ THE THORでのAmazonアソシエイトバナー表示

WordPressテーマ THE THOR(ザ・トール)では、これまでWordPressテーマ SimplicityやCocoonで使った方法では、Amazonアソシエイトバナーを中央表示にすることができません。

Amazonアソシエイトバナーが正常に表示されない現象について
当方のブログにはAmazonアソシエイトバナーを利用しているのですが、そのAmazonアソシエイトバナーをブログのサイドカラムに設定しようとすると、2/3しか表示されません。そこでAmazonアソシエイトバナーを正常に表示させてみました。

Amazon.co.jpから提供されるAmazonアソシエイトバナーのコードをそのまま貼り付けただけでは、このように左端に固定表示してしまいます。

【THE THOR】Amazonアソシエイトバナーを中央表示させる設定

中央表示させるためにAmazonアソシエイトバナーのコードを修正する

Amazonアソシエイトバナーを中央に表示するために、Amazon.co.jpから提供されるAmazonアソシエイトバナーのコードを修正します。

Amazonアソシエイトバナーのコードを埋め込むウィジェットは、必ず「カスタムHTML」を使うことが条件です。

「テキスト」のウィジェットを使うと中央表示どころか、正常にAmazonアソシエイトバナーが表示されないので注意が必要です。

120x600サイズのAmazonアソシエイトバナーの提供されるソースは下記の様になっています。

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

そのソースを下記の様に修正します。

<iframe style="height: 600px; width: 120px; display: block; margin: 0 auto; border: none;" src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=11&l=ur1&category=amazonsale&banner=012345678901234567890123&f=ifr&linkID=0123456789012345678901234567890&t=○○○○○○website-22&tracking_id=○○○○○○website-22" frameborder="0" marginwidth="0" scrolling="no"></iframe>

具体的には、Amazonアソシエイトバナーの提供されるソースのsrc部分"https:// ~ website-22"をコピーして、今回修正したソースのsrc部分"https:// ~ website-22"に貼り付ければOKです。

今回の修正箇所は、

disply: block;
margin: 0 atuo;

をAmazonアソシエイトバナーの提供されるソース内に追加しました。

Amazonアソシエイトバナーのソース修正後

これによりAmazonアソシエイトバナーが、下記の様に中央表示されるようになりました。

【THE THOR】Amazonアソシエイトバナーを中央表示させる設定

他のサイズのAmazonアソシエイトバナーも同様に修正すればOKです。

但し、Amazonアソシエイトバナーのサイズにあわせて「height: 600px; width: 120px;」の部分を修正する必要があります。

コメント