WORDPRESS

AFFINGER5で、アドセンスの「インフィード広告」を記事一覧に挿入する手順【ブログ】

AFFINGER5で、アドセンスの「インフィード広告」を記事一覧に挿入する手順 アイキャッチ



あずきです🐥

このブログでも愛用中のWordPressテーマ、「WING(AFFINGER5)」における…

Googleアドセンスの「インフィード広告」を
記事一覧に挿入する手順

について、初心者さん向けに1から解説していきます(簡単です♪)

まず、今回インフィード広告を設置していく「記事一覧」とは、具体的には…

  • トップページの「新着記事」一覧
  • 各記事おわりに表示される、「関連記事」一覧

です

画像で見ると、それぞれ次の通り

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_top-01

「新着記事」一覧のインフィード広告例(便宜上、モザイクをかけてます)

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_top-02

「関連記事」一覧のインフィード広告例(便宜上、モザイクをかけてます)

それではさっそく見ていきましょー🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

AFFINGER5における、「アドセンスのインフィード広告」の記事一覧への挿入方法

【はじめに】「インフィード広告」のコードを取得【トップページURLを入力】

WordPressブログ「完全初心者」ガイド 見出し a-01

はじめに、Googleアドセンスの公式サイトで「インフィード広告」のコードを取得してることが前提となります

注意ポイント

大前提として、「Googleアドセンス審査」に合格している必要があります

で、今回のように「記事一覧」にインフィード広告を挿入する場合は、この「コード取得」のときに…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_1-01

↑ こちらの「自動で広告スタイルを作成する」を選択して、かつ…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_1-02

↑ URL欄には、ブログの「トップページURL」を入力して、広告コードを取得しましょう

そうすることで、「記事一覧」エリアに溶け込む広告デザインを作れます

ちなみに「モバイル」or「デスクトップ」は、AFFINGER5の場合は「モバイル」でOKです

この「インフィード広告」コードの具体的な取得手順については、↓ をどうぞ♪

Googleアドセンス「インフィード広告」の作り方 アイキャッチ
Googleアドセンス「インフィード広告」の作り方を1から解説【広告コードの取得方法/おすすめは自動】

続きを見る

ということで、広告コードを無事取得できたら、本題の設置作業です🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン」の無料配布キャンペーン中!

インフィード広告を記事一覧に挿入する【ウィジェットの「HTMLカスタム」を使う】

WordPressブログ「完全初心者」ガイド 見出し a-02

WING(AFFINGER5)」でインフィード広告を記事一覧に挿入するには、「ウィジェット機能」を使います

まずは…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_2-01

↑ WordPress管理画面 > 外観 > ウィジェット をクリックしましょう

ウィジェット画面が開いたら、左側の…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_2-02

↑「カスタムHTML」というタブを探して、クリックします

するとメニューが開くので…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_2-03

↑「広告・Googleインフィード広告」を選択して、「ウィジェットを追加」をクリックします

これで、右側の「広告・Googleインフィード広告」というタブが開いて…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_2-04

↑「カスタムHTML」が1つ追加され、開いた状態になります

このなかの「内容」という欄に…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_2-05

↑ 取得した「インフィード広告」のコードを丸々コピペで貼りつけましょう

コピペは、コピーが「Ctrl+C」で、貼りつけが「Ctrl+V」!

貼りつけたら、「保存」をクリックします

これで、「ウィジェット」側の作業はもうOK🐥

つづいて、「AFFINGER5 管理」から「インフィード広告の表示設定」をしていきます(一瞬です♪)

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_3-01

↑ WordPress管理画面 > AFFINGER5 管理 をクリックしましょう

「AFFINGER5 管理」が開いたら、左側のメニュー一覧から…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_3-02

↑「Google連携 / 広告」タブをクリックします

「Google連携 / 広告」タブが開けたら、そのなかの…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_3-03

↑「インフィード広告の設定」という欄を見ましょう

ここで、インフィード広告の「記事一覧への挿入パターン」を指定できます

例えば「3」と入力すると、記事一覧の上から5件ごとにインフィード広告が挿入されます

つまり…

記事A
記事B
記事C
インフィード広告
記事D
記事E
記事F
インフィード広告

こんな具合ですね

ここの数字は任意ですが、参考までに僕が実際に使ってる設定が…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_3-04

↑ 上から 5 / 3 / 3 になります

設定できたら、下部の save を忘れずにクリックして保存しましょう

これで、表示設定もOK🐥

ちなみに、設定ができても「実際に反映されるまで」には、数十分もしくはそれ以上かかる可能性があります

「キャッシュの削除」と「パーマリンク設定の再保存」をしておいて、あとは時間を置いてからチェックしてみましょう

時間を置いてからプレビューで確認してみると、まずトップページの記事一覧では…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_3-05

↑ こんな感じに表示されました(便宜上、モザイクをかけてます)

各記事おわりの「関連記事」一覧だと…

AFFINGER5_アドセンスのインフィード広告を記事一覧に挿入_3-06

↑ こんな感じです

おしまい♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ