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

45 For Trash

しごうするのか、されるのか。

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

はてなブログカスタマイズ アドセンス(AdSense)

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

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

f:id:shigo45:20160107142543j:plain

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

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

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

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

図にすると下の通り。

f:id:shigo45:20160107150213j:plain

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

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

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

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

f:id:shigo45:20160107152301j:plain

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

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

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

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

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

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

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

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

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

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

www.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>
<!-- 最初の見出し前にアドセンスを配置ここまで -->

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

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

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

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

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

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>
<!--記事下アドセンスここまで-->

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

サイドバーへのアドセンス設置

これは簡単ですね。管理画面→デザイン→カスタマイズ→サイドバー→モジュールを追加→HTMLと進み、そこにアドセンスで取得した広告コードを貼ればOKです。

まとめ

WordPressではアドセンス設置支援のプラグインがあり、楽に細かく設定できるのですが、はてなブログではどうなんだろうとちょっと不安でした。しかし、先人の知恵をお借りして楽をすることができました。ありがとうございます。

AdsenseはPro費用分ぐらい出ればいいな、と思っていますので、あまり細かい検討はしないかも知れませんが、はてなブログでの運用をしばらくして気づいたことなどあればまた書いてみたいと思います。


This is a post from 45 For Trash

POLICY :1. このサイトへのリンクは自由です。 2. できるだけ誤りのないように書いているつもりですが、当サイトに掲載する情報の正確性は保証できません。また掲載している情報は執筆日現在の情報です。 3. 当サイト、当サイトリンク先、広告リンク先の利用によって生じたいかなる損害についても一切の責任を負いません。 4. 当サイトはGoogleアドセンス、Amazonアソシエイト、その他アフィリエイトの広告を掲載している場合があります。 5. 当サイトご利用の場合は上記の事項に同意したものとみなします。