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

[PR] 当サイトはアフィリエイト広告を利用しています。

このブログにはアドセンスを貼っています。

毎回自分でコードを貼るのは大変なので、記事内は自動で挿入できるようにしてあります。

☆追記☆
自動挿入していましたが、AMPページにアドセンスを挿入する方法が見つからず、全記事に手動で入れました><。
大変だった〜。最初からそうしておけばよかった。

記事上、記事下だったら、はてなのデザインのカスタマイズのところに貼るだけなので、簡単ですよね。

でも私がやりたかったのは、トップページの一覧に挟み込む方法。
はてなブログProに変える前に、広告が出ていたようなところに表示させたかったのです。

調べたら参考になるコードを公開してくれている方がいました!

スポンサーリンク


スポンサーリンク

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

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

www.naenote.net

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

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

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

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

<!-- 一覧用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>

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

スポンサーリンク

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

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

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

の広告ID。

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

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

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

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

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

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

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

にほんブログ村テーマ ネットで副業&お小遣い稼ぎ!へ
ネットで副業&お小遣い稼ぎ!

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

にほんブログ村 ライフスタイルブログ シンプルライフへ

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

スポンサーリンク


スポンサーリンク
タイトルとURLをコピーしました