はてなブログでGoogle AdSenseを、【好きな箇所の見出し前】に貼り付けるカスタマイズ！！

はてなブログにアドセンスを自動で貼り付ける。
なんだかめんどくさいぞ？
あんまり汎用性のあるコードが出回ってないぞ？

元プログラマーのおしまは、ぼやく。

僕がやりたいのは、大見出し（h3）の上から1番目と3番目にアドセンス表示させたいの！！

だってスマホページのヘッダー下に配置してたら、グーグル先生にさっそく怒られたんだもん。

ググる。
…良さげなコードは見つかった。
けども解説がちょっと足りない。。ので付け加えさせていただきます！！

任意の見出し前に、アドセンスを自動表示させよう

www.mutant-tetsu.com

僕が参考にしたのは、この記事です。
以下はデフォルトコード。
<!–この箇所にアドセンスコードを貼り付ける–>箇所にアドセンスを貼り付けると、大見出し（h3）直前にアドセンスが表示されます。

デザイン編集画面への行き方は割愛します。

<!-- 見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<!--この箇所にアドセンスコードを貼り付ける-->
</div>
<!-- 最初の見出し前にアドセンスを配置ここまで --> 

• 中見出し、小見出し前にアドセンスを配置したい場合
• 先頭ではなく、2番目、3番目の見出し要素前にアドセンスを配置したい場合
• 記事中に2個以上のアドセンスを配置したい場合

この3つについてコードを変えていきますよ。

中見出し、小見出し前にアドセンスを表示したい場合

参考ブログにもありますが、これは上から4行目の

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

を、

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

に変えるだけ。
はてなブログでは、

• 大見出し→h3
• 中見出し→h4
• 小見出し→h5

に統一されています。

先頭ではなく、2番目、3番目の見出し要素にアドセンスを配置したい場合

<!-- 見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<!--この箇所にアドセンスコードを貼り付ける-->
</div>
<!-- 最初の見出し前にアドセンスを配置ここまで -->

上から5行目

$target.eq(0).before($('.insentence-adsense'));

<!-- 2番目の見出し要素前にアドセンスを配置 -->
$target.eq(1).before...

<!-- 3番目の見出し要素前にアドセンスを配置 -->
$target.eq(2).before...

（）の中の数字を変えるだけです！

なんで最初は0なの？
と思われた方、鋭いです。

これはプログラミング独特の考え方で、配列やリストでググってもらうと1番早いんですが。。
簡単にいうと

• 0→1つ目の要素
• 1→2つ目の要素
• 2→3つ目の要素…

こんな感じです！難しくない！！

記事中に2個以上のアドセンスを配置したい場合

グーグルアドセンスの決まりごとが緩くなって、スマホでも4つや5つ、アドセンスを配置できるようになりました。

記事中の広告配置は可読性が落ちる、クリック単価が低いなどと言われていますが、
クリック率が高いのも現実。

僕はスマホの記事中に2つのアドセンスを配置しています。

例を出して紹介します。
【大見出し（h3）1番上、上から3番目の2つにアドセンスを配置したい場合】

<!-- 1番目の見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<!--この箇所にアドセンスコードを貼り付ける-->
</div>
<!-- 1番目の見出し前にアドセンスを配置ここまで -->

<!-- 3番目の見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target3 = $('.entry-content > h3');
$target3.eq(2).before($('.insentence-adsense3'));
}, false);
// ]]></script>
<div class="insentence-adsense3">
<!--この箇所にアドセンスコードを貼り付ける-->
</div>
<!-- 3番目の見出し前にアドセンスを配置ここまで -->

変えたのは、

var $target = $('.entry-content > h3');
→＄target3

$target.eq(0).before($('.insentence-adsense'));
→$target3.eq(2).before($('.insentence-adsense3'));

<div class="insentence-adsense">
→<div class="insentence-adsense3">

です。
もっと簡潔にできそうなんですが…これで動きます。
大事なのは、【$target3.eq(2).before…】（この場合は3番目の要素なので）部分で、それ以外は任意の名称をつけてもらって大丈夫です！

名称を変えないとね、うまく読み込んでくれないんですよ。
似ている要素ですが、役割は微妙に違うのでね、
いい名前つけてやってください。

任意で名前つけてもらっていいですけど、

$target〇〇と、div class=”insentence-adsense〇〇は統一してくださいね！
〇〇の中身を任意で変えてください、という意味です！

まとめ

これでグーグル先生に怒られずに済みそうだー。
最初の見出しだけじゃなくて、2番目、3番目の見出し前にアドセンス貼りたい。
記事中に複数のアドセンス貼りたい。

そんな方への参考になればと思って書きました！

久しぶりにコードを手打ちしたなぁ。
まとめて時間とって、swiftとかガリガリ書きたい。

よし、今回はこんな感じで！
それではまた！