Googleアドセンスに「インフィード広告」というものがあります。
トップページの記事一覧の間に広告が挟まる方式です。
当ブログだと、このようになっています。
記事と記事の間（モザイク部分）にインフォード広告が差し込まれています。
しかし、はてなブログではそのまま貼ろうとしても上手くいかないので、ひと手間加える必要があります。
この記事では、はてなブログにおけるインフィード広告の貼り方を解説していきます。
インフィード広告の取得方法
アドセンス管理画面より、「広告」→「広告ユニットごと」に進み、「インフィード広告」を選択します。
そうすると、インフォード広告の作成方法が出ます。
上のボックスに「ブログのURLを入力」し、「ページをスキャン」を選択します。
「ページをスキャンしてフィードを探しています...」の後に、このような画面になります。
何もいじらず、右下の「次へ」をクリックします。
次の画面の右側にあるボックスに「広告ユニット名を入力」します。
ユニット名は、自分が分かりやすいものなら何でもいいです。
広告ユニット名を入力したら、他はいじらずに「保存してコードを取得」を選択します。
そうすると、コードが表示されます。
※コード部分を画像処理しています
このコードは後で使います。
はてなブログのインフィード広告の貼り方
はてなブログにインフォード広告を貼るには、HTMLとCSSを追加する必要があります。
ここは先人の力（くぜのメモ）を借ります。
【HTML】
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>
// 広告データ
const DATA_AD_LAYOUT_KEY = '***************';
const DATA_AD_CLIENT = 'ca-pub-****************';
const DATA_AD_SLOT = '**********';
// 広告を配置する間隔
const AD_INTERVAL = 5;(function() {
const adScript = document.createElement('script');
adScript.innerHTML = '(adsbygoogle = window.adsbygoogle || []).push({});';const adDiv = document.createElement('div');
adDiv.innerHTML =
'<ins class="adsbygoogle" '
+ 'style="display:block" '
+ 'data-ad-format="fluid" '
+ 'data-ad-layout-key="' + DATA_AD_LAYOUT_KEY + '" '
+ 'data-ad-client="' + DATA_AD_CLIENT + '" '
+ 'data-ad-slot="' + DATA_AD_SLOT + '"></ins>';
adDiv.appendChild(adScript);
// CSS用にクラスを追加
adDiv.classList.add('ad-infeed');if (document.body.classList.contains('page-index')) {
const parentElement = document.getElementsByClassName('archive-entries')[0];
let j = parentElement.childElementCount;
for (let i = AD_INTERVAL; i < j; i = i + AD_INTERVAL + 1) {
parentElement.insertBefore(adDiv.cloneNode(true), parentElement.children[i]);
j++;
}
}
}());
</script>
（引用: 【はてなブログ】ホーム画面にGoogle AdSenseのインフィード広告を挿入する）
「広告データ」の下にある、
const DATA_AD_LAYOUT_KEY = '***************';
const DATA_AD_CLIENT = 'ca-pub-****************';
const DATA_AD_SLOT = '**********';
この「***************」の部分を、先ほど入手したコードの該当部分（英数字や記号）と置き換えます。
一度、このHTMLをメモ帳か何かに貼ると楽です。
置き換えたら、全てコピーして「フッタ」に貼ります。
そして、以下のコードを「デザインCSS」に貼ります。
【CSS】
.ad-infeed {
margin-bottom: 30px;
}
（引用: 【はてなブログ】ホーム画面にGoogle AdSenseのインフィード広告を挿入する）
貼る場所は、はてなブログの管理画面から「デザイン」→「カスタマイズ」に進みます。
最後に「変更を保存」を押せば広告が表示されるので、トップページから確認します。
トップページの記事数は奇数にする
トップページに表示する記事数は奇数にします。
そうしないと、不自然な空白ができてしまいます。
記事数は、はてなブログの管理画面の「設定」→「詳細設定」の「トップページの記事数」から変更できます。
デフォルトだと5記事ごとにインフォード広告が表示されるようになっています。
もし広告の間隔を変更したい場合は、先ほどの【HTML】内の、
// 広告を配置する間隔
const AD_INTERVAL = 5;
この部分の「5」を希望の数字に変更します。
まとめ
以上、「はてなブログにインフォード広告を貼る方法（とカスタマイズ方法）」でした。
ブログのテーマや構成、記事数と照らし合わせつつ、見栄えが悪くならない程度にインフォード広告を添えるのが一番いいと思います。
はてなブログの記事内の任意の場所にアドセンスを貼る方法はこちらをご覧ください。
・はてなブログでGoogle AdSense合格後にやること｜アドセンスの貼り方解説
