重要：この記事のコードには、問題が発見されましたので、以下の改良版コードを利用してください。
uxlayman.hatenablog.com
==========================
みんな大好きはてなブログのアドセンスの話題。
よく、記事の文中にアドセンス入れてる人いるじゃないですか。
あれって結構効果あるようなイメージですが、手動でやってるんですよね？面倒ですよね？もし広告をつけ変える場合、いっこずつ全部書き換えなきゃだし。
ということで、それを自動化するコードを紹介します。
設定方法
ダッシュボード→デザイン→カスタマイズ→記事上下のカスタマイズ→「記事ページのプレビュー」を設定→記事下
<script>// <![CDATA[ addEventListener("DOMContentLoaded", function() { var $target = $('.entry-content > h3,h4,h5'); $target.eq(Math.floor($target.size() / 2)).before($('.insentence-adsense')); }, false); // ]]></script> <div class="insentence-adsense"> <p>広告</p> <!--ここに自分のアドセンスのコード--> <p> </p> </div>
諸注意など
- 本文中で大見出し、中見出し、小見出しの数を数えていって、真ん中に当たる部分の見出しの前に挿入します。
- 大見出し、中見出し、小見出しのどれもない場合は何もしません（そのまま記事下に表示される）
- 挿入対象はinsentence-adsenceのdivなので、アドセンスコードの周りのスタイル等適宜調整してください。上記例では、コードの上に「広告」という文字、下に空行を入れています。
- 「もっと読む」の下に広告入れている例が多いようなのですが、はてなブログは「もっと読む」の位置がソース的に記載されていないようなのでできませんでした。
- スマホで320pxのAdsenseとlinkwithinがはみ出る問題の対処決定版(2014/8版) - UXエンジニアになりたい人のブログ
←これで320pxに拡大した広告を文中挿入しようとした場合、余白部分が広告にかかってしまい、ポリシー違反になってしまいます。z-indexもoverrideも効かず・・・。どうやら、親要素に子要素を挿入する場合、親のコンテンツ領域からはみ出せないような動きです。そういうもんでしたっけ？
完成図(300x250を表示させた例)
PC用
モバイル
あとがき
WordPressだとプラグインでできるようです。単純なjsですからね。長くなるの嫌なのでカスタマイズ性低くしてますが、挿入位置の算出をがんばればはてなブログでもいろいろ出来ます*1。
WordPress記事本文中にアドセンス広告を表示する方法6パターン - Naifix
関連する話ですが、文中アドセンスはSEO的には不利みたいです。
AdSense等の広告を記事中に挿入すると、Googleから低品質と思われやすくなる
これら諸注意を考慮し、試したりした上でご利用ください。
ここじゃない方がいい、ってなところに挿入されることがわりとあります。いっこいっこ手動で入れればプレビュー時に確認しながら理想の位置に挿入できるので、その辺は善し悪しですね。
自分自身で運用していませんので何とも言えませんが、ざっとみた限りポリシーには違反してませんでした。静的に場所を移してるだけなのでまあ問題ないかと*2。
ちなみに、文中アドセンス、自分としてはあんまりやるつもりはないです。
最近自分がやらないことばっか紹介してるようなw*3
関連
Google Adsenseで簡単にA/Bテストを行う方法 - UXエンジニアになりたい人のブログ
以下2015/3/25追記
応用例1：「真ん中」の大見出しの直後に広告を入れる
対象を大見出し(h3)だけに絞り、「直後」を表すafterに変える
<script>// <![CDATA[ addEventListener("DOMContentLoaded", function() { var $target = $('.entry-content > h3'); $target.eq(Math.floor($target.size() / 2)).after($('.insentence-adsense')); }, false); // ]]></script> <div class="insentence-adsense"> <p>広告</p> <!--ここに自分のアドセンスのコード--> <p> </p> </div>
応用例2：最初の大見出しの直後に広告を入れる
応用例1に加え、追加対象見出しの条件を「最初」を表すeq(0)にする。eq(0)の部分をeq(1)とかeq(10)とかにすれば、「n番目の」という意味になる
<script>// <![CDATA[ addEventListener("DOMContentLoaded", function() { var $target = $('.entry-content > h3'); $target.eq(0).after($('.insentence-adsense')); }, false); // ]]></script> <div class="insentence-adsense"> <p>広告</p> <!--ここに自分のアドセンスのコード--> <p> </p> </div>
以下2015/5/18追記
応用例3：2つのアドセンスコードを別の位置に入れる
ポイントはそれぞれのアドセンスコードの名前を変える（下記insentence-adsenseとinsentence-adsense2）ことと、挿入位置を変える（「$target.eq(Math.floor($target.size() *1/ 3))」のところ）です。
下記例は、上から1/3にある見出しの上と、上から2/3にある見出しの上にコードを入れる例。
最初と最後であれば、$target.eq(0)と$target.eq($target.size()-1)でokです。
<script>// <![CDATA[ addEventListener("DOMContentLoaded", function() { var $target = $('.entry-content > h3,h4,h5'); $target.eq(Math.floor($target.size() *1/ 3)).before($('.insentence-adsense')); }, false); // ]]></script> <div class="insentence-adsense"> <p>広告</p> <!--ここに自分のアドセンスのコード--> <p> </p> </div>
<script>// <![CDATA[ addEventListener("DOMContentLoaded", function() { var $target = $('.entry-content > h3,h4,h5'); $target.eq(Math.floor($target.size() *2/ 3)).before($('.insentence-adsense2')); }, false); // ]]></script> <div class="insentence-adsense2"> <p>広告</p> <!--ここに自分のアドセンスのコード--> <p> </p> </div>
