アフィリエイトリンクの1px Webビーコンを非表示にする

アフィリエイトバナーのリンクに 1px の画像がついてくることがあります。

ボクはブログのサイドバーに貼るときはたいてい300px×250pxを選びます。

テンプレートはたいていレスポンシブですからモバイル表示にすると 300px だと画面上でチョット中途半端な感じになります。なので画面幅いっぱいに表示できるようにします。

するともれなく 1px の Webビーコンも100%に拡大されるので意味不明な空白ができるわけです。

バナー画像の img を拡大を 100%に拡大

例えばエーハチのアフィリエイトバナーはこんな感じ。

<a href="https://px.a8.net/svt/ejp?a8mat=000000+000000+0K+000000" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://www20.a8.net/svt/bgt?
aid=070517113111&wid=002&eno=01&mid=s00000000002006264000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www16.a8.net/0.gif
?a8mat=15ZFCP+1U35P6+0K+11ALC1" alt="">

モバイルで 300px のバナーが表示されるとバナーの左右かに15～20pxの余白ができるので、img を拡大するようにスタイルを指定します。

仮にサイドバーは #side-wrapper とします。

  .#side-wrapper img: {width:100%}

これでサイドバーのバナー画像はモバイル画面いっぱいの 100% に表示されるようになって、バランスが良くなった気がします。

1px Webビーコンを非表示にする

このままだともれなく付いてきた 1px Web も 100% に拡大されっぱなしてアフィリエイトバナー画像の直下にポッカリと同じ大きさのスペースが空くのでこれをこれを非表示にします。

#side-wrapper img[width="1"]{display:none;}

これでアフィリエイトバナーはサイドバー 100% 幅で 1ox Webビーコンの空きスペースは消えます。

id属性全体に指定したほうがラク

アフィリエイトバナーはサイドバーだけじゃなくて記事中に貼ることもあるので、最初からブログやサイト全体に 1px画像を非表示にしておいたほうがラクです。

Chrome のデベロッパーツールや HTMLのソースを表示して、ブログやサイト全体の属性を確認します。

このテンプレートは #outer-wrapper なのでここ全体の 1px ビーコンを非表示にします。

#outer-wrapper img[width="1"]{display:none;}

これで 1px Webビーコン付きのアフィリエイトバナーをブログ、サイトのどこに貼り付けても、バナー広告は画面100%でかつ無駄な空スペースができなくなります。

カスタマイズは自己責任でお願いします。