【Bloggerコピペ】記事中見出しの上にアドセンスを自動で挿入する方法


Bloggerでは、記事中にアドセンスを挿入する機能が通常ありません。

そのため、記事中にアドセンスを挿入したい場合、各記事ごとのhtmlにアドセンスコードをベタ張りするか、moreタグを使用して行うのが一般的です。

しかし、記事中の好きな見出しの上に挿入することができる方法を発見したので、まとめていきたいと思います。

この方法であればテーマのhtmlを少しいじるだけで全ての記事に適用されますし、ほぼコピペで終わります。

しかもページ読み込み速度遅延の原因になりうる、Jqueryを読み込む必要もありません。使用するのはJavaScriptのみです。

*僕が開発したBloggerの新テーマ「ZELO」では、デフォルトでこの機能がついています。詳しくはこちら。

Bloggerの新・日本語対応テーマ「 ZELO」作成しました【特徴紹介】 - Movelog

Bloggerで記事中にアドセンスを自動挿入

まず、Bloggerの編集画面から「テーマ」→「htmlの編集」へいきます。

htmlの編集を行うわけですが、テーマ内での検索の仕方がわからない・いじったことがなく不安な方はこちらをご覧ください。

準備

テーマ内のhtmlで、<data:post.body/> という部分を探しましょう。

上のリンクに書いてある、html内で検索する方法を使えばすぐ見つかると思います。

見つかったら、このタグを次のやつと取り替えましょう。
<div id='ad-target'>
   <data:post.body/>
</div>
そしたら、取り替えた部分にある <div id='ad-target'> の真上に、次のコードを貼り付けます。
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='adwrapper' id='ad-content' style='display:block;text-align: center'>
                          <!-- この下にアドセンス -->

</div>
</b:if>
 <!-- この下にアドセンス --> というところがあるので、その下にアドセンスコードをコピペしましょう。

もし記事の一番下にもアドセンスを配置したい場合、最初に取り替えたコードの</div> の真下に以下のコードをコピペしましょう。 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='adwrapper' style='display:block;text-align: center'>
<!-- 記事下アドセンス -->

</div>
</b:if>
同じように <!-- 記事下アドセンス --> の真下にアドセンスコードをコピペしましょう。

これで準備は完了です。

JavaScriptの設定

以下がアドセンスを各記事のh2見出しの真上に挿入するJavaScriptです。

これをコピーして、</html>タグの上あたりに貼り付けましょう。
<script type='text/javascript'>
function insertBefore(addition,target) {
      var parent = target.parentNode;
      if (parent.lastChild == target) {
      parent.insertBefore(addition);
      } else {
      parent.insertBefore(addition,target.previousSibling);
      }
      }
      var adscont = document.getElementById(&quot;ad-content&quot;);
      var target = document.getElementById(&quot;ad-target&quot;);
      var linebreak = target.getElementsByTagName(&quot;h2&quot;);
      if (linebreak.length &gt; 0){
      insertBefore(adscont,linebreak[0]);
      };
</script>
 少し解説すると、このコードの「h2」部分をh3、h4に変えることで、他の見出しを指定できるようになります。

また、insertBefore(adscont,linebreak[0]);  の0を1に変えることで2番目の見出し、2に変えることで3番目の見出しを指定できます。

もし見出しがない場合、記事本文の一番上に表示されるようになります。

まとめ。

アドセンスの配置によるクリック率をみていると、記事中一番初めのh2上と、記事の一番下が高いという結果が多めでした。

しかし、Bloggerでは好きな位置にアドセンスが配置できません。

なので、Bloggerでもこのように配置できるJavaScriptを作成しました。

アドセンスでお小遣いを稼ぎたいなら貼る位置も大切ですが、綺麗に貼ることも大切です。

きちんと自分のブログ・サイトに馴染むよう、調整しましょう。

コメント