はてなブログへのアドセンス設置を全自動化するコード（コピペOK）

はてなブログProにしたのは、有料分ぐらいはGoogle Adsense収入で賄えるのではと思ったからなので、アドセンス広告を貼ることにしました。

ただ、記事中や記事下にアドセンスを貼るのに、いちいち手動でコードを貼るのはちょっと面倒。忘れそうですし。それで、一度設定すれば後は何も気にせず放置していられる方法を探し、情報を公開してくださっているブログを発見。先人のお知恵を借りるだけの記事ですが、自分への備忘録を兼ね、元記事を紹介しつつ書いていこうと思います。

f:id:shigo45:20160107142543j:plain

【前提】アドセンスの配置
- 私が採用したアドセンスの配置
- １画面に表示できるアドセンスは３つまで
はてなブログへのアドセンス設置を全自動化
まとめ

【前提】アドセンスの配置

私が採用したアドセンスの配置

とりあえず現在良いかなと思っているアドセンスの配置は次のようなものです。

記事中の最初の見出し直前にレスポンシブを配置
記事下でシェアボタン前にレクタングル大を配置
サイドバー一番上にレクタングル大を配置

図にすると下の通り。

f:id:shigo45:20160107150213j:plain

少ない経験からのものなのでこれがベストと言い切れるわけでもなく、また、はてなブログ特有の傾向があるかも知れないので、少しずつ改めて行こうと思いますが、現在のところ想定しているのは下の通り。

クリックの多い順に、記事下→記事中→サイドバー。
記事中はレスポンシブにしてあまり読者の邪魔にならないように。
レクタングル大は出稿広告の種類も多くクリックされやすいので2つ配置。

まあ、大した考えではありません…。

ちなみにこのブログのデザインはレスポンシブで、PCでもスマホでも同じテーマが表示されるようにしています。よってスマホ表示だと下図のような広告配置となります。

f:id:shigo45:20160107152301j:plain

この配置ではスマホからはサイドバー広告はクリックされないですね。今後の検討課題ということで。

１画面に表示できるアドセンスは３つまで

Google Adsenseの広告表示でまず気をつけなければならないのは、規約で１画面に表示できるアドセンス広告は３つまでと決まっていること。それ以上表示させるとグーグルに怒られてしまいます、というか広告配信停止、アカウント停止等になってしまいますので、きちんと注意しておくことが必要。

上記の配置も３つとしています。

※追記 2016年8月頃に規約が改訂され、表示数の制限はなくなりました。ただし、コンテンツボリュームとの関係で多く貼り過ぎるとやはり問題にはなるようですので注意は必要です。

注意すべきは「続きを読む」（moreタグ）を使用している場合。この場合、ブログのトップページには複数の記事が表示されますが、記事中の広告をmoreタグの前に配置している場合、トップページには表示される記事の数だけアドセンス広告が表示されてしまうことになり、規約違反となります。

よって、記事中のアドセンス広告はmoreタグ（続きを読む）の後に入れなければなりません。「続きを読む」を使っていない場合は気にする必要はないんですけどね。

はてなブログへのアドセンス設置を全自動化

記事中にアドセンスを自動的に配置する方法

まず記事中にアドセンスを自動配置する方法です。これについては下記のブログに紹介されていた方法を採用しました。ありがとうございます。

http://www.tamasaburo.com/entry/hatenablog-adsense-in-the-articlewww.tamasaburo.com

この方法は、記事の中に「見出し」（h3タグ）設定をしている場合、最初の見出しの直前に自動的にアドセンスを表示するものです。私はほとんどの記事に見出しを使うのでこの方法がしっくりきました。

また、通常、少し本文を書いた後に画像、「続きを読む」（moreタグ）を挿入し、その後目次（目次記法）、最初の見出し（h3タグ）、という流れで記事を書くのでちょうどよい場所（目次と最初の見出しの間）に広告が表示されます。

ちなみに、見出しを設定していない場合はアドセンスは表示されません。

上で紹介された方法そのまんまを利用させて頂いたのですが、「スポンサーリンク」の文字とアドセンス広告をセンターに配置したかったので、スタイル設定だけ手を加えました。

そのコードがこちら。

<!-- 最初の見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center;" >スポンサーリンク<br>
※ここにご自分のアドセンスコードをコピペ
</p>
</div>
<!-- 最初の見出し前にアドセンスを配置ここまで -->

「※ここにご自分のアドセンスコードをコピペ」の部分を削除し、代わりにアドセンスで取得したご自分のコードを貼り付けます。で、それをブログ管理画面から、デザイン→カスタマイズ→記事→記事下に貼り付ければＯＫです。

記事下かつシェアボタン前にアドセンスを自動的に配置する方法

私の経験では、記事下は最もアドセンスがクリックされやすい場所。アドセンスを貼るなら外せない場所だと思います。

ただ、管理画面→デザイン→カスタマイズ→記事→記事下に、アドセンスのコードを貼り付けるだけだと、シェアボタンの後にアドセンスが表示されてしまいます。検証はしていませんが、それだとクリックされない気がします（もちろん、アドセンスの後にシェアボタンがあるとシェアされない可能性も考えられますが…）。

やっぱり記事のすぐ後、シェアボタンの前にアドセンスを表示したい、ということで探したらビンゴの記事がありました。ありがとうございます。

chipspd.hatenadiary.jp

こちらもありがたくまんまコピペさせて頂いたのですが、例によってセンター配置するスタイルだけ設定。下のようなコードになりました。

<!--記事下アドセンス-->
<div id="my-footer">
<p style="text-align:center;" >スポンサーリンク<br>
※ここにご自分のアドセンスコードをコピペ
</p>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!--記事下アドセンスここまで-->