コピペで簡単！アドセンス広告の自動挿入位置を自由自在に指定する方法（目次や見出し）

※はてなブログ向け記事です。
先日の記事でも書いた通り、当ブログはアドセンス広告を自動挿入しています。
www.minimalist-kenki.net
自動挿入のメリットは2点あって、

1. 広告を貼る手間がない
2. 広告を貼り替える手間がない

というものが挙げられます。
貼る手間がなければスマホでもガンガン書けるし、自動挿入なので挿入元のソースコードを1つ変えるだけで全ページに反映されるのが楽です。
記事をこれ以上増やす前に自動挿入を設定することをオススメします。
自動挿入のコピペコードを置いてあるサイトって結構多いと思いますが、解説は少ないですね。
自動挿入のコードはたった3箇所をいじるだけで簡単に好きな位置に自動挿入できるようになるので、解説も付けていこうと思います。

自動挿入のコピペコード

まずは元となるコードを。
これをコピペして「デザイン」→「記事」→「記事下」に以下のコードをコピペすると、一番目の大見出し(h3タグ)の直前に広告が自動挿入されます。

<!--広告の自動挿入-->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.adsense-0'));
}, false);
// ]]></script>
<div class="adsense-0">
<!--ここに自動挿入したいアドセンス広告のコードをそのままコピペ-->
</div>
<!---->

とりあえずこれだけですべての記事ページの1番目の大見出し(h3タグ)直前にアドセンス広告が自動挿入されます。
ただし、これだけコピペしても自由度が低すぎますよね。
「目次の上に挿入したい」
「すべての大見出し直前に広告を挿入したい」
「3番目の大見出しにだけ表示したい」
「奇数番目にだけ表示したい」
すぐ思いつくだけでもこれくらいの自由度がほしいですよね。
広告配置はサイトによってとことんこだわるべきだと思いますので、コピペした後に自分で試行錯誤できるようにコードの説明と変更箇所3点について解説していきます。

5分でわかる！自動挿入コードの理解

JavaScriptが分からない方にもわかるように専門用語は抑えて解説していきます。
先ほどのコピペコードで重要な個所が3行分あります。

1. 大見出しや目次などのターゲットを指定する
2. 何番目のターゲットか指定し、クラス名を付ける
3. 実際にクラス名を使って広告を挟む

それでは順に解説します。

1. 大見出しや目次などのターゲットを指定する

まずは以下のコードで「記事中」の「h3タグ」をターゲットに指定します。
つまり書き換えるコードは.entry-content > h3の部分ですね。
以下サンプルです。

中見出し(h4)を指定する

var $target = $('.entry-content > h4');

目次(ul)を指定する

var $target = $('.entry-content > ul');

2. 何番目のターゲットか指定し、クラス名を付ける

何をターゲットにするかは決まったので、何番目をターゲットにするか決めます。
その機能にクラス名をつけて、そのクラス名で広告リンクを挟むことで適応されます。
$target.eq(0)では0番目に挿入となっていますね。（番号は1からではなく0から始まります。）
例えば3番目の見出しに広告を自動挿入したい場合は
$target.eq(2)と指定します。
このとき、この設定に名前を付けます。
何でもいいですが、分かりやすく「adsense-0」とつけています。

3番目のターゲットに挿入したい時

$target.eq(2).before($('.adsense-2'));

3. 実際にクラス名を使って広告を挟む

これは簡単ですね。
注意する点は、先ほど名づけたクラス名で挟んであげることです。

<div class="adsense-0">
<!--ここに自動挿入したいアドセンス広告のコードをコピペ-->
</div>

複数のアドセンス広告を自動挿入したい場合

先ほどの3点を押さえておけば2個でも3個でもそれぞれを指定した位置に自動挿入できます。
クラス名をそれぞれ変えてしまえば、それは別々の処理となるので覚えておいてください。
サンプルコードとして、私が設定している「目次上リンクユニット」と「3番目の大見出し上にレクタングル大」の設定です。

<!--目次上にリンクユニット-->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > ul');
$target.eq(0).before($('.adsense-link'));
}, false);
// ]]></script>
<div class="adsense-link">
<!--ここにリンクユニットのコード-->
</div>

<!--3番目の大見出しにレクタングル大-->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(2).before($('.adsense-2'));
}, false);
// ]]></script>
<div class="adsense-2">
<!--ここにレクタングル大のコード-->
</div>

自動挿入にした後やっておくこと

アドセンス広告の挿入方法の紹介は以上になります。
当たり前なんですけど、一度自動挿入を設定すればすべての記事ページに反映されます。
設定した後は一記事ずつ手動でもとの広告は外しておきましょう。
予想外の貼り方になってしまっているかもしれません。
私は今の広告配置にしてからクリック率が2%近くまで改善されたので、配置も自動挿入にして記事執筆に集中できています。
おすすめですよー
www.minimalist-kenki.net