web制作の隙間問題

ウェブ制作で気づいたこととかを殴り書き。中の人は、デザイン、コーディング、ちょっとプログラミング、企画・設計・運用・SEO屋さん。

【モバイルアンカー広告】上から降りてくる広告・ふわっと出現する広告だけをブロック【iOS】

まずはじめにインターネッツでコンテンツを作っておまんまを食べているという意味での同業のみなさまへ、誤解ないように申し上げます…

私は広告大好きだ!

テレビCMも雑誌の広告もインターネッツの広告もアドバルーンも劇団が舞台の前に入れるタイアップコントみたいなのも。。

ただし良い広告・良い場所・良いタイミングのものに限る。

空気読めない接客のような広告は嫌われます。
少なくとも私は嫌いです。というかたくさんの人が嫌っています。

f:id:bissybissy:20170815070601p:plain

超嫌われてますね〜 わかるわかる〜

死ね とか広告は生命体じゃないのに入力して検索しちゃうあたり本物の憎悪を感じます。

メディアとして嫌われることをやっていては先が見え云々(キリがないのでこの辺で

で、嫌われているアンカー広告って?

スクロールするとスマホの画面下についてくるアレです。

と言っても、下にべたっとくっついて、はっきり広告とわかり、高さをそんなに取らなければ良いと思うんですよ。

私が嫌いなアンカー広告は、スクロールするにつれて透明な状態からふわ〜っと出現するアレです。めっちゃスケスケの状態だと気づかずにクリックしてしまう。

まさにだまし討ちです。卑劣です。

ちなみにそのふわーっと出てくるだまし討ちアンカー広告、名前は知りません。ほんとすんません。

降りてくる広告・ふわっと出現する広告だけを非表示にしたい!

夏休みでいろんなブログやメディアを見る機会が増え、イライラが頂点に達したので(見るのをやめれば良いんだけどそれじゃ根本的な解決にならないし)、とうとうアドブロッカー(iOSのコンテンツブロッカーアプリ)を導入しました。。

で、コンテンツブロッカーアプリの使い方を紹介する記事はたくさんあるんですが、そこで紹介されているのは「広告を全消しする方法」がほとんど。または「アドネットワークのURLを指定する」など。これでは「ふわっと出現する広告」だけを狙い撃ちにできませんし、広告を全消しにすると良い広告まで消えてしまう。。

そこで思案した結果、割と簡単な方法で解決しそうだったので紹介しますー

コンテンツブロッカーを使って、アンカー広告をcssセレクタで指定して非表示に!

今回使ったコンテンツブロッカーアプリは1Blocker。有名なアプリです。

1Blocker

1Blocker

  • Salavat Khanov
  • 仕事効率化
  • 無料

1Blockerの導入については以下のサイトがわかりやすいのでご参考に。。 

無料で使えるコンテンツブロッカー『1Blocker』の使い方 | AppBank – iPhone, スマホのたのしみを見つけよう

結論から書きますね。。

アプリの Hide Page Elements から、cssセレクタを非表示にするルールを追加します。

追加するルールは以下の画像の通り。

f:id:bissybissy:20170815074030p:plain

① 名前をつけます。自分がわかればテキトーでいいです。

CSS SELECTOR のところに以下のセレクタを書きます。

[style*=opacity]

SAVEすれば完了です!

 

理屈としては難しいことはひとつもございません。

ふわっと出てくるってことは最初は透明なわけなんで、透明度を表すopacityという値をもつstyle属性を非表示にしちゃえば言い訳です。それが [style*=opacity] な訳ですね。

非表示(display:none)の方はコンテンツブロッカーアプリがやってくれます。

 

以下、 2ちゃんねるまとめのまとめ  さんから被験体になっていただいたみなさん(嫌いな広告を出しているみなさん)。他にも色々あると思いますが。。

これらのサイトでふわっと広告が狙い通りにブロックされているのを確認しました。もちろん通常の適切な広告は表示されてます。

何か気になった広告があったらちゃんとクリックするつもりですヽ(´ー`)ノ

とりあえずコンテンツブロッカーのおかげで心に平穏が訪れました。心置き無くスクロールできるってことがこんなに快適だったなんて!

コンテンツブロッカーありがたし。

 

※ なおこの記事で紹介した方法は、ふつーに半透過の広告じゃない要素が巻き添えを食らって見えなくなる可能性があります。が、その数よりもこの広告の方が出現頻度が高いと思うので紹介しましたー。設定する際はあらかじめご了承くださいませ。

 

ではね。