久しぶりに自分のブログにAdsenseを入れたんですが、自身がChromeのAdblockを使ってることもあって有効化してるときと無効化してるときとでレイアウトが変わっちゃうんですよね。今回はそんなアドセンスのためのCSSをメモ代わりに書いておきます。

どうしてレイアウトが崩れるのか

Adblockのプラグインは、多分色んなロジックがあるんだと思いますけど、基本的にはコード内の「ad」という文字列を広告としてみなしているようですね。

その広告を表してると思われるコードをまるごと非表示にします。

つまり本来広告があるべき状態でサイトを作り上げていると、それ用のCSSなどが広告としてみなされずに表示され、変な空白だけぽっかりう空いてしまうという状態になるわけですね。空白のdivだけどmargin-bottomが30pxあるみたいなそんな感じ。

他のサイトはどうしてるの？

ちょっと気になったのでAdblockのOnとOffで他のサイトを見てみました。

かの有名なYahoo!さんは普通はこんな感じ。

AdblockをOFF（広告表示版）

いつも見てるやつですね。両方のサイドバーと真ん中のコンテンツの高さが同じなのがわかりますね。

AdblockをON（広告非表示版）

こちらが広告を非表示にしたパターン。おっと、右サイドバーが10pxくらい下がりましたね。ちょっとわかりにくいですが。

解決策について

基本的には下記の３パターンのどれかで対応してるケースが多いっぽいです。

その１：そのままにしとく

一つ目から解決する気ないじゃん、って話ですがちゃんと理由があります。

というのも、Adblockをユーザーが使っていないだろうジャンル（女性向けコンテンツ等、とか言うと怒られそうですねｗ）のサイトなどは特に気を使わなくてもそのままでいいんじゃないかなと思います。

IEハックならまだしも、少数派の為に余計なコードを書くのが必ずしも正しいってわけじゃないですからね。出来る限りミニマルに行きましょう。ミニマルに。うん、言いにくい。

その２：領域をCSSで確保する。

消された時の事を想定して、何があってもレイアウトが崩れないように予めその広告スペースに高さと横幅（height、width）、背景の塗りつぶしを設定しちゃう方法です。

下記の様なコードをCSSに書いておけばいいと思います。下記はアドセンスのレクタングル（大）の場合の大きさを例にしてますので適宜変更して下さい。

僕のブログでやるとこんな感じ。お手軽だし、絶対にレイアウトはそのままなので便利ですね。

その３：要素ごと広告と見なさせる

Adblockの性質を利用して「広告だからここは消してね～」って自分でコードを付け足す方法です。今このブログではこの方法を採用しています。

アドセンスから発行されるタグを下記のコードで囲ってあげるだけです。

ポイントはクラス名に「ad_」を付けることです。ちなみに「ad-」では非表示になりませんでした。理由はよくわかりませんが、「_（アンダーバー）」でクラス名を付けましょう。

後は、その要素のCSSにレイアウト用の下記の様なコードを書いてあげればOKです。

簡単ですね。以上です。