【はてなブログ】一覧ページにインフィード広告を設定しました

こんにちは。

GoogleAdscenceのはてなブログの記事一覧ページにインフィード広告を設定しました。

インフィード広告とは

記事一覧のページの「記事（コンテンツ）」と「記事（コンテンツ）」の間に挿入されている広告をインフィード広告といいます。

投稿記事の文中に表示される広告と違うのは、コンテンツの形式に合わせて馴染むように設定できる点です。

インフィード広告の設定

Google Adscenceのページから、「コンテンツ」→「新しい広告ユニット」をクリックします。

インフィード広告を選択します。

自動で広告スタイルを作成するを選択します。よくわからない人はこちらがおすすめです。

細部を自分で設定したい方は「手動で広告スタイルを設定する」を選択してください。

①URLにサイトアドレスを入れます。

②「モバイル」か「DESKTOP」か選択します。

③「ページをスキャン」をクリックします。

④ページスキャンが終わると、広告設定画面になります。

⑤サイトに合わせてお好みで詳細設定をしてください。

「グローバルオプション」で「選択したディスプレイ広告を許可する」は「ＯＮ」がおすすめです。

⑥設定後、「保存してコードを取得」をクリックしてください。コードが生成されました。

はてなブログに広告を入れる

通常、はてなブログに広告を設置する場合は、ダッシュボードから「デザイン」→「カスタマイズ」で「記事」や「フッタ」など広告を挿入したい個所にコードを貼り付けるだけでＯＫなのですが、インフィード広告のコードはどこに貼り付けたらいいのかわかりづらいです。

こちらの記事を参考にさせていただきました。

はてなブログで記事一覧ページにAdSenseを挟みこむカスタマイズ – naenote.net

「デザイン」→「カスタマイズ」→「フッタ」にお借りしたコードを貼り付けます。

自分のアドセンスＩＤと広告コードを書き換えました。

こちらのコードでは、広告の表示箇所の設定もできます。

デフォルトでは「5、15、25、35」と挿入箇所の設定がされています。それぞれの箇所に挿入する広告の設定でもできます。一番最初（５か所目）に広告コードを入力すると、ほかの箇所にも表示されます。

また、数字を変えて表示箇所を変えることもできます。

わたしはこの数字を少し変えました。

モバイル設定

インフィード広告はそれぞれの一覧表示に合わせて設定できるので、デスクトップとモバイル用と別のものを準備しました。

レスポンシブデザインを設定しているので、スマートフォン用にコードを記述しなくても、インフィード広告は表示されているのですが、デスクトップ用の広告表示になっているのが気になり、スマートフォン用の設定もしてみようと思います。

「デザイン」→「スマートフォン」→「フッタ」を選択します。

「スマートフォン用にHTMLを設定する」をクリックし、先ほどと同じコードを貼り付けます。広告コードをモバイル用にします。

サイトを開いて、広告が表示されるかチェックします。