どうも青尻です。
今回はスマホ版Googleアドセンスのインフィード広告の設置方法を説明していきます。
まずアドセンス管理画面のサイドメニューより、【広告ユニット】を開きます。
【新しい広告ユニット】をクリックして新規広告を作成していきます。
使用するのは『インフィード広告』
名前は自分が管理しやすいようにどこに設置するのか、PC用なのかスマホ用なのか任意でわかりやい名前で大丈夫です。
私の場合は「SP infeed」と名前をつけています。
インフィード広告のユニットはプレビューを見ながら自分の記事一覧画面と似た配置設定に自由にカスタマイズできます。
サイズは何度でも変えられるので、ある程度自分で作ってみて配置してから微調整していくことも可能です。
一応自分の設定を載せておきますね。
グローバルオプション
枠線サイズ : 0px
パディング : 10 10 10 10px
イメージ
画像の縦横比 : 1:1
サイズ : 70px
パディング : 0 15 5 0 px
見出し
フォントサイズ : 18px
パディング : 0 0 6 0px
説明
フォントサイズ : 10px
パディング : 0 0 0 0px
URL
フォントサイズ : 11px
パディング : 3 0 0 0px
こんな感じです。
保存するとこのようなコードが生成されます。
<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="-00+00-00-00+00"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
これもそのままは使いません。
せっかくの設定をうまく反映させるために、別のスクリプトコードに先ほど生成されたコードを埋め込んで使用します。
一度メモ帳か何かにコピペしておいてください。
GitHubでコードを作成してくれた管理者の「ケー」様のコードを利用させてもらいます。
ありがとうございます。
こちらのコードを一度メモ帳にコピペ。
<script src="//webloglife.github.io/ads_infeed.js" charset="utf-8"></script> <script>
Ads.Infeed.init('<cenetr><ins class="adsbygoogle infeed_slot" style="display:block" data-ad-format="fluid"
data-ad-layout="image-middle"
data-ad-layout-key="-00+00-00-00+00" data-ad-client="ca-pub-0000000000000000" data-ad-slot="0000000000"></ins></center>'); <script>
<style>.infeed_slot{width:100%;height:140px;}</style>
0000000がある行が3箇所あるので最初にアドセンスで生成されたコードからコピペしてコードを完成させます。
更に言うと青文字で140pxと書かれた部分も自分のブログの記事一覧の高さになるべく合わせた方がよく馴染むので微調整してみてください。
完成したコードを、はてなブログの、
デザイン＜スマホ＜フッタ（PRO）
にコピペ
これでトップページへのインフィード広告の挿入が完成です。
最後に
かなりたくさん調べた上で自分なりにまとめたので、私のブログと同じような配置でいいのならばすぐにできると思いますが、必ず事前にバックアップを取るなどしてから自己責任でお願いします。責任はおい兼ねますので。
うまくいった方や、参考に少しでもなれば読者登録などよろしくお願いします。
アドセンス広告設置方法のまとめ記事などもあるのでそちらも見てみてください。
