はてなブログの広告配置に悩む方へ！コピペで記事のリード文の後ろに広告を設置する方法

photo by Billy Wilson Photography

気づいた方も多いかと思いますが、当ブログのデザインを結構カスタマイズしました。ということで、はてなブログのカスタマイズ方法を少しずつ書いていこうと思います。

注意：ちなみに、僕はCSSとHTMLの違いもイマイチ分からないほどの初心者ですので、カスタマイズには色々な方の素晴らしい記事を参考にさせてもらいました。感謝です！

第一弾として、この記事ではGoogleAdSenceの広告をリード文のすぐ後ろに配置する方法をご紹介します。

リード文の後ろに配置する利点

リード文とは、記事の最初の部分に当たる「読者の興味を引きつける」役割を持った文です。ブログごと、記事ごとで文字数も変化しますが、僕の場合は200文字くらいを目安に書いています。

リード文の後というのは、読者の興味が薄れやすい（=離脱率が高い）部分ですので、広告を配置する絶好の場所。

 10周年目のはてなブックマーク事情。最近の1500users超の記事のカテゴリを分析してみた - Appism の例で言うと、こんな感じになります。

手打ちでやっている方も多いかと思いますが、めんどくさいので自動化しましょう。

それでは、早速カスタマイズしていきたいと思います。

参考にしたブログ

やり方を質問したところ、ご丁寧にわざわざ追記にて説明していただきました。本当にありがとうございます。皆さん、是非はてブ＆読者になっておきましょう。

カスタマイズの方法

まずは管理画面→デザインへ。

左上の四角で囲んだところをクリック。スマホ、PCどちらも同じコードで出来るので今回はPCの方でやります。（スマホの場合も同じです）

記事を選択。

その後、記事下をクリックします。

そうしたら、記事下に以下のコードをコピー＆ペースト！

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p>広告</p>
<!--ここに自分のアドセンスのコード-->
<p> </p>
</div>

あとは、お好みで「広告」の部分を「スポンサードリンク」に変えたりすれば終わり。簡単ですね！

仕組み

仕組みに関しては、ほとんど分かりませんが←

h3タグ（大見出し）の前（before）に広告を挿入するコードになってるみたいです。beforeの部分をafterに変えれば、大見出しのすぐ後ろに広告を挿入できます。

まとめ

以上、コピペでリード文の後ろに広告を設置する方法でした。参考にさせていただきました uxlayman 様、本当にありがとうございました。

次回もお楽しみに！