Amazonアフィリエイトのiframeが使われた商品リンクを中央に表示する方法

Amazonアフィリエイトのiframeが使われた商品リンクをHTMLで貼り付けた時に表示が右端によってしまいます。これを中央に表示する方法を紹介します。

iframeが使われた商品リンクはなぜ左寄せになるのか。

実際に商品リンクを表示すると左寄せの表示になります。


iframeは、HTML要素の中ではインライン要素のためです。HTML要素は2つに分類されます。一つはブロック要素、もう一つはインライン要素になります。


ブロック要素

  • 要素の前後に改行が入る
  • 要素の縦に並ぶ
  • 横縦の幅を指定でいる
  • 余白が設定できる

タグの例

<address>,<blockquoto>,<div>,<dl>,<fieldset><h1>~<h6>,<ol>,<p><table>,<ul>,etc.

インライン要素

  • 要素の前後に改行が入らない
  • 要素が横に並ぶ
  • 横縦の幅が指定できない
  • 余白が指定できない

タグの例

<iframe>,<a>,<b>,<br>,<em>,<span>,<img>,<code>,<select>,<input>,etc.


iframeが使われた商品リンクを中央寄せにする方法は2通りある。

下記の2通りになります。

  • <div>で囲ってtext-align:centerを適用する。
  • CSSでclassを作成し、<iframe>をブロック要素にする。

実際にそれではやってみましょう。

divタグでiframeを囲ってtext-align;centerを適用する。

まず、CSSでclassのamz_centerクラスを作成します。

.amz_center{
  text-align;center:
}

次に商品リンクにのiframeタグをdivタグで囲って先程作ったclassをdivに適用します。

<div class="amz_center">
 <iframe>/* 省略 */</iframe>
</div>

適用すると下記のように、中央寄せになってます。

CSSでclassを作成し、iframeをブロック要素にする。

実際にやってみましょう。

まず、CSSでclassを作成します。displayプロパティを使ってブロック要素に変更。marginプロパティで中央寄せに設定しています。

.amz_center_iframe{
  display:block;
  margin:auto; 
}

次に、商品リンクの<iframe>にclassを適用することでインライン要素からブロック要素に変更できます。

<iframe class="amz_center_iframe"> 
/* 省略 */
</iframe>

適用すると下記のように中央寄せになってます。

まとめ

Amazonの商品リンクで最初に悩むこの中央寄せ問題。解決方法を二通り紹介しました。よかったら試してみてください。

とりあえずやってみよう!