AMP対応ページでAmazonアソシエイトのバナーの下に謎の空白・余白ができるとき

AMP対応のページにAmazonアソシエイトのバナーを貼ると、バナーの下に謎の空白というか余白が表示されるということがありました。

原因は layout="responsive"

AMP対応ページを出力する際、通常のHTMLのページ（非AMP）のソースをスクリプトでAMPページ用に<img><iframe>を<amp-img><amp-iframe>に置き換えています。このときに加えているlayout="responsive"が謎の空白・余白ができる原因でした。

画像やYou-Tubeの動画で使われている<iframe>を以下のように

とすることで画面幅100％に合わせて表示してくれるのでいいのですが、アマゾンのバナーソースの<iframe>にlayout="responsiveに使うと、ブラウザはアマゾンのバナーサイズであるwidth="120" height="240"が画面幅100％になるようにフレームを拡大して広い表示スペースを取ります。

しかし、レスポンシブで拡大された広いフレームの中に表示されるのは拡大されていない120×240のバナーなので、空白というか余白ができてしまいます。

アマゾンの場合はlayout="responsive"を付けない

ということで、Amazonアソシエイトバナーの場合は<amp-iframe>タグ内でlayout="responsive"を使わないようにしましょう。

アマゾンに限らずiTunesのバナーなど、URL内にw=300&h=250やwidth=120&height=240といったパラメーターでサイズを指定して画像を呼び出しているものは同じようにlayout="responsive"を削除しておかないと余白や空白ができてしまいますので同じ対応が必要です。

バナーが表示されないとき

もし、<amp-iframe src=～>でバナーが表示されないときは以下のようにsandbox="allow-scripts allow-same-origin allow-popups"を加えてみると表示されると思います。