シンプル節約生活

妊娠中のワーママが毎日気になったことやレンジ簡単レシピ、シンプルライフのコツなどを書いています。

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

スポンサーリンク

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

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

☆追記☆
自動挿入していましたが、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>


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


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


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


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

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

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

スポンサーリンク