レスポンシブデザインでアマゾン等のアフィリエイト画像下に空白が出来るときの対応


この記事は2020年12月に掲載されたものです。
状況が変わったり、リンク先が変わっている可能性があります。

今春より、アマゾンのアフィリエイト用リンク作成ツールに「カエレバ風」を使わせていただいているが、WordPressの一部テーマで、スマートフォンで表示したときだけ画像の下におかしな空白が出来ているのに気づいた。赤枠の部分である。

アフィリエイトの空白

PCで表示したときは問題ないので、インプレッションカウント用の1×1pxの画像が、スマートフォン用のレスポンシブデザインで巨大化しているのだろう。アマゾンだけでなく、1×1pxの画像が使われている他のアフィリエイトでも同様の現象が起きている。気持ちが悪いので消したいと思っていたら、先達サイト「サルワカ」が答えてくれていた。

サルワカ「A8.netなどの広告リンクの計測用のimgタグにより不自然な余白ができてしまう」

まさにこれ。スタイルシートに下記を追加すれば一発で直った。imgと[のあいだにスペースを入れると無効になるので注意すること。

img[width="1"] {
	display:none;
}

ありがとうございます。