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

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

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

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

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

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

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

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

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