edo1z blog

プログラミングなどに関するブログです

記事毎に構成がバラバラなはてなブログの記事内にアドセンス広告をうまいこと埋め込む方法について

私のブログは今までにBlogger、wordpress、はてぶという感じで引っ越ししまくりでなおかつ構成等はめちゃくちゃです。今はマークダウンで書いてますが、昔はHTMLでした。よって見出しはあることもあればないこともありますし、同一レイヤーの見出しがh2のこともあれば、h3のこともあるわけであります。そういったときに、どうやってうまいこと記事内にアドセンス広告を入れたらいいでしょうか???

まず下記を参考にさせていただきました。はてぶはjavascript、jQueryが普通に使えるようです。下記記事では、記事内の最初H3の前にアドセンス広告を表示しております。

www.thoughts-make-things.com

私のブログには、H3がないこともあれば、H2のときもあります。また、記事の冒頭でh3, h2を表示していることもあります。どうしたらいいかなーと考えまして、結論的には下記のようにすることにしました。

記事内アドセンス広告表示ルール

  • 記事内にH2が2つ以上ある場合は、2番目のH2の前にアドセンス広告を表示する
  • 上記に該当しない場合で、H3が2つ以上ある場合は、2番目のH3の前にアドセンス広告を表示する
  • 上記2つに該当しない場合、記事内にアドセンス広告は表示しない

コード

コードはこちらです。

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var h2 = $('.entry-content > h2');
var h3 = $('.entry-content > h3');
if (h2.length >= 2) {
  h2.eq(1).before($('.insentence-adsense'));
  $('.insentence-adsense').show();
} else if (h3.length >= 2) {
  h3.eq(1).before($('.insentence-adsense'));
  $('.insentence-adsense').show();
}
}, false);
// ]]></script>
<div class="insentence-adsense" style="dispaly: none; margin-top:20px;">

※AdSense広告コード貼り付け位置

</div>

コードの解説

  • 変数h2に、H2要素を全て取得して入れてます。
  • 変数h3に、H3要素を全て取得して入れてます。
  • h2の長さが2以上であれば、2番目のh2に広告を入れて表示してます。
  • h3の長さが2以上であれば、2番目のh3に広告を入れて表示してます。
  • 上記のいずれにも該当しない場合、広告は非表示のままになります。