読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

はてなブログ

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>