Amazonアソシエイトのバナーを自動的にセンタリングする

　Amazonアソシエイトのバナーを貼り付けるときに、そのままだと左に寄っているのを自動的にセンタリングするCSSです。

アソシエイトのiframeを指定してセンタリング

　例えばAmazonプライムのバナーは、以下のようなiframeになっています。(一部IDっぽい情報をxxxxにしました)

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

このiframeをピンポイントで指定するために、次のようなCSSを使用します。

iframe[src^="https://rcm-fe.amazon-adsystem.com/"] {
  margin: auto;
  display: block;
}

src要素にamazonのURLをマッチさせて特定したiframeを、ブロック要素化してセンタリングします。

このCSSを入れておけば後は貼り付けるだけで自動的にセンタリングされるようになります。

センタリングを解除する場合

style属性で指定する

　CSSは直接書いた方が上書きされて有効になるので、styleで無効化します。

　iframeのstyle属性を「style="border:none; margin: 0;"」とします。

ブロック要素で囲う

　divタグの幅を指定してから左寄せすると、その中でのセンタリングになるので結果として中のiframeも左寄せされます。

　CSSは後に書かれたものが有効になるので、

iframe[src^="https://rcm-fe.amazon-adsystem.com/"] {
  margin: auto;
  display: block;
}
.iframe-margin-default iframe{
  margin: 0; /* センタリングを解除(デフォルトに戻す) */
}

とiframeの後ろに解除するクラスを定義しておいて、divに「<div class="inline-center">」とクラスを指定すると

センタリングが解除されます。

スポンサーリンク