はてなブログのトップとカテゴリ一覧にアドセンスを自動挿入

はてなブログのトップとカテゴリ一覧にアドセンスを自動挿入

教えてくださったのはこの方です。

www.naenote.net

これはカテゴリの記事一覧ページにアドセンスを挟み込むコードでした。
これを参考にして、トップにも同じ位置に挿入。

それぞれのページで挿入する位置を変えるとかはできないけど、いいんです。ざっくりで。笑
一覧に１つか２つ表示されれば十分。

使用するテーマによっても微妙に変わるかもしれないので、自己責任でお願いします(>_<)

コードを記事に書こうと思ったら、見たままモードではできないらしい。。。
はてな記法で書き直しました。

<!-- 一覧用Adsense挿入 -->
<script>// <![CDATA[
function insertAdSense (slotID, index) {
// AdSense用のHTMLを組み上げ
var elmDiv = document.createElement('div');
var spsLink = document.createElement('div');
// スポンサーリンク表記
spsLink.innerHTML = 'スポンサーリンク';
spsLink.style.fontSize = '12px';
elmDiv.appendChild(spsLink);
var adsIns = document.createElement('ins');
adsIns.className = 'adsbygoogle';
adsIns.style.display = 'block';
adsIns.dataset.adClient = 'ca-pub-自分のアドセンスID';
adsIns.dataset.adSlot= slotID;
adsIns.dataset.adFormat = 'rectangle';
var adsGgl = document.createElement('script');
adsGgl.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
var adsBr = document.createElement('div');
adsBr.innerHTML = '<br /><br />';
elmDiv.appendChild(adsIns);
elmDiv.appendChild(adsGgl);
elmDiv.appendChild(adsBr);
// 中央寄せにしておく
elmDiv.style.textAlign = 'center';
// AdSenseを挿入する。記事数が挿入箇所より少なければスキップ
// TOP用
var $target = $('.entry');
if(index <= $target.length) $target.eq(index).before(elmDiv);
// カテゴリ用
var $target2 = $('.archive-entry');
if(index <= $target2.length) $target2.eq(index).before(elmDiv);
}
jQuery(function(){
// 広告IDと挿入箇所（何番目の記事の前に挿入するか）を指定する
var adSlots = [
['広告ID',1],
['広告ID',3]
];
// 順番に挿入していく
$.each(adSlots, function(){
insertAdSense(this[0], this[1]);
});
});
// ]]></script>

すごい、色付けもできるんですね。

直さないといけないのは２箇所です。

adsIns.dataset.adClient = ‘ca-pub-自分のアドセンスID‘;
のアドセンスIDと、

var adSlots = [
[‘広告ID‘,1],
[‘広告ID‘,3]
];

の広告ID。

どちらもアドセンスのコードを取得する時に書いてあります。

広告IDはdata-ad-slot=”数字”の数字の部分です。

adSlotsの1と3という数字は挿入する場所の番号です。
私は１記事目の下と、３記事目の下に入れていますが、もっと入れることもできるし、１つでもOK。

これをデザインカスタマイズのフッターのところに貼り付けます。
jqueryの読み込みは設定＞詳細設定のheadタグのところに貼りました。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

自分では考えられなかったので、便利なコードをありがとうございました！
これもどなたかの参考になれば幸いです。

余談ですが、見たままモードよりもはてな記法の方が行間が狭いですよね。
見慣れていないので見にくい・・・

ネットで副業＆お小遣い稼ぎ！

▼お手数ですが、読んだよの印にポチっと押してもらえると嬉しいです！

お読みくださりありがとうございました！