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

Sun, 23 Jul 2017 15:53:12 +0900

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>

twitter（ツイッター）のロゴバナーやアイコン

Fri, 04 Sep 2009 16:07:56 +0900

twitterをはじめたので、バナーやアイコンを探して見つけたサイト。

twignature (beta2) – トゥイグネチャー（ベータ2版） http://labs.creazy.net/twignature/

Twitter, Twitter Icon, Twitter Icons, Twitter Button, Twitter Buttons, Twitter Graphic & More! http://twittericon.com/

By TwitterIcon.com

というか、上記を含めてバナーを提供するサイトをまとめたページがあった！

たくさんありすぎてどれにしようか迷う…。

2010/11/30追記

公式バナーやツールなどはこちら↓

バナー on qwerty.work

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

原因は layout=“responsive”

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

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

twitter（ツイッター）のロゴバナーやアイコン