この記事では、はてなブログで記事中にGoogle Adsense（アドセンス）を自動挿入しつつ、ポイントサイト記事など特定カテゴリ/特定記事では広告を非表示にするという、マイラーにとっては必須ともいえる仕組みを簡単に実現する方法を紹介します。
目的の機能
本記事が目指すのは次の2つの機能です。
- Google Adsense 広告を記事中に自動挿入する
- 特定の記事ではGoogle Adsense 広告を非表示にする
この2つを同時に実現するのがいかに大変かを既にご存知のブロガーさんも多いかと思います。なぜなら、1と2はそれぞれ別の人たちが作ってくださったスクリプト（JavaScript）のため、同時に利用することを前提として作られていないからです。
そのため、ただ2つを組み合わせれば両方の機能を実現できるわけではありません。工夫を凝らして実現するか、別の方法を模索することになります。
「スクリプトってなんぞ？」「コピペだけしたい」という方は、以下すっ飛ばして自分のブログで活用してみようから読み進めていただいてもOKです。
目的の達成方法
今回は１と２のスクリプトを融合させるのではなく、１のスクリプトを利用しつつ２を別の方法で実現します。これにより１と２のスクリプトが競合することはありません。
このセクションでは、どういう仕組みで実現するのか？を説明していきます。
興味のない方、よくわかないという方は読み飛ばしていただいても結構です。
１．Google Adsense 広告を記事中に自動挿入する
１の目的を実現するスクリプトとして、下記記事をお書きになられたU太郎 (id:uxlayman)様のスクリプトを利用させていただきます。 この場を借りて、スクリプトの開発に感謝いたします。
このスクリプトは、例えば「記事中にある2つ目の大見出しの直後に広告をいれる」という指示をあらかじめはてなブログに設定しておき、記事を書くたびにGoogle Adsenseの広告コードを埋め込むことなく、自動的に広告を挿入できる優れものです。
一度設定してしまえば、あとは記事を書くだけなので楽ちんですね。
２．特定の記事ではGoogle Adsense 広告を非表示にする
続いて２の目的を実現するために、スクリプトではなくHTMLとCSSの基本的な仕組みを利用します。これは１のようにコードを貼り付けるだけでは実現できず、最初の仕込み（１度だけ）と広告非表示にする記事を書く時（毎回）の２つに作業工程が必要になります。詳しくは後半で紹介しますので、ここでは仕組みをご説明します。
２−１．広告コードに仕込みをする
まずはGoogle Adsenseの広告コードを
<div class="adsense-code">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- はてなブログ 記事中１ -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-****************"
data-ad-slot="**********"
data-ad-format="****"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
のように<div class="名前"> </div>で囲み、ブロック要素として取り扱い名前をつけていきます。
名前とはここでいう adsense-code の部分です。
これにより、この広告コードを adsense-code という名前で特定することができます。
２−２．広告を非表示にしたい記事ですること
広告コードへの仕込みが終わったら、あとは広告を非表示にしたい記事を投稿する前に「HTML編集」をクリックして先頭に１つの文字列を挿入するだけです。
<style type="text/css"><!--
.adsense-code { display:none; }
--></style>
これにより「 adsense-code という名前のブロックを非表示にする」という指示を記事に書き込むことができます。
これだけで adsense-code という名前がついている仕込み済みの記事中広告を一気に非表示にすることができます。
これは特にスクリプトを動かさないので、読者の方にとってはページ読み込み時間の短縮につながり、ブロガーの方にとってはロード中の離脱による機会損失を防ぐことができます。
自分のブログで活用してみよう
それでは実際にみなさんのブログに何をすればいいか、簡単にまとめました。
１．はてなブログに設定する（初回のみ）
注意事項
これからご説明する操作は、はてなブログの設定を変更するものです。思わぬ操作ミス、エラー等により現在の設定情報を喪失する可能性もあります。
カスタマイズを実施する前にはメモ帳でも構いません、ご自身で必ずバックアップをお取りください。
この記事では皆さんに簡単に設定をしてもらうため、Google Adsenseの広告コードさえコピーできれば、後はワンクリックであなた専用のコードを自動的に作ってくれる仕組みを用意しました。
Google Adsense Maker for はてなブログ
動作対象ブラウザ: Chrome
１ー１．Google Adsenseからコードを取得する
まず初めにGoogle Adsenseから、記事中に挿入したい広告ユニットのコードを取得します。このとき、既にヘッダーやフッターに利用している広告を使いまわさないように気をつけてください。広告種別やサイズに制限は特にありません。
広告ユニット一覧画面に表示される「コード取得」のボタンをクリックすると、
コードが表示されるので、すべて選択してコピーします。
１−２．Google Adsense Maker に貼り付ける
Google Adsense Maker for はてなブログ にアクセスして、さきほどコピーしたコードを上の枠に貼り付けます。
１−３．自分のブログ向けにカスタマイズする
コードを貼り付けたら、カスタマイズ項目を設定していきましょう。簡単に自分のブログにあったデザイン、広告位置に調整できるようになっています。
カスタマイズできる項目
- 広告上に表示されるスポンサーリンク文字の"カラー"
- 〃 の"文字サイズ"
- 広告の挿入位置
※何もご入力、ご選択いただかなかった場合は下記の通り設定されます。
| 文字カラー | 黒 #000000 |
| 文字サイズ | 80% |
| 広告挿入位置 | 1つ目の大見出し(h3)の前 |
１−４．コードを自動生成する
各種カスタマイズの入力を終えたら、［コードを自動生成する］をクリックします。
すると、下の枠にあなた専用のコードが表示されます。
表示されたら［コードを全選択する］をクリックして、右クリック > コピー してください。
１−４．はてなブログに貼り付ける（設定する）
あなた専用のコードをコピーできたら、最後にはてなブログに設定をしていきます。はてなブログの管理画面を開き、デザインメニューを選択してください。
左側サイドメニューから真ん中の設定アイコンをクリックします。
まずは記事のプレビューを有効にします。
続いて、記事上 または 記事下 にコードを貼り付けます。
特に何行目に貼り付けなければいけないという制限はありませんが、僕は記事上の1行目に貼り付けました。正しく貼り付けられると、下記画面のようになります。
以上で、はてなブログへの初回設定は終わりです。
最後に指定した位置にGoogle Adsense広告が正しく表示されているかをプレビューで確認してください。
２．広告非表示にしたい記事に設定する（毎回）
ここまでの状態では、目的１の「Google Adsense 広告を記事中に自動挿入する」しか実現していません。どの記事でも問題なく広告が表示されている状態です。
ここから広告を非表示にしたい記事にのみ次のコードを貼り付けてください。
<style type="text/css"><!--
.adsense-code { display:none; }
--></style>
これは「さきほど生成した広告コードのみをその記事では非表示にする」という命令をするものです。
以上で、各記事の設定は終了です。
特定のカテゴリを指定したら自動的に非表示になるスクリプトではありませんので、いま現在はご自身でこの指定を行っていただく必要があります。
このあたりも自動化できるといいですね...。
最後に通常の記事と広告を非表示設定にした記事とを比べ、正しく非表示されているかをご確認ください。
補足
A. モバイルページの対応について
この記事ではPC版サイトへの設定方法を紹介しましたが、モバイル版も同じ操作で同じ効果を得ることができます。１−３の操作手順をモバイル版に読み替えてください。
B. 広告のセンタリングについて
表示した広告をセンタリング（中央寄せ）したい方は、下記コードをはてなブログに設定してください。
PC向け
設定箇所: デザイン > カスタマイズ > カスタムCSS
.ads-mobile{
text-align:center;
}
モバイル向け
設定箇所: デザイン > スマートフォン > 記事上 または 記事下
<style type="text/css"><!--
.ads-mobile{
text-align:center;
}
--></style>
C. その他のカスタマイズについて
その他のカスタマイズについてはスクリプト開発元の記事等をお読みいただき、実施していただくようにお願いいたします。
免責事項
本サービスを実施したことによりブログデザインの喪失、広告収入の減少、Googleによるアカウント停止措置等が発生しても当ブログではその責を負いかねます。操作前に必ずバックアップをとるなど、自己の責任において実施くださいますようお願いいたします。
本サービスのスクリプトではその性質上Google Adsenseの広告コードをご入力いただいておりますが、自動生成スクリプトはすべてユーザー様の環境内で実行されており、当ブログがGoogle Adsenseに関する情報を収集することは一切ございません。ご安心ください。
本サービスは予告なく変更・中断される場合がございます。予めご了承ください。
と、一通り書かせていただきましたが、今後も良い方法がないかアップデートしていきたいと考えています。参考になれば幸いです。