Adblockとは、ブラウザの拡張機能で、Webサイトに表示される広告を自動で非表示にしてくれるというものです。
※ この記事では、「Adblockは悪か」、といった話題には触れず、以下の前提で進めます。
- 世の中にはAdblockを導入しているユーザーが居る
- そういったユーザーでもサイトを利用できる状態にしたい
- ＝ 広告以外の要素が意図せず非表示になるのを防ぎたい
この拡張機能が有効なユーザーがサイトを表示した際、広告ではない要素まで消えてしまうという事象が起きることがあります。
例えば今だと、某有名レシピサイトさんの右カラムが丸ごと消失してしまうようです。
治ったようです。
関係ない要素が消える理由
Adblockには、いくつかの仕組みで広告を検知しているようですが、そのうちの一つが、id名による検知です。
要素のid名に#ad_*のようなものが設定されていると、広告と認識され、非表示にされます。
実際にAdblock導入すると、以下のようなシンプルなCSSが追加されます。
#ad_mobile, #ad_module, #ad_wrapper, ..略.. {
display: none !important;
}
経験上、Webサイトを作っていて意図せず要素が消失してしまう場合、多くの場合これによるものだと思います。
「ブラウザのシークレットウィンドウだと表示されるけど、通常のウィンドウだと表示されなくなる要素がある」
的な事象のときは、Adblockを疑ってみてください。
対策
対策は、広告じゃない要素にad_*といった命名をしないことです。
特に、メインページ上部に置くスライダーや、サイト内の別コンテンツを紹介するバナーなどに、adと命名してしまうようです。