【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'>そしたら、取り替えた部分にある <div id='ad-target'> の真上に、次のコードを貼り付けます。
<data:post.body/>
</div>
<b:if cond='data:blog.pageType == "item"'><!-- この下にアドセンス --> というところがあるので、その下にアドセンスコードをコピペしましょう。
<div class='adwrapper' id='ad-content' style='display:block;text-align: center'>
<!-- この下にアドセンス -->
</div>
</b:if>
もし記事の一番下にもアドセンスを配置したい場合、最初に取り替えたコードの</div> の真下に以下のコードをコピペしましょう。
<b:if cond='data:blog.pageType == "item"'>同じように <!-- 記事下アドセンス --> の真下にアドセンスコードをコピペしましょう。
<div class='adwrapper' style='display:block;text-align: center'>
<!-- 記事下アドセンス -->
</div>
</b:if>
これで準備は完了です。
JavaScriptの設定
以下がアドセンスを各記事のh2見出しの真上に挿入するJavaScriptです。
これをコピーして、</html>タグの上あたりに貼り付けましょう。
<script type='text/javascript'>少し解説すると、このコードの「h2」部分をh3、h4に変えることで、他の見出しを指定できるようになります。
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("ad-content");
var target = document.getElementById("ad-target");
var linebreak = target.getElementsByTagName("h2");
if (linebreak.length > 0){
insertBefore(adscont,linebreak[0]);
};
</script>
また、insertBefore(adscont,linebreak[0]); の0を１に変えることで２番目の見出し、２に変えることで３番目の見出しを指定できます。
もし見出しがない場合、記事本文の一番上に表示されるようになります。
まとめ。
アドセンスの配置によるクリック率をみていると、記事中一番初めのh2上と、記事の一番下が高いという結果が多めでした。
しかし、Bloggerでは好きな位置にアドセンスが配置できません。
なので、Bloggerでもこのように配置できるJavaScriptを作成しました。
アドセンスでお小遣いを稼ぎたいなら貼る位置も大切ですが、綺麗に貼ることも大切です。
きちんと自分のブログ・サイトに馴染むよう、調整しましょう。
