コピペOK!　記事を選んで自動で広告を非表示に設定する方法　はてなブログで実施

2017年9月23日ブろぐ

初めてまして、ようこそお越しくださいました
簡単ではございますが、べぼろぐ筆者からのご挨拶、ご紹介となります

年齢：スレスレの30代　アラフォー
年収：500万にも届かない
結婚：国際結婚の既婚者子なし、不妊治療、TESAはせず諦めた
趣味趣向：旅行、料理、スコッチマン(ウイスキー)
ステータス：SFC、JGC、マリオットプラチナ、ヒルトンダイヤ
もはや定型文。面白みはありませんがお許しを

駄文乱文ではございますが、お越しくださった方に
何か役立つ情報や、気づきなどがあれば幸いでございます

ブログをやっている方の多くは広告を表示していると思います。

広告(特にGoogle Adsense…)を表示している場合

「この記事には広告を表示したくない」

「でも記事毎に手動で表示／非表示を設定するのは面倒…」

という悩みを持つ方は多いかと思います。

実際に私もそうだった為全く分からないながら調べました。。

簡単にできる方法を試したので、忘備録を兼ねて紹介します。

参考サイト

ページ内の最初の広告を特定

ページ内で最初の(HTML上一番上に記載される)広告を特定してください。

当ブログの場合は記事タイトルの下(下の赤枠部分)。

因みに、はてなブログの場合、この部分は以下で編集可能です。

「管理画面」→左サイドバー内の「デザイン」→左サイドバーの「カスタマイズ」(スパナのロゴ)→「記事」→「記事上」

2.Script編集

やることはコピペだけなので、初心者の方でも簡単に出来ると思います。

①編集前

②コメント行の移動(非表示対象全ての広告に実施)

③Script追加[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>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXXX”
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>
<!– 広告名 –>

④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=”広告非表示“; //広告を設置しないタグを指定
var pageTag=document.getElementById(“body”);
function adsFilter()
{
if(pageTag.getAttribute(“class”).indexOf(“category-“+noAdsTag)!=-1)
{
document.write(‘<!–‘);
}
}
adsFilter();
</script>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXXX”
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>
<!– 広告名 –>

⑤Script追加(③(④)以外全ての非表示対象広告に実施)

<script>adsFilter();</script>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXXX”
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!– 広告名 –>

今回はわかりやすいように、「広告非表示」というキーワードにしましたが、この部分はお好きな文字列でOKです。

はい、これで準備は完了です！

3.実際に記事を書いてみる

「広告非表示」(2.③④で別のキーワードを設定した方はその文字列の)カテゴリで記事を書いてみてください。

すると以下のように広告が非表示になっているはずです。

これで、今後は「広告非表示」というカテゴリをつけた記事のみ、広告が表示されなくなります。

仕組みは以下のようです。

カテゴリの文字列を抽出
指定したカテゴリ(今回の場合「広告非表示」)に一致するか判定
一致する場合のみ広告用のJavascriptを無効化

因みに、複数のキーワードは対応していないようです。

カテゴリ名として「広告非表示」が見えてしまうのがちょっとカッコ悪いので、今後複数のカテゴリ(「お酒」か「ヘルスケア」のカテゴリだったら非表示等)にも対応出来たらなぁと思います。

最後に、当然ながらカスタマイズは自己責任となりますので、編集前のバックアップ取得は勿論、ソースを流用する場合は内容や規約の確認を忘れずに(今回紹介したソースは現時点では流用して特に問題ないようです)。

わかりやすい解説をしてる方がたくさんおります。

私はうまくまとめられておりませんが、わからないながら試してみましたので何かあればコメントやメッセージでご連絡願います。

コメント一覧

まだ、コメントがありません

コピペOK!　記事を選んで自動で広告を非表示に設定する方法　はてなブログで実施