【はてなブログ】指定した見出しの前にGoogleアドセンスの記事内広告を全記事に出す方法

はてなブログで自動広告出す

はてなブログにGoogleアドセンスのリンクをせっせと手動で貼るのが面倒な方向けに、自動的に見出しの中に広告を仕込む方法について解説します。巷でははてな記法では使えないものもあるようですが、今回のコードははてな記法で動作しました。

Google AdSense マネタイズの教科書［完全版］

サンプルとして、２個目の記事下に広告を貼ります。
グーグルアドセンスのコードが必要なので、ディスプレイ広告のコードを事前に取得してください。以下のようなコードです。

<script async src="..."></script>
<!-- 広告名 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XX"
     data-ad-slot="XX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>  

自動的に記事内に広告を差し込む方法

はてなブログの管理メニューからデザインに行き、記事上に以下のコードを貼り付けます。

<script>// <![CDATA[
   addEventListener("DOMContentLoaded", function() {
       var $target = $('.entry-content > h2,h3,h4,h5');
       $target.eq(2).before($('.adsense'));
   },false);
// ]]></script>
<div class="adsense">
<center><span style="opacity: 0.7;"><font size="2">スポンサーリンク</font></span>
//ここに上記のコードを貼り付け。このコメント文は消す//
</center>
</div>

ポイントは以下のeqの中に入っている数字。ここを変えれば広告が出る見出し前が変わります。

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

おまけ

もし複数出したい場合（２個めの見出しと４個めの見出しなど）の場合は以下のようにadsense2と文字列を変えて追記します。広告のコードは同じでも分けてもOK。

<script>// <![CDATA[
   addEventListener("DOMContentLoaded", function() {
       var $target = $('.entry-content > h2,h3,h4,h5');
       $target.eq(4).before($('.adsense2'));
   },false);
// ]]></script>
<div class="adsense2">
<center><span style="opacity: 0.7;"><font size="2">スポンサーリンク</font></span>
//ここに上記のコードを貼り付け。このコメント文は消す//
</center>
</div>

デザインを変更する際は、念の為変更前のコードをメモ帳などに保存しておくことをおすすめします。
試しに色々といじってみてください。