iOS 9にコンテンツブロックアプリが登場したことで、Webでの広告の扱いがややシビアになりつつあります。そこで、Adblock系アドオンを有効にしている場合に、コンテンツを非表示にするという手法をとるブログなんかもチラホラ見掛けるようになってきました。
この方法は、CSSを使えば案外簡単にできるので、試験的に導入してみるのもいいかもしれません。
当ブログではコンテンツは表示させたまま、一応案内らしきものをオーバーレイで表示させることにしました。まぁ、元々あんまりアクセスありませんし、広告収入も雀どころかアリの涙程度なので、今更アクセスが減ってもどーってことないやという感じなので気楽です。
これが本気で運営しているサイトだと、訪問者の利便性との兼ね合いから、導入するか否かの判断はかなり迷うところでしょう。
目次
参考サイトはこちら
広告ブロック対策の仕組みと導入方法
エディターに以下のコードを入力してadspace.css を作成。
#a-alert {
display: none;
}
adspace.cssをサーバーにアップロード。
ヘッダーに追記。
<link rel="stylesheet" href="URL/adspace.css" type="text/css" />
- Adblockが有効の場合：adspace.cssを読み込まないので、「id=“a-alert”」が表示され「class=“adspace”」が非表示になる。
- Adblockが無効の場合：adspace.cssを読み込むので、「id=“a-alert”」が非表示になり「class=“adspace”」が表示される。
WordPressの場合
このブログでは、Twenty Fifteenテンプレートを使用しています。
一例として、ヘッダーにCSSを読み込み、外観 > テーマの編集 から 単一記事の投稿 で <main id=”main” class=”site-main” role=”main”> の下にオーバーレイのタグを入力しました。
<div id="a-alert"> <p style="position:fixed; bottom:0px; left:0px; width:100%; height:200px; background-color:#951da0; text-align:center; opacity: 0.8; font-size:20pt; color:white; padding: 20px; margin-bottom: 0; z-index:1;">adblockが有効になっています。<br />設定より https://vivablog.net/ で無効にしてください。 </p> </div>
FC2 Blogの場合
ファイルアップロードからadspace.css をアップロードして、テンプレートのヘッダーで読み込み。オーバーレイのタグを適当な箇所に入力。
<div id="a-alert"> <p style="position:fixed; bottom:0px; left:0px; width:100%; height:200px; background-color:#951da0; text-align:center; opacity: 0.8; font-size:20pt; color:white; padding: 20px; margin-bottom: 0;">adblockが有効になっています。設定より https://vivablog.net/ で無効にしてください。 </p> </div>
Adblock有効時にコンテンツを表示させない場合は、テンプレートの個別記事の部分にある <%topentry_more> をclass=“adspace”で囲うと追記部分が非表示になって良い感じです。
<!--more--> <div class="adspace"> <%topentry_more> </div> <!--/more-->
ただし、この方法は「iOS 9」のコンテンツブロックアプリには使えません。（Adblockブラウザには使えますが）