はてなブログのトップページの記事と記事の間にアドセンス広告を入れ込む

無いなら作ろうシリーズ　第3弾
はてなブログのトップページでは記事がたらたらと並んでしまうので、アドセンスを入れ込んでみようという記事です。

殺風景ですからね。トップページ。PROなのにカスタマイズできないし！

使うもの

今回、使うものはこれだけです。

Javascript (30行くらい)
Google Adsense
はてなブログPRO（必須ではない）

※アドセンスのポリシーを確認

Googleアドセンスは、しっかりとしたポリシーが公開されています。
僕自身もポリシーを読んだ上でこの施策をやっていますが、この施策がポリシー違反でないとは言えません。真似することは自由ですが、自己責任でお願いします。

AdSense ポリシー: 初心者向けガイド
https://support.google.com/adsense/answer/23921

AdSense 広告コードの修正
https://support.google.com/adsense/answer/1354736

なにができるのか？

記事と記事の間に、アドセンスのコンテンツを差し込みます。
f:id:kanaxx43:20200616183031p:plain
▲実際のトップページ画像

トップページだけでなく、同じ構造でできているカテゴリーページと月ごとのアーカイブページも同じように差し込まれます。コードを改変すれば、アドセンス以外のコンテンツを差し込むこともできると思います。

Javascriptのプログラム

今回は短いですね。githubに置くまでもないので、とりあえずこの記事の中にベタで書いておきます。

googleAdCodeの値を自分の環境に合わせて書き換えます。最後の</ins>の後ろにバッククオートが1つあるので編集するときには消さないように注意してください。あと、広告が多くなるとうざいので5個おきに1つ広告を入れていますが、お好みで改変してもらっていいと思います。

飛ばす（スキップする）条件はこれです。
if( (i+1)%5 != 0 ) {

スクリプトのコード

<script>
function insertAdsense(){
    console.info('-InsertAdsense start');

    //change your own code
    let googleAdCode = `<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-0000"
        data-ad-slot="0000"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>`;

    let list = document.querySelectorAll('div.archive-entries section');
    for(let i=0; i<list.length; i++){
        //1 ad insert per 5 article
        if( (i+1)%5 != 0 ) {
            continue;
        }
        console.log(list[i]);
        
        let div = document.createElement("div");
        //change your css
        div.classList.add('section-adsense-js');
        div.innerHTML = googleAdCode;

        list[i].after(div);
        (adsbygoogle = window.adsbygoogle || []).push({});
        console.log('insert ad %s', i+1);
    }

    console.info('-InsertAdsense end');
}
insertAdsense();
</script>

設置する

さて、設置しましょう。

スクリプトを置く

Javascriptが動く部分であれば、どこであってもよいですが、今回はサイドバーのHTMLモジュールとして置いてみました。

f:id:kanaxx43:20200615231819p:plain

CSSを追加する

<ins>を囲んでいる<div>に当てるCSSを書きます。非表示にしたり、極度に小さいエリアにしたりなどポリシー違反にならないように気を付けてください。

div.section-adsense-js{
/*  put your code */
  margin-top:10px;

}

場所はお決まりの、デザイン設定のデザインCSSです。
f:id:kanaxx43:20200615232820p:plain

確認する

トップページにアクセスすると、こんな感じに表示されます。
f:id:kanaxx43:20200615233035p:plain

何が表示されるかは、お楽しみです。

まとめ

無いなら作ろう第3弾は、アドセンスの差し込みでした。
商品系のアフィリエイトはあんまり効果がないしメンテナンスが面倒なので、全面的にアドセンス枠に置き換えていこうと思います。

ちなみに、はてなブログPROじゃない人は、トップページをリスト形式にできないしはてなが差し込んでいる広告が出ていると思うので、これをやると鬱陶しいサイトになると思います。

無いなら作るシリーズ

kanaxx.hatenablog.jp kanaxx.hatenablog.jp

その場しのぎで適当にコーディングしすぎたので、ちゃんとまとめようかな。。。

『７回目の出直し🌻』

好きなことを自分のペースで、のんびり更新