ウミノマトリクス

パワーサラリーマンブログ:世界を勝手に4分割。独自の視点と方法で問題を解決していこう。ダイエットサラリーマンのライフログ、転職5回からホワイト企業への転職ノウハウ、サプリメント管理士としての健康ハック、投資・仮想通貨への投資など幅広い雑記ブログ @uminoxhiro

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

おすすめ記事
最終更新日時:

f:id:umihiroya:20200116172129p:plain

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

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


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

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

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

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

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

 

目次

 

はてなブログを運営している人に、トップページにGoogleアドセンスのインフィード広告を入れる方法をお伝えします。

まず前提としてGoogle AdSenseの審査に通過している必要があります。

Google AdSenseの審査の通貨についてはいろいろなサイトでご紹介されていると思いますのでこの記事では割愛します。

※はてなブログProに登録している人限定の作業になります。

Google AdSenseを開く

Google AdSenseの画面を開きます。

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

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

f:id:umihiroya:20200116161124p:plain

 

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

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

f:id:umihiroya:20200116162028p:plain

 

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

ブログをスキャン

f:id:umihiroya:20200116162119p:plain

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

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

広告のコードを取得

f:id:umihiroya:20200116162713p:plain

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

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

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

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

 

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

  <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

最後にコードを貼り付けて終わり

最後にはてなブログのデザイン画面に貼り付けて終わりです。

  1. はてなブログに戻ってください
  2. ①「デザイン」画面を開く
  3. ②フッタをクリック
  4. ③コード入力欄に作成したコードを貼り付け
  5. ④保存

 

f:id:umihiroya:20200116165040p:plain

 

広告が反映されるまでしばらく時間がかかる場合があるので、気長に待ってください。

レスポンシブのテーマの人は以上の作業で完了です。

レスポンシブではなくスマホはスマホのデザインの人はスマホ用にも同じくコードをフッタに貼り付けてください。 

参考にしたブログ記事

まとめ

今回ははてなブログProのユーザーに向けての記事でしたがこれからもブログの運営やカスタマイズの記事がかけるように私も日々勉強していきたいと思います。

カスタマイズするときはくれぐれも「バックアップ」を忘れずに!

はてなブログをやっている人は是非とも読者登録お願いします!

関連記事
  1. ブログのネタに困ったら「ウォーキング」をしてみたらいいという理由
  2. 仕事のストレス発散にウォーキングが効果的な4つの理由

参加お題

  1. お題「あなたがやってるブログのカスタマイズを教えて下さい」