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

INDEX

WordPressテーマ THE THOR

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

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

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

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

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

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

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

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

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

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

今回の修正箇所は、

disply: block;
margin: 0 atuo;

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

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

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

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