WordPressTHE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。
スポンサーリンク

WordPressテーマ THE THOR

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

今回、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;」の部分を修正する必要があります。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ナナリズムダッシュ
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント