今までに数回、Google AdSenseからのメールで紹介されていたインフィード広告。 「サイトに馴染むデザインで、読み手にも違和感を与えないインフィード広告を入れてみませんか～」みたいな。
インフィード広告を作成する
今までは「ふ～ん」って感じだったのですが、今回使ってみることにしました。 参考にさせて頂いたサイトさん（↓）。 Google AdSenseにログイン後、インフィード広告の設定を一つ一つ画像入りで丁寧に説明してくれています。 （なので、一つ一つの具体的な手順はここには書きません。）
affiliate-couple.hatenablog.com
インフィード広告を作成し「保存してコードを取得」すると、スクリプトコードが表示されます。 この「コード スニペット」をメモ帳等にコピペしておきます。
スクリプトコードをはてなブログに設置する
貼り付けるコードを作成する
先ほどメモ帳等にコピペしたコードスニペットを見ると、下記のような箇所を見つけることができると思います。
data-ad-layout-key="-xx+xx-xx-xx+xx"
data-ad-client="ca-pub-0yyyyyyyyyyyyyyy"
data-ad-slot="zzzzzzzzzz"
このx・y・zの部分を下記コードのx・y・zの場所に書き込みます。
<script src="//webloglife.github.io/ads_infeed.js" charset="utf-8"></script>
<script>
Ads.Infeed.init('<center><ins class="adsbygoogle infeed_slot" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-client="ca-pub-0yyyyyyyyyyyyyyy" data-ad-layout-key="-xx+xx-xx-xx+xx" data-ad-slot="zzzzzzzzzz"></ins></center>');
</script>
<style>.infeed_slot{width:100%;height:○○○px;margin-top: -○○px;padding-bottom: ○○px;}</style>
また、青字の〇〇とある箇所に数字を書き込みます。 ここは使っているブログデザインによって異なります。
ちなみに当ブログでは以下のようにしてあります。
<style>.infeed_slot{width:100%;height:210px;margin-top: -18px;padding-bottom: 22px;}</style>
コードを貼り付ける
はてなブログの管理画面から「デザイン」→「カスタマイズ」→「フッタ」と進み、フッタのHTMLを書き込む場所に、上で作成したコードを貼り付けます。
まとめ
一番始めのインフィード広告を作成する段階で、広告のデザイン、コンテナの幅、広告に表示される画像サイズなども決めることができます。 また、一度コードを設置してしまえば、後で設定内容を変えてもコードを再度貼りなおす必要はなく、変更した内容が更新されるようです。
当ブログのトップページは記事一覧になっており、表示される記事数は10個にしてあります。 そこに4つほどのインフィード広告が現れています。 ただ、次のページも同じように4つの広告が現れるかというとそうでもないようで・・・。 どんなものか暫く様子を見ようと思います。
