はてなブログのトップページにGoogleアドセンスのインフィード広告を入れる方法【コピペでOK】

最終更新日時：2020年3月26日

f:id:umihiroya:20200116172129p:plain

Google AdSenseをうまい感じに記事一覧ページに表示させる方法知りたいな。

なんだか、広告を貼り付けるのって大変そう

この記事は次のような方にオススメの記事です。

はてなブログProでブログ運営をしていて記事一覧（トップページ）にインフィード広告を入れたい人。
はてなブログでブログを運営して収益化を考えている人

アラサー、都内在住ダイエットサラリーマンの海野浩康（@uminoxhiro）が上記の読者様に向けて執筆しました。

アシスタントの空知瑞夏（@sorachimizuka）よ！こんな人はこの記事読んだほうがいいかもね！

✓この記事で得ることのできる情報 ●はてなブログの記事一覧ページにGoogle広告をうまいこと入れれる方法が学べます。

Google AdSenseを開く

Google AdSenseの画面を開きます。

左の「広告」をクリックして「サマリー」をクリック。

「サイトごと」と「広告ユニットごと」というタブがあるので、「広告ユニットごと」をクリックします。

f:id:umihiroya:20200116161124p:plain

次に、自分のブログのアドレスを入力します。

はじめのデフォルトのままで大丈夫です。
ブログのアドレスを入力してください。
モバイルからDesktopにタブを変更してください。
最後に「ページをスキャン」をクリックしてください。

f:id:umihiroya:20200116162028p:plain

するとしばらくGoogleがブログをスキャンしてくれますのでしばらくお待ち下さい。

ブログをスキャン

f:id:umihiroya:20200116162119p:plain

スキャンが完了すると次の画面が現れます。

ページに最適化された広告が生成されますので右下にある「次へ」をクリック。

広告のコードを取得

f:id:umihiroya:20200116162713p:plain

このページでは、広告のコードを取得します。

わかりやすい広告の名前をつけましょう。
グローバルオプションを選んでください。（はじめからなっているかも）
ONになっているかを確認してください。（はじめからなっているかも）
最後に「保存してコードを取得」をクリックしてください。

コードが生成されたらコードをコピーしてください。

メモ帳なんかに貼り付けておくと便利かもしれません。

コードを取得したら下記のコードに当てはめてください。

  <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 key = "AAAAAAAAAAAAAAAAA"
    var google_ad_client = "BBBBBBBBBBBBBBBBBBBBBB";
    var slot ="CCCCCCCCCC" 
    // ここまで
    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>

https://gist.githubusercontent.com/ksakae1216/151c4edf5323d266a5443b062d22cb75/raw/139ae44d372124beedd712a3bb3e7b61f739bad6/adsence2

①、②、③の自分のコードを貼り付けてください。

f:id:umihiroya:20200116164504p:plain