BLUE HIP 尻の青いのブログ

尻の青い私ですが、青いなりにいろんなネタ書きます。旅行は断然ホテルから決める派です。

【アドセンス】はてなブログでインフィード広告配置(スマホ版)

f:id:bluehip:20180301184909p:plain

 

 


どうも青尻です。

 

今回はスマホ版Googleアドセンスのインフィード広告の設置方法を説明していきます。

 

まずアドセンス管理画面のサイドメニューより、【広告ユニット】を開きます。

【新しい広告ユニット】をクリックして新規広告を作成していきます。

 

使用するのは『インフィード広告』

f:id:bluehip:20180301211026j:image

 名前は自分が管理しやすいようにどこに設置するのか、PC用なのかスマホ用なのか任意でわかりやい名前で大丈夫です。

私の場合は「SP infeed」と名前をつけています。

 

インフィード広告のユニットはプレビューを見ながら自分の記事一覧画面と似た配置設定に自由にカスタマイズできます。

 

f:id:bluehip:20180302142905j:image

 

サイズは何度でも変えられるので、ある程度自分で作ってみて配置してから微調整していくことも可能です。

 

一応自分の設定を載せておきますね。

 

グローバルオプション

枠線サイズ : 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でコードを作成してくれた管理者の「ケー」様のコードを利用させてもらいます。

ありがとうございます。

www.weblog-life.net

 

 

こちらのコードを一度メモ帳にコピペ。

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

にコピペ

 

 

これでトップページへのインフィード広告の挿入が完成です。

 

 

f:id:bluehip:20180301215340j:image

 

 

 

 

 

最後に 

かなりたくさん調べた上で自分なりにまとめたので、私のブログと同じような配置でいいのならばすぐにできると思いますが、必ず事前にバックアップを取るなどしてから自己責任でお願いします。責任はおい兼ねますので。

 

 

うまくいった方や、参考に少しでもなれば読者登録などよろしくお願いします。

 

 

アドセンス広告設置方法のまとめ記事などもあるのでそちらも見てみてください。

www.blue-hip.com