Google AdSenseのインフィード広告とは、サイトに馴染むデザインやスタイルにカスタマイズできる広告です。Emanon Proでは、フロントページの記事一覧およびアーカイブページの記事一覧(カテゴリーページなど)にインフィード広告を挿入できます。

インフィード広告の設定手順

Emanon Proの記事一覧は、記事一覧型カード型(並列)のレイアウトがあり、それぞれインフィード広告の設定が異なります。下記サンプルでインフィード広告の表示スタイルをご確認ください。

記事一覧型のサンプル

記事一覧型は、横の画像のインフィード広告を使用します。左側に広告画像が配置され、右側に広告見出しと説明文が配置される広告デザインです。

インフィード広告 記事一覧

カード型のサンプル

カード型は、上部の画像のインフィード広告を使用します。上部に広告画像が配置され、その下に広告見出しと説明文が配置される広告デザインです。

インフィード広告 カード型

【注意】サイドバー付きのカード型3列表示の場合、インフィード広告が表示されないケースがあるようです。カード型でインフィード広告を表示したい場合、レイアウトをカード型2列表示にするかサイドバーをなしに設定してください。

インフィード広告用のコード作成

インフィード広告を設定する前に、Google AdSenseのアカウントを取得する必要があります。ここでは、Google AdSenseでインフィード広告用のタグを作成からEmanon Proの設定までご紹介します。

Google AdSenseの管理画面より「新しい広告ユニット」を作成します。

「新しい広告ユニット」を作成

次に作成する広告の種類を選びます。インフィード広告を選択ししてください。

広告の種類

広告ユニット:横の画像の設定

記事一覧用の広告コードを作成する手順です。まず、インフィード広告の作成方法の画面で、横の画像を選択します。

広告スタイル 横の画像

次に、広告ユニットに名前(例 infeed-list)をつけ、インフィード広告のデザイン設定を行います。

グローバルオプション

「選択したディスプレイ広告を表示する」をオフにします。枠線サイズは0、パディングは、全て0に指定します。

グローバルオプション pc

イメージ

アイキャッチ画像の幅は40%、パディングは、右のみ30に指定します。

イメージ PC

見出し

フォントサイズは16px、パディングは、上のみ20に指定します。

見出し PC

URL

パディングは、下のみ16に指定します。

URL PC

ボタン

フォントの色は#000c15、枠線の色の指定は、Emanonの配色設定に合わせてください。

広告ユニット:上部の画像の設定

ボックス用(記事並列)の広告コードを作成する手順です。まず、インフィード広告の作成方法の画面で、上部の画像を選択します。

広告スタイル 上部の画像

次に、広告ユニットに名前(例 infeed-card)をつけ、インフィード広告のデザイン設定を行います。

【注意】上部の画像の広告コードは、スマホからサイト閲覧した場合に利用します。インフィード広告の表示を行う場合、上部の画像の設定は、必須の設定です。

グローバルオプション

「選択したディスプレイ広告を表示する」をオフにします。枠線サイズは0、パディングは、下のみ16に指定します。

グローバルオプション SP

イメージ

パディングは、下のみ26に指定します。

イメージ SP

見出し

パディングは、右と左のみ16に指定します。

見出し SP

URL

パディングは、上と左のみ16に指定します。

URL SP

ボタン

フォントの色は#000c15、枠線の色の指定は、Emanonの配色設定に合わせてください。

Emanon Pro広告設定

横の画像と上部の画像の広告コードをそれぞれコピーし、ウィジェットに貼り付けます。

コードスペニットをコピー

コードスペニットの挿入

WordPressの管理画面>外観>ウィジェットをクリックし、インフィード広告にコードを挿入します。

コードスペニットの挿入

インフィード広告[PC:記事一覧用] には、広告ユニット:(横の画像)のコードスペニットをカスタムHTMLで挿入します。インフィード広告[PCカード型・SP] には、広告ユニット:(上部の画像)のコードスペニットをカスタムHTMLで挿入します。

【注意】インフィード広告[PCカード型・SP] の設定は、必須設定です。

広告設定

WordPress管理画面 > 外観 > カスタマイズ > 広告設定 > 広告の表示ページをクリックすると、下記画面が表示されます。

広告の表示ページ
インフィード広告の表示位置

記事一覧上で、どの位置にインフィード広告を表示するか数値で指定します。

【注意】インフィード広告の表示は、記事件数に影響を受けます。例えば、記事件数が3件の場合、インフィード広告の表示位置を2以下(1か2)に指定します。

インフィード広告の表示ページ

フロントページおよびアーカイブページ(カテゴリー一覧など)でインフィード広告を表示することができます。表示させたいページにチェックを入れてください。