はてなブログの本文下にダブルレクタングルでアドセンスを貼る

はてなブログの本文下にダブルレクタングルでアドセンスを貼る

1ページ3つまでのアドセンスをどうすると効果的に貼れるか、まあやってみるしかないということで、別ブログではヘッダ下に入れたりしているのですが、このブログでは、

  • 右サイドの一番上に 300×250 レクタングル1つ
  • トップページと各記事ページでは、本文とソーシャルボタン群の間に 300 × 250 レクタングル2つ
  • その他のカテゴリやアーカイブでは、メインコンテンツの下にレクタングル2つ

としています。

右サイドは、サイドバーの HTML ブロックに入れれば OK ですが、本文の方はいちいち記事を書くたびに入れるのも大変ですし、トップページに複数記事を「続きを読む」なしで表示すると3つを越えてしまいます。

Javascript の力を借りることにしました。

で、じゃあ、ついでにということで、流行り(らしい)のダブルレクタングルで入れてみましょう。自分の Adsense 2つを次のコードに入れて、カスタマイズの記事下に入れれば OK です。

querySelector を使っていますので、トップページに複数記事を表示しても最初の記事だけに挿入されます。また、トップとパーマリンクかで振り分けていますので、カテゴリやアーカイブの一覧表示でも問題なく表示されます。

<div id=”adsblock” class=”clearfix” style=”margin-top: 30px;”>
<div style=”font-size: 70%;”>スポンサーリンク</div>
<div style=”float: left; margin-right: 20px;”>

<!– 自分のGoogle Adsense 1 –>

</div>
<div style=”float: left;”>

<!– 自分のGoogle Adsense 2 –>

</div>
</div>

<script>
var body = document.querySelector(‘body’);
var flag = body.getAttribute(‘class’).match(/page-entry|page-index/);
var footerAd = body.querySelector(‘#adsblock’);
if (flag) {
body.querySelector(‘.entry-content’).appendChild(footerAd);
}else{
body.querySelector(‘#main-inner’).appendChild(footerAd);
}
</script>