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

原因は layout=“responsive”

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

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

<amp-iframe layout="responsive" src="http://exampl.com～" width=300 height=300></amp-iframe>

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

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

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

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

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

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

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

<amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" src="http://exampl.com～" width=300 height=300></amp-iframe>