はじめてパパのしおり

育児記録、旅行や街の情報、物のレビューなどしていきます

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

f:id:pop-ran:20190324161716j:plain

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

  

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

f:id:pop-ran:20190322120106p:plain

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

 

  

1.インフィード広告を作成する

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

f:id:pop-ran:20190322121845p:plain

 

2.インフィード広告を選択する

 

f:id:pop-ran:20190322122350p:plain

 

3.広告のスタイルを作成する

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

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

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

f:id:pop-ran:20190322122702p:plain

 

4.広告のスタイルを編集する

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

f:id:pop-ran:20190322123455p:plain

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

今回は、468ピクセルにしました。

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

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

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

 

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

画像の縦横比は、1.91:1にしました。

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

 

5.保存してコードを取得する

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

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

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

 

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

下記のA~Cの部分を、後で使います。

<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>

 

 

6.スクリプトを作成する

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

先ほどメモ帳にコピーした、A~Cの部分を、

下のA~Cに貼り付けします。

 

<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

 

7.完成

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

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

 

以上です。