【はてなブログ】ほぼコピペでOK！任意の場所にAdsenseを自動挿入する方法

はてなブログではテンプレのHTMLを弄ることができないので，好きな場所にAdsenseを挿入するには色々と面倒なことをしないといけません．
そこで本記事では，jQueryのコードをコピペするだけで，テンプレの任意の場所にAdsenseのコードを自動挿入する方法を紹介します．

方法をざっくり説明

HTMLを編集できない環境下で，任意の場所にAdsenseのコードを自動挿入するために，jQuery を利用します． jQuery を使用すれば，任意のHTMLタグや，クラスの前後などに好きなコードを追加することができます．
これを利用して，HTMLを編集することなく，テンプレの任意の場所にAdsenseのコードを挿入します．

では，以下よりその方法を説明していきます．
ほぼコピペでいけるはずです！

jQuery の読み込み

既に読み込んでいる場合はスキップして下さい．

はてなブログの管理画面から， 設定 -> 詳細設定 -> headに要素を追加 のテキストボックスに以下を追記します．

<!--[if gte IE 9]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE8]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->

これで jQuery が読み込まれるようになります．

広告コードの取得

Adsenseの管理画面の「広告の設定」より，挿入したい広告のコードを取得します．
取得したコードからは，全ての改行を削除しておいて下さい．

Adsenseを自動挿入するコードを追加

はてなブログの管理画面から， デザイン -> カスタマイズ -> フッタ のテキストボックスに自動挿入のコードを追加します．
広告を挿入したい位置によってコードが若干異なるので，需要が高そうな位置のコードを4つ紹介します．
下記のコードを追加して変更を保存したら，実際に挿入したかった位置にAdsenseが表示されているか確認して下さい．

/* 広告コード */ の部分には，前のステップで取得したAdsenseの広告コード（改行削除済）に置き換えて下さい．
さらに、広告コード内の</script>のスラッシュを、<\/script>のようにバックスラッシュでエスケープしないとエラーが出るようですのでお気をつけください。
（JSを外部ファイル化する場合はエスケープの必要はありません）

記事タイトル直下

記事のタイトルのすぐ下にAdsenseを挿入します．

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content").first().prepend(adsCode);
  });
</script>

記事本文中の最初からn番目の見出し <h3> ~ </h3> の直前

記事本文（.entry-content）内の，上からn番目に現れる <h3> ~ </h3> の直前にAdsenseを挿入します．

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content h3").eq(n-1).before(adsCode);
  });
</script>

n-1 を適切な数字に置き換えて下さい．
例えば，2番目の <h3> ~ </h3> の直前にAdsenseを挿入したい場合は以下のようになります．

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content h3").eq(1).before(adsCode);
  });
</script>

しろかい！の記事本文の中ほどに貼られているAdsenseはまさにこの位置です．（この記事を執筆した時点での位置）

記事本文中の最初からn番目の見出し <h3> ~ </h3> の直後

記事本文（.entry-content）内の，上からn番目に現れる <h3> ~ </h3> の直後にAdsenseを挿入します．

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content h3").eq(n-1).after(adsCode);
  });
</script>

n-1 は上記同様，適切な数字に置き換えて下さい．

記事本文中の最初からn番目の段落 <p> ~ </p> の直後

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content p").eq(n-1).after(adsCode);
  });
</script>

n-1 を上記同様，適切な数字に置き換えて下さい．

複数の位置に自動挿入する場合

Adsenseは1つのページに最大3つまでコンテンツ向けユニットを設置できるので，複数の位置に自動挿入したい場合もあるかと思います．
上記のコードを2つ，3つ貼っても構いませんが，それだとコードの重複が起こってしまうので，以下のようにするといいです．

<script>
  $(document).ready(function() {
    // 2番目の<h3>の直前
    var adsCode = '/*広告コード1*/';
    $(".entry-content h3").eq(1).before(adsCode);

    // 3番目の<h3>の直前
    adsCode = '/*広告コード2*/';
    $(".entry-content h3").eq(2).before(adsCode);
  });
</script>

まとめ

ほとんどコピペだけで任意の場所にAdsenseを自動挿入する方法を紹介しました．
この方法は，はてなブログに限らず，任意のWebサイトで利用することができます（コードの改変が必要です）．
テンプレート式のサイトで，ページの途中にAdsenseを自動的に挿入したい場合にも使えます．
ページ毎に手動で広告コードを挿入されている方も見かけますが，後で変更する時に大変ですし，ページを増やすたびにコードを追加する必要があるので，この自動挿入をおすすめします．

是非使ってみてください！