『あー！この広告ほんっとうざい！』

僕はブログに広告を貼っている立場ですが、いくつかのWEBサイトをまわっていると「うざい」と感じることが多々あります。

広告自体を否定する気はありませんが、バナーをクリックさせよう、買わせようというのが前面に押し出されているブログは読む気をなくします。それがどんなに素晴らしい役立つコンテンツでも。

そんな時重宝するのが、ブラウザの拡張機能「AdBlock Plus」です。広告を消してスッキリ表示してくれるのですが、実はこのアドオンを導入しているのにはもう一つ理由があります。

アフィリエイトサイトは嫌われる？

インターネットが普及しだした頃は企業から直接『広告貼ってくれませんか？』という依頼がありましたが、現在はASP（Affiliate Service Provider）を経由して提携することがほとんど。

アフィリエイトというものが認知されるようになってから、一部のサイト運営者はあの手この手で広告を踏ませよう、買わせようとあらゆる手段を使うようになりました。

ポップアップウィンドウやホバーウィンドウに加え、アフィリエイトURLではないと誤認させたり、大量の迷惑メールを送りつけたり。

やがて検索サイトからの流入増を狙って、ゴミサイト量産による被リンク構築や日本語ドメイン悪用などを行う業者も出てきました。

欲しい情報を探しているユーザーにとっては、何の価値もないサイトを幾度となく見せられることになります。

広告収益を目的としない（またはブラックな手法を好まない）サイト運営者にとっては、価値あるコンテンツを提供しているのに、アフィリエイトサイトに検索上位を奪われて面白くありません。

こうして、アフィリエイトサイトは検索サイトからも一般ユーザーからも嫌われることになります。単に広告が嫌い、という方もごく一部いますけどね。

ほとんどの広告を消してくれるAdBlock Plus

ポップアップウィンドウをブロックする機能はブラウザに標準装備されるようになりました。

JavaScriptを切ってしまえばアドセンスなどは表示されなくなりますが、その他の要素も読み込まなくなるのでたまに不具合が生じてしまいます。

そこでブラウザ拡張機能「AdBlock Plus」の登場です。

AdBlock Plusのインストールと設定

各ブラウザ用アドオンは下記からダウンロードできます。

» AdBlock Plus（Firefox）
» AdBlock Plus（Chrome）
» AdBlock Plus（Internet Explorer）
» AdBlock Plus（Opera）
» AdBlock Plus（Android）

基本的にインストールするだけでOKですが、「フィルタ」を使用することで柔軟な設定が可能になっています。

インストール後の表示サンプル

では、広告を消すとどうなるかサンプルをご覧ください。フィルタは「Easy List」のみ適用しています。

まず、このブログ。

サイドバー上の広告が綺麗に消えていますね。

つづいていつもお世話になりっぱなしの「ラジオねこきっく」さん。

こちらもサイドバー上の広告が消えています。　あれ？よく見るとなんか変な余白ができています。どうしてでしょう。

理由を考える前にもうひとつサンプルをご覧ください。

有名ブログ「NUMBER333」さん。

こちらは広告はブロックされたものの、背景が塗りつぶされています。

なぜブログによって表示が変わるのでしょうか。

僕がABPを使っている理由

「変な空白ができる」「背景色のみ表示される」というのは、AdBlock Plusを利用することによるレイアウト崩れです。

もともとあるべきものを消してるので、なんらかの不具合が起きるのはしようがありません。広告を遮断するという目的は果たしているので、気にならない方はこれで良いでしょう。

でも僕は気になってしまったので、AdBlockを導入して自分のブログがどう見えるか調べてみました。あちこちのサイトを見てまわって、どのような現象が起きるかもチェックしています。

これがABPを利用している本当の理由です。

ABPでレイアウトが崩れる原因

空白ができてしまう理由

変な空白ができてしまう原因は、余白設定にあります。

ラジオねこきっくさんの構造をChromeのデベロッパーツールで調べてみると、このように余白設定されていることがわかります。

広告領域のDIV要素ごと排除され、検索バーを囲んでいる要素に設定されている余白が上部に空白を生んでいるということですね。

背景が塗りつぶされる理由

一方のNUMBER333さんでは、広告領域のDIV要素は排除されていません。中身だけ消えているのがデベロッパーツールで確認できます。

DIV要素にあてられているクラス名がフィルタにひっかからず、なおかつwidthとheightが指定されているのでこのような現象になります。

濃いグレーで塗りつぶされているのは、もともとそこのDIV要素に指定されている背景色が表示されているからです。

ほかにもあるレイアウト崩れと不具合

このほかにも、「スポンサードリンク」や「PR」というテキストだけが残ってしまったり、サイト自体が閲覧不能という不具合が起きることもあります。

広告ブロックによる崩れを防ぐサイトデザインという記事で詳しく解説されているので、ぜひご覧ください。

ユーザーがAdBlock Plusを利用する前提でデザインする、ということまでしなくて良いと思いますが、この記事を読んで気になってしまったら一度チェックしておきましょう。

まとめ

僕は普段Firefoxを使用していて、気になる広告や商品があったらアフィリエイトURLでもかまわずクリックしています。それが有益な情報を教えてくれた運営者への感謝の印かなと。

いや、本当は検索し直すのが面倒だったり、わざわざ自己アフィリエイトのためにリンク発行するのが億劫だからなんですけどね。建前は、情けは人のためならず、です。

「広告を貼っているけど別に気にならないし、更新されるたびに読んでます！」と言ってくれるファンがついてくれるのが運営者にとって一番ありがたいことなので、そうなるよう日々精進していきます！

それでは、また。