PARABELL LIFE

描いた「理想の暮らし」は、自分の力で組み立てる ―― そんなフリーランス・ライフ・ログ。

はてなブログでAdSenseの非表示カテゴリーを柔軟に設定できるカスタマイズ

アドセンスを隠したい?

はてなブログでGoogle AdSense(以下、アドセンス)を導入しているブログの多くは、全記事に自動で表示される設定にしていますよね。

仮に俺が導入するとしても、もちろんそうするはずです。楽だし。

ただし、

  • アドセンスの規約で禁止事項に該当する記事
  • 広告主がいるPR記事で別の広告が表示されると困る
  • 心情的に広告が表示されると嫌な記事

こういう場合は該当する記事のアドセンスを非表示にする必要があるので、追加でカスタマイズをすることになります。

ただ、その方法も先人が公開してくれています。至れり尽くせりでありがたい限り。

と、思いきや!

俺は知人の依頼でこの類のカスタマイズをすることがありますが、公開されている既存のカスタマイズで要件を満たしているものを見つけられませんでした。

そこで、

  • 非表示にするカテゴリーをいくつでも増やせる
  • 非表示にするためだけのカテゴリーを作る必要がない

この要件を満たせるように手を加えたので、もしピンときたら使ってみてください。

パラベル

これはわりと便利なはず!

このカスタマイズの特徴とメリット

導入するべきか判断がつかない人向けに、先に既存のものと比較したメリットを説明しておきます。

まず、既に出回っているカスタマイズでもアドセンスを非表示にできますが、

アドセンスを非表示にできるカテゴリーが1つだけ

という制限があります。

加えて「非表示にするためだけのカテゴリー」を用意して設定する必要があります。

例えば、

  • 広告不要
  • 広告非表示
  • no-ads

などの切り分け用のカテゴリーですね。

アドセンスは非表示にできたとしても、そのために余計なカテゴリーが表示されてしまうのは避けたいところです。

そういうわけで、このカスタマイズを導入して得られるメリットは次のとおりです。

このカスタマイズのメリット
  1. 複数のカテゴリーでアドセンスを非表示にできる
  2. 読者目線では必要のないカテゴリーを表示しなくていい
  3. ブログに余計なカテゴリーを追加しなくてもいい
  4. 競合ブロガーにアドセンス非表示記事を探られずに済む
  5. 従来の「非表示にするためだけのカテゴリー」方式も併用可能

これらにメリットを感じる人なら、このカスタマイズを導入すれば少しだけ理想のブログに近づけます。

ちなみに、5番目のメリットについて補足しておくと、

  • カテゴリー「記事広告」は問答無用で全記事アドセンスを非表示
  • カテゴリー「おすすめの日本酒」も問答無用で全記事アドセンスを非表示

としながら、

カテゴリー「インターネット」の特定記事だけはアドセンスを非表示

ができるようになるので、かなり柔軟に対応できます。

カテゴリー中の一部の記事だけを非表示にしたい場合は、従来のように「広告不要」などのカテゴリーを設定すれば対応できます。やや本末転倒になってしまう気はしますが。

先にやっておく作業と元ネタの記事を紹介

この記事のカスタマイズは、『ゆとりずむ』さんで紹介されているカスタマイズが動くようになっているのが前提です。

リンク先を参考に、まずはこちらを動作させるところまで進めてください。

元ネタの元ネタ、『はぴらき合理化幻想』さんの記事も紹介します。

今回のカスタマイズは、上記の記事による情報公開があってこそ成り立っています。

パラベル

ありがとうございます!

複数カテゴリーに対応させるためのカスタマイズ

先ほど紹介した記事での作業が完了し、正常に反映されている(Google AdSenseが非表示になっている)ことを確認してください。

正常に反映されているなら、そのコードを書き換えていきます。

PC用の設定

まずはPC用の設定から実装していきます。

変更前のPC用コード

比較用として、こちらが変更前のPC用コードです。

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //アドセンスを非表示にするカテゴリー名
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
    if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
        document.write('<!--');
    break;
    }
}
}
adsFilter();
</script>
変更後のPC用コード

そして変更後のPC用コードがこちら。

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //アドセンスを非表示にするカテゴリー名
noAdsTag2="広告非表示"; //アドセンスを非表示にするカテゴリー名
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
    if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
        document.write('<!--');
    break;
    }
    else if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag2 == pageTags[i].getAttribute("content") ) ){
        document.write('<!--');
    break;
    }
}
}
adsFilter();
</script>

元のコードに対して、

noAdsTag2="広告非表示"; //アドセンスを非表示にするカテゴリー名

と、

else if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag2 == pageTags[i].getAttribute("content") ) ){
    document.write('<!--');
break;
}

を足して、アドセンスを非表示にする対象カテゴリー名を増やしています。

同じように次々と足していけば、いくらでも対象を増やせます。

注意事項

増やす場合、変数名「noAdsTag」の後ろに付いている数字も忘れずにカウントアップしてください。例えば3つめを足す場合は「noAdsTags3」、4つめなら「noAdsTags4」という具合に、数字も一緒に増やしてください。これを忘れると動作しなくなります。

スマートフォン用の設定

レスポンシブデザインモードを有効にしていない場合は、こちらも変更が必要です。

もしレスポンシブモードを有効にしているなら、PC用の設定だけで大丈夫です(この項目は無視してください)。

変更前のスマートフォン用コード

比較用として、こちらが変更前のスマートフォンコードです。

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //アドセンスを非表示にするカテゴリー名
var pageTag=document.getElementById("body");
function adsFilter(){
    if(pageTag.getAttribute("class").indexOf("category-"+noAdsTag)!=-1){
        document.write('<!--');
    }
}
adsFilter();
</script>
変更後のスマートフォン用コード

そして変更後のスマートフォン用コードがこちら。

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //アドセンスを非表示にするカテゴリー名1
noAdsTag2="広告非表示"; //アドセンスを非表示にするカテゴリー名2
var pageTag=document.getElementById("body");
function adsFilter(){
    if(pageTag.getAttribute("class").indexOf("category-"+noAdsTag)!=-1){
        document.write('<!--');
    }
    else if(pageTag.getAttribute("class").indexOf("category-"+noAdsTag2)!=-1){
        document.write('<!--');
    }
}
adsFilter();
</script>

元のコードに対して、

noAdsTag2="広告非表示"; //アドセンスを非表示にするカテゴリー名2

と、

else if(pageTag.getAttribute("class").indexOf("category-"+noAdsTag2)!=-1){
    document.write('<!--');
}

を足して、アドセンスを非表示にする対象カテゴリー名を増やしています。

同じように次々と足していけば、いくらでも対象を増やせます。

注意事項

増やす場合、変数名「noAdsTag」の後ろに付いている数字も忘れずにカウントアップしてください。例えば3つめを足す場合は「noAdsTags3」、4つめなら「noAdsTags4」という具合に、数字も一緒に増やしてください。これを忘れると動作しなくなります。

詳しい人ならもう少しスマートな実装ができそう

というわけで、アドセンスを非表示にするカスタマイズの改造版をお届けしました。

ちなみに俺自身はJavaScriptに詳しくないので、「とりあえず動けばいいよね!」程度の中身になっているはず。

パラベル

JavaScript? 全然わからない。俺は雰囲気でスクリプトを改造している。

コードにスマートさはないと思うので、デキる人から見れば突っ込みどころがあるかもしれませんが、その場合はこっそり教えてください。何食わぬ顔で修正します。

もしくは、

勝手に改造して配布してくれ!

完全に蛇足ですが、ブログのカスタマイズ記事って書くの大変ですね。特にコードを載せるところで詰まって、途中でやめようか真剣に考えました。うーん、先人はすごいな!