IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログに AdSense インフィード広告を貼る

はてなブログに AdSense インフィード広告を貼る

2018/06/26 javascript, はてなブログ

はてなブログにインフィード広告を貼る

さほどアクセスもないブログしか書いていませんが、せめてはてなブログの利用料くらいは広告でまかなえないかと Google AdSense を利用しています。その程度の意識ですので、つい最近まで1ページに3つまでとの制約がなくなったことも知りませんでした。

で、今回、「そんなには褒めないよ。映画評」をリニューアルした際にあらためて AdSense を見てみましたら、インフィード広告なるものがあります。はてなブログにもこれを貼れないかという話題です。

  • インフィード広告とは?
  • はてなブログには貼れないんじゃないの?
  • AdSense インフィード広告をはてなブログに貼るスクリプト

インフィード広告とは?

インフィード広告 – AdSense ヘルプ

今更私がインフィード広告について説明することもありませんのでリンクを貼っておきます。要は、はてなで言えば、一覧表示のコンテンツの間に表示する広告という理解でいいと思います。

具体的には、記事の一覧表示 /archive やトップページを一覧表示にした場合に記事リストの間に記事と似たレイアウトで広告を挿入することができるというもののようです。

はてなブログには貼れないんじゃないの?

インフィード広告の作り方はググっていただければたくさんヒットしますので省略です。

で、それをはてなブログに貼ろうにも公式ではその方法が提供されていません。ならば、Javascript に頼るしかありません。

ですので、この方法は、AdSense のプログラムポリシーを遵守した方法なのかははっきりしていません。ですので、もしこのスクリプトを使われる場合でも自己責任でお願いします。

AdSense インフィード広告をはてなブログに貼るスクリプト

フッタに入れてください。

使っていただくのは自由ですがコードは転載しないでください。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(function(){
    var adsScript = document.createElement("script");
    adsScript.innerHTML = "(adsbygoogle = window.adsbygoogle || []).push({});";
    // 以下それぞれ個別のデータを設定する
    var google_ad_client = "ca-pub-****************";
    var slot = **********;
    var key = "**************";
    // ここまで
    var adsDiv = document.createElement("div");


    adsDiv.innerHTML = '<ins class="adsbygoogle" style="display:block" data-ad-client="'
        + google_ad_client + '" data-ad-slot="'
        + slot + '" data-ad-format="fluid" data-ad-layout-key="'
        + key + '"></ins>';
    adsDiv.appendChild(adsScript);
    // css 設定用
    adsDiv.classList.add("ads-infeed");


    // 記事一覧ページの場合
    // トップページなら page-index 
    if(document.body.classList.contains("page-archive")){
        var parentElement =document.getElementsByClassName("archive-entries")[0];
        var j = parentElement.childElementCount;
        // 5記事おきに入れる場合
        for(var i=5; i<j; i=i+6) {
            parentElement.insertBefore(adsDiv.cloneNode(true), parentElement.children[i]);
            j++;
        }
    }
}());
</script>

うまくいけば、こうなるはずです。くれぐれも自己責任で。

(現在はインフィード広告は入れていません)

www.movieimpressions.com

タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある
Joomla! 3.8.9 & 3.8.10 セキュリティ & バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com