今回はそんな疑問を抱く人向けの記事。
目次前にアドセンス広告を表示させたいけど、やり方が分からない．．．
WordPressとはてなブログではやり方が少し違うので、その方法をシェアしていく。
\この記事で分かる事/
コピペで出来るのでご参考に。
（※はてなブログPROでの動作のみ確認済み。通常のはてブでも可能な場合はコメント等で報告願いたい。）
完成イメージ
↑こんな感じ。
導入文から目次までの間に表示させる事で、クリック率も高くなる。
また、今回紹介するやり方は自動で目次前に表示してくれる為、以降はほったらかしでOKだ。
ちなみに、画像内の記事はこちら。
【マスク崩れ解決】ドラッグストアに売っているファンデーション3選
こう見えても、美容ブロガーなのだ。
アドセンス広告を目次前に表示させる方法
左側にある「デザイン」をクリック。
真ん中の「カスタマイズマーク」🔧みたいなマークをクリック➡「記事」をクリック。
「記事」の中にある「記事下」に以下のコードを張り付け。
～コピペするコード～
↓この下から↓
<!-- 目次上にアドセンスを表示させるコード -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > ul');
$target.eq(0).before($('.adsense-1'));
},false);
// ]]></script>
<div class="adsense-1">
<p>
//////ここにアドセンスのコードを貼りつける//////
</p>
</div>
↑この上まで↑
保存して無事表示されたら完了ある。
目次前以外にも表示させたい場合
コード上の「var $target = $('.entry-content > ul');」の部分を変更する事で可能になる。
今回は、「目次前に表示させる事」が目的だったので目次を意味する「ul」と記述してある。
例えば、h2見出しの前に表示させたい場合は、「var $target = $('.entry-content > h2');」と変更するだけ。
目次前と見出し前にアドセンスを表示させたい場合は以下の様になる。
<!-- 目次前にアドセンスを表示させるコード -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > ul');
$target.eq(0).before($('.adsense-1'));
},false);
// ]]></script>
<div class="adsense-1">
<p>
//////ここにアドセンスのコードを貼りつける//////
</p>
</div>
<!-- h2見出し前にアドセンスを表示させるコード -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h2');
$target.eq(0).before($('.adsense-1'));
},false);
// ]]></script>
<div class="adsense-1">
<p>
//////ここにアドセンスのコードを貼りつける//////
</p>
</div>
以上だ。
まとめ
今回は、目次前にアドセンスを表示させる方法を紹介した。
応用が利くので、自分好みにいじってみるのもおすすめである。
繰り返しになるが、当ブログ(モンラビ)は主に美容を扱っているので、気が向いたら遊びに来ていただきたい。
ではまた。
