【はてなブログ】特定の記事でアドセンスを非表示にする！カテゴリーから設定できて便利すぎた

f:id:clrmemory:20171122154810p:plain

こんにちはクリアメモリです！

はてなブログで記事を書いていて、特定の記事だけアドセンスなどの広告を非表示にしたいと思ったことはありませんか。そのような場合は、カテゴリーを設定するだけで表示非表示を切り替えられるので試してみてください。

はじめに

以下の記事で紹介したような、アドセンスなどの広告を全記事に自動で表示させるコードを使っていたとしましょう。

www.clrmemory.com

そのような時に、コンテンツが少ない記事や提供レビュー系の記事などでは、アドセンス広告を非表示にした方が良い場合もありますよね。

今回紹介する方法を使えば、記事に「noads」というカテゴリーを設定するだけで、自動で設置したアドセンスやASPなどの広告を非表示にすることができます。

記事にカテゴリーを設定

まずは、アドセンスを非表示にしたい記事に「noads」カテゴリーを設定していきます。

記事の編集画面を表示させたら、右側の「カテゴリー」から「新しいカテゴリー」を選択しましょう。

f:id:clrmemory:20170807164203p:plain

ここに「noads」という項目を追加してください。

f:id:clrmemory:20170807164225p:plain

こんな感じになって入ればOKです。記事を保存（更新）しましょう。

javascriptを記述する

今回の方法は、すでに設置されているアドセンスなどのコードを多少書き換えることで、非表示にする記事を判断させます。

例えば、最初の見出し前に広告を表示させた場合は、以下のようなコードを書くことになるかと思います。

<div class="insentense-adsense"></div>
<script>
var adsenseCode = (function () {/*
  アドセンスのコード
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

$(window).ready(function(){
  var $target = $('.entry-content h2');

  if($target.length >= 1){
    $target.eq(0).before($('.insentense-adsense'));
    $('.insentense-adsense').html(adsenseCode);
  }
});
</script>

www.clrmemory.com

この記事でも使ったコードですね。

こんな感じの書き方をしている人が多いのではないでしょうか。

ちなみにこちらのコードは、記事の最初の見出し前にアドセンスを表示させるためのコードです。

f:id:clrmemory:20170807174015p:plain

実際に広告を非表示にする場合は、このコードと違う書き方をしていても問題ないので安心してください。

アドセンスを非表示にする

では実際に設置されているアドセンス広告を、noadsカテゴリーを持った記事でだけ非表示にしていきましょう。

先ほどのコードを以下のように編集します。

<div class="insentense-adsense"></div>
<script>
var adsenseCode = (function () {/*
  アドセンスのコード
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

$(window).ready(function(){
  if($('body').hasClass('category-noads') === false){
    var $target = $('.entry-content h2');

    if($target.length >= 1){ 
     $target.eq(0).before($('.insentense-adsense'));
     $('.insentense-adsense').html(adsenseCode);
    }
  }
});
</script>

コードの中に「if($('body') ~~ false){」と書かれた部分を追加しました。

このコードでは「body」という要素が「category-noads」というクラスを持っているかを判定しています。「noads」というのは先ほど設定したカテゴリー名ですね。

これを判定することで、

noadsカテゴリーを持つ記事だったらアドセンスを非表示

というような処理が実装できます。

f:id:clrmemory:20170807174134p:plain

noadsカテゴリーを持っていなかったら、「if( XXXXX ) { 」から「 } 」までの範囲を実行することになるので、アドセンスに関する部分がこの中に入るようにします。

ですので、アドセンス広告以外に、ASPなどを自動表示させているコードで使うことができるかと思います。色々試してみてください。

コードの最後らへんに、閉じタグ「 } 」が追加されている点に注意してくださいね。

noadsカテゴリーを非表示

さて、ここまででアドセンスの非表示は実装できたのですが、実際に記事をチェックしてみると、タイトルの下に「noads」というカテゴリーボックスが表示されているのが気になりますよね。

f:id:clrmemory:20170807181428p:plain

これをcssで非表示にしちゃいましょう。

デザインCSSに以下のような記述を追加してください。

.categories a.category-noads {
    display: none;
}

このようにすれば、noadsのカテゴリーボックスを非表示にできます。

カテゴリーボックスを非表示にしても、アドセンスを非表示にする機能は失われないので大丈夫です。

f:id:clrmemory:20170807181341p:plain

まとめ

今回紹介した方法を使えば、はてなブログで設置した記事内のアドセンス広告を、カテゴリーに合わせて非表示にすることができました。

過去に作成したコンテンツや、提供レビュー系の記事などを見直して、アドセンスを非表示にした方が良い記事はないか探してみるのも良いかもしれませんね。

ぜひ参考にしてみてください。

www.clrmemory.com

ではまた。