カード型のブログにインフィード広告を挿入させる

インフィード広告をTOP画面のカードの中に入れてみたので、その方法を紹介します。

まずは完成写真から紹介します。

インフィード広告のカードが挿入されました。
カードが５枚ごとに広告が挿入されるように設定しました。

１．インフィード広告を作成する

Google AdSenseの広告→広告ユニット→新しい広告ユニット

２．インフィード広告を選択する

３．広告のスタイルを作成する

自動で広告スタイルでもいいと思いますが、

カードを認識してくれなかったので、手動で広告スタイルを作成することにしました。

手動で…→上部の画像→次へ

４．広告のスタイルを編集する

だいたい自動で作成されていると思います。

矢印の所で幅を変更できます。

今回は、４６８ピクセルにしました。

あとは、サイドバーのグローバルオプションのパディングで、

写真と文字の比率などを変えられます。

今回は文字の部分を１０ピクセルにしました。

あとは、サイドバーのイメージで写真の大きさの比率などを変更できます。

画像の縦横比は、１．９１：１にしました。

中途半端ですが、自動で作成された比率のままです。

５．保存してコードを取得する

広告ユニット名を決めて、「保存してコードを表示」をクリックする。

広告ユニット名はどんな名前でもいいですが、

インフィード広告であることが分かる方がいいかと思います。

出てきたコードをコピーして、メモ帳にでも貼りましょう。

下記のＡ～Ｃの部分を、後で使います。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<ins class="adsbygoogle"
 style="display:block"
 data-ad-format="fluid"
 data-ad-layout-key="Ａ"
 data-ad-client="Ｂ"
 data-ad-slot="Ｃ">
</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

６．スクリプトを作成する

スクリプトは、コピペです。

先ほどメモ帳にコピーした、Ａ～Ｃの部分を、

下のＡ～Ｃに貼り付けします。

<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 = "Ａ"
 var google_ad_client = "Ｂ";
 var slot ="Ｃ" 
 // ここまで

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>

貼り付け後、全部をフッターに貼り付けます。

フッターは、デザイン→カスタマイズ→フッターです。 

＜今回参考にさせていただいたサイト＞

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

７．完成

冒頭で紹介した完成の形となりました。

インフィード広告のカードの角を丸くしたいんですが、分かりませんでした。

以上です。