いろいろブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

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">」とクラスを指定すると

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

スポンサーリンク