Amazonアソシエイトのiframeのリンクを中央に配置する方法

Amazonアソシエイトで作成したアフィリエイトリンクはiframeなんですけど、普通に記事内に配置するとこんな感じで左に寄ってしまうんですよね。

iframeは通常左に寄ってしまう

技術的な説明をすると、iframeはinline frameの省略だけあって、inline要素だからです。せっかくの目立たせたい商品なので、中央に配置したいところです。

調べてみたところ、周りをdivタグで囲って、 text-align: center; を設定しようという解決策が多かったです。

確かにそれで中央にきますが、ただ中央寄せにしたいだけなのに、divタグ増やしたくないですよね。そんな方は以下のCSSをiframeに適用することで、中央寄せにすることができます。

CSSでiframeをblock要素にすれば中央に寄る

このCSSのクラスを、

Amazonアソシエイトで取得したiframeに下のように適用させましょう。

すると下のように見事に中央に揃います。

スポンサーリンク

公式iframeよりもカッテネがおすすめ

Amazon公式のiframeもいいですが、下のカッテネというブログパーツであれば、楽天などの他のショッピングサイトのリンクも貼れるので、報酬の取りこぼしが減ります。

次の記事で使い方を詳しく説明しています。

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよカエレバやヨメレバは、１商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。です...

参考

• iframeがalign=center で中央にきません。