読者です 読者をやめる 読者になる 読者になる

ブラオシマ

おしまが散歩感覚でブログ書いてます。所感、雑記ブログ。

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

スポンサーリンク

スポンサーリンク

f:id:synonym_s:20170208231504j:plain

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

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

僕がやりたいのは、大見出し(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とかガリガリ書きたい。

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