レスポンシブデザインでAmazonアソシエイトのリンクの下に大きな空白ができた時の対処法～WP覚書き～

スマホやタブレットの普及で、レスポンシブデザインを採用しているサイトも多いと思います。そのレスポンシブデザインのサイトに、Amazonアソシエイトのリンクを貼ると、タブレットサイズ以下にした際に、そのリンク（画像、テキストの両方）の下に大きな空白ができる現象が起きたので、その対処法の覚書きです。

インプレッションカウント用のimgタグが原因

色々調べた結果、原因は「Amazonの商品リンクに付随する、インプレッションカウント用の画像が、レスポンシブデザインの可変に反応して、巨大化してしまう」ことにあることが分かりました。

Amazonの商品リンクには、インプレッションカウント用のwidth: 1px; height: 1px; のimgタグが付随します。
一方、レスポンシブデザイン実装のために、CSSには「タブレットサイズ以下の時に、imgに対してwidth: 100%; height: auto;を指定する」記述がしてあります。これが悪さをしてインプレッションカウント用の画像をカラム幅一杯に広げてしまうんですね。（商品リンクコードのimgの部分にwidth: 1px; height: 1px; が記載されていますが、どうやらCSSが優先されるみたいです。）

そこで、CSSに、インプレッションカウント用の画像のみサイズを変えないように指定してあげることで、この現象を回避できました。

なお、この指定の仕方はCSS3での対応になるようで、CSS3非対応ブラウザでは無効になるそうです。（今回はレスポンシブデザインで起きた問題だったので、CSS3対応で問題なしですが。）
もし、CSS2対応が必要な場合は、下の記事を参考にしてみてください。

それにしても、１年前に設置したリンクにはimgタグが付随していなかったんだけどな…。最近、追加されたものでもなさそうだし…謎。

なお、Wordpressで子テーマを作って、CSSに追記してオーバーライドしたはずなのに変化が無い！という方は、こちらの記事も参考にしてみてください。（実は私はこのパターンでした…）

参考サイト：
「Amazonアソシエイト」のウィジェットを設置すると発生するバグの対策方法
フッター下に出来る変な隙間の原因とその対策方法
ページに勝手に挿入される”ad.yieldmanager.com”を削除する

Amazonのインプレッションカウント用画像について
インプレッションカウントはどのリンクタイプに対応していますか？
インプレッションレポート対応にリンクを更新するには

Tweet