このブログのフッタをデザインしているときに、なぜか最下部にスペースが入ってしまうという現象に悩まされていました。

詳しく調べてみると、どうやら「楽天モールウィジェット」が"img"要素をJSで挿入していることが分かりました。

<img src="http://ad.yieldmanager.com/pixel?adv=******&null&at=2" width="0" height="0" border="0">

上記の要素が</body>の直前に勝手に挿入されるのが原因のようです。

恐らく、この部分を根本的に削除するには「楽天モールウィジェット」を完全に削除する以外方法は無いと思われます。

なので今回は、CSSでこの要素を非表示にして対策することにしました。

CSSセレクタによる非表示化

上記のimg要素を消すには以下のようにします。

img[width="0"], img[height="0"]{display:none;}

上記のCSSコードを挿入してあげれば、対策できそうです。

このコードは、CSSレベル2で使用できる方法で、img属性のwidth(height)が0の場合に適応されます。

しかし、このコードだと他のimg要素に影響を及ぼす可能性があります。もしCSSレベル3が使用可能であれば、以下のコードが確実です。

img[src*="ad.yieldmanager.com"]{display:none;}

上記のコードは、img要素のsrc属性に"ad.yieldmanager.com"が含まれている場合に適応されます。

まだまだCSS3非対応のブラウザも多いので、実装する場合は、CSS2版の利用をお勧めします。

関連性がある記事

Disqusでコメント