はてなブログでは、
記事の上下に自由にHTMLコードを設置できますが、
上下だけではなく、
記事の途中で広告を設置したいという要望が少なからずあります。

もちろん、手動で設置する場合は、
記事編集中に広告コードをコピペすれば良いのですが、
記事を書くたびにいちいち貼り付けるのも面倒です。

ここでは自動的に記事の途中に広告を設置する方法を紹介します。

検索して見つかる方法は、
広告を配置した要素を後から移動させる方法ですが、
これだと、scriptが実行前に一瞬、
意図しない場所に広告が配置されるので、
ここでは直接配置したい場所に広告を挿入する方法を紹介します。

Adsenseの広告コードを文字列化

JavaScriptで広告を挿入するために、
広告のコードを文字列化しておきます。

Google Adsenseから取得した広告コードを、
下のテキストボックスに貼り付けると、
文字列化したコードに変換します。

Adsenseの広告コードを貼り付け↓ 文字列化した広告コード↓

上の文字列化した広告コードをコピーしておきましょう。

見出し前に広告を設置

広告を自動で設置するために、
設置する位置を決めておく必要があります。

ここでは、見出しh1タグを目印に広告を設置します。

はてなブログでは、
- 0番目のh1タグ: ブログタイトル
- 1番目のh1タグ: 記事のタイトル
- 2番目以降: 記事中の見出し
となるので、2番目以降の見出しを目印に広告を設置すれば、
記事内に広告が設置されます。

下のコードでは、3番目の見出しの手前、
つまり記事の中で2つ目の大見出しの直前に、
広告を配置します。

<script>
    $('h1').eq(3).before(【文字列化した広告コードを貼り付け】)
</script>

上のコードをはてなブログのフッターなど、
スクリプトを配置できる箇所に追記すれば、
自動的に広告が挿入されるようになります。

jQueryを用いているので、必要に応じて、
外部から読み込むようにしておきましょう。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

コード自体はほんの数行で、
記事中に広告を自動設置することができます。

文字列化の面倒な処理部分は、
上に変換装置を作ってあるので、
活用して下さい。