ウェブ広告退治 アドブロックできない要素を消す
アドブロック系の拡張機能を使っていても消せない広告が存在します。
よく考えるもんです、例えばこれ ↓
まとめサイトでよく見るこういうのですね。
（特定のサイトを揶揄する意図はないので、もろもろ隠してあります）
ページの両側に配置されていて、ちょうどスクロールする時に間違ってクリックしてしまう憎たらしい配置。
アドブロックの自動感知に引っかからない工夫がしてあるようで、消えないんですよね。
拡張機能によっては、手動でクリックした要素を消せるのですが、それすら対策済みでクリックが出来ないように工夫されている。
HTML&CSSで、余白なしの状態にしてあって、リンクがミチミチなわけ。クリックした瞬間に広告ページが開かれて、元ページでは広告は消えていない。
この広告を、コンソール画面からＨＴＭＬ操作して、アドブロックがクリックする隙間を作って、手動で消します。
※以下、かなり修正があります、記事の下に修正を書きます。
↓ まず、コンソール開いて、Elementタブを選んで、広告の要素を調べる
それらしい id が出ました。
そこからもう少し上に昇って、出来るだけ広告の大元の要素を調べます。
この辺かな？ ↓
コンソールタブに行って、要素を getElementById します
変数に入れなくてもいいんですけど、要素の特定がうまく行ってない時は、parentNodeやchildNodesを調べて行く必要がありますので楽が出来るように。
この要素の特定が一番重要な部分です。
で、要素に css を足します。padding をつけて余白を設定。
↓ 広告に余白が出来ました、緑の部分ですね。
↓ 要素に padding が設定されていることがわかります。
準備ＯＫ。
アドブロック機能を起動して広告にカーソルを当てると、余白があるおかげでクリック出来そうです。
はい、消えました。
以上です。
ちょっと面倒かも知れませんが、ご紹介。
広告を作る側、サイトを運営する側も色々工夫しているわけなので、このように広告を消すのが良いのかはユーザー次第です。
それに、こういうのいたちごっこですからね、また新しい仕組みが出てくるだけです。
ちなみに広告ブロック（html操作）で一番手を焼くのは．．．
iframe要素です。広告業界の皆さん、iframeで広告作らないでくださいね 苦笑
おしまい
※追記
要素の取得について
コンソール画面で要素をクリックしたあと、適当な要素までさかのぼるのは良いのですが、その後は右クリックして Copy の欄から Copy selector とするのがオススメです。
で、コンソールに
var x = document.querySelector('貼り付け');
などで要素の取得が出来ます、querySelector は神メソッドです。
あとは 要素.style.padding などで余白を設定する、このあたりは同じです。
