続・目から鱗のアンチ広告ブロック

目から鱗のアンチ広告ブロックを書いてから2chの某スレ以外では何も反響無いなと思っていたらJavascriptを無効にしたら簡単に回避できるからやり直し(意訳)とのご意見をいただいた。
最近はJavascript無効にするといろいろ動かなくなるから無効にしないんじゃね？とも思うがスイッチ1つだもんねぇ。

そこで、凄く単純に考えてJavascriptを無効にしてたらコンテンツを表示しなくて有効だったら表示させることにする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
    #content {
        color: transparent;
        text-shadow: 0px 0px 20px #000;
        /* display: none; */
    }
    #content::selection{
        background-color: #0f0;
        text-shadow: 0px 0px 20px #000;
    }
</style>
</head>
<body>
<h1>タイトル</h1>
<div id="content">コンテンツ</div>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9999999999999999"
     data-ad-slot="9999999999"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script type="text/javascript">
<!--
  window.onload = function() {
    setTimeout(function() {
      var ad = document.querySelector("ins.adsbygoogle");
      var changes = document.getElementById("content");
      if (ad && ad.innerHTML.replace(/\s/g, "").length != 0) {
        //したいことを書く ここから
          //changes.style.display = "block";
          changes.style.textShadow = "initial";
          changes.style.color = "initial";
        //したいことを書く ここまで
      }
    }, 2000);
  };
// -->
</script>
</body>
</html>

前回の逆パターン。
初期表示はコンテンツの文字をボカす。(または非表示にする)
広告のスクリプトを読み込むことができたらコンテンツのテキストボカシを解除する。(または非表示から表示に変更)

ボカシはtext-shadowを使う手法だが、コンテンツ部分をマウスや[Ctrl]+[A]などで選択状態にされるとボカシが無くなるので選択状態にもtext-shadowを適用する。ただし、選択状態のselectionはインラインで記述できないのでHTMLヘッダ内で指定。(または外出しCSSファイルなど)
Javascriptでtext-shadowのスタイルを指定する場合はtextShadowなので注意。

もしくは前回同様display:none(非表示)、display:block(表示)でまるっと隠す・表示するなど。

サンプルを悪いインターネット アンチ広告ブロックに置いたので興味のある人は表示して広告ブロック機能をオン・オフしてみて。

ただし、この方法は初期状態がコンテンツ非表示なのでもしかしたら検索エンジンに嫌われることがあるかもしれない。
使用は十分に注意、そして自己責任で。

なお、やりすぎだと思うので「がとらぼ」では(今のところ)採用しない。

関連記事: