ワードプレス

AFFINGER5で、アドセンス広告を「記事おわり」に自動で挿入する手順【PC並列/スマホ単体】

AFFINGER5_アドセンス広告を記事おわりに自動挿入_アイキャッチ



あずきです🐥

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

Googleアドセンス広告を、
全記事の「記事おわり」に自動挿入する手順

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

大きく…

  • PC表示
  • スマホ表示

この2つで手順がわかれます

具体的には、「記事おわりへのアドセンス広告の設置」で一般的とされる…

  • PC表示 ⇒ 記事おわりに「並列」で、計2個の広告
  • スマホ表示 ⇒ 記事おわりに「単体」で、1個のみの広告

このパターンでの設定方法です

注意ポイント

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

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

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

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

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

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

あずき

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

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

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

Twitter

AFFINGER5における、「記事おわり」へのアドセンス広告の設置方法【PC=並列/スマホ=単体】

はじめに、前提として「Googleアドセンス」の広告コードを取得してる必要があります

で、アドセンスの広告は…

  • ディスプレイ広告
  • インフィード広告
  • 記事内広告

この3つのタイプにわかれますが、今回は「記事内広告」のコードを自動挿入されるよう設定していきます

ただ、どの広告コードでも、今回の「記事おわり」に自動挿入する手順は一緒です

ということで、本題の手順を見ていきましょう🐥

まずは…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-top-01

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

ここから…

  • 「PC表示」用の設定
  • 「スマホ表示」用の設定

この2つにわけて、それぞれ解説していきます

まずはPC用から!

PC表示の場合【記事おわりにアドセンス広告を「並列」で設置】

ブログガイド_見出し_01

WordPressの「ウィジェット」設定画面が開けたら、左側の…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-01

↑「カスタムHTML」タブをクリックして開くと…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-02

↑「広告・Googleアドセンス用336px(A)」という項目があるので、こちらを選択しましょう

選択したら、下部の「ウィジェットを追加」をクリックします

すると、右側の…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-03

↑「広告・Googleアドセンス用336px(A)」という欄に、「カスタムHTML」のボックスが新規追加されるので…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-04

↑「内容」のところに、用意しておいた「アドセンスの広告コード」を丸々コピー&ペイストで貼りつけましょう

コピーは「Ctrl+C」、ペイストは「Ctrl+V」!

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

これで、広告の「並列」表示のなかの「片方」はOK🐥

つづいて、「もう片方」の設定です

同じく左側の「カスタムHTML」タブをクリックして…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-05

↑ 今度は「広告・Googleアドセンス用336px(B)」という項目を選択して、「ウィジェットを追加」をクリックしましょう

あとは同じように、右側の…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-06

↑「広告・Googleアドセンス用336px(B)」に新規追加された「カスタムHTML」のボックスの…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-07

↑「内容」という欄に、こちらも用意しておいた「アドセンスの広告コード」をコピペで貼りつけます

注意ポイント

「並列」で挿入される2つの広告について、クリック回数や収益などのデータを「別々で計測」したい場合は…

  • 広告・Googleアドセンス用336px(A)
  • 広告・Googleアドセンス用336px(B)

それぞれに貼りつける広告コードは、「別々」のものを使いましょう

ということで、貼りつけたら「保存」をクリックします

これで、「もう片方」側のウィジェット設定もOK🐥

ただ!

アドセンス広告を「PC表示用で記事おわりに並列」で挿入するには、ここから「もう2つ」設定が必要になります

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-08

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

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

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-09

↑「投稿・固定記事」タブをクリックすると…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-10

↑ こちらの…

PC閲覧時に記事下のアドセンス広告を横並びにする

という項目があります

拡大すると…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-11

↑ こちら。 この項目に、チェックを入れましょう

そしてもう1つ!

たった今チェックした項目にも説明がある通り、並列で表示させるには…

「PC閲覧時のサイトの幅」を1114px以上

に設定する必要があります

ということで、今度は同じ「AFFINGER5 管理」画面から…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-12

↑ 左側の「デザイン」タブをクリックして開きましょう

すると…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-13

↑「PC閲覧時のサイトの幅」という項目があるので、こちらの数値を 1114(px) 以上に設定します

「1114px以上」ならあとは任意ですが、参考までに僕は「1114」ジャストに設定してます

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

これで、設定は一通り完了です

ただ、アドセンス広告が実際に反映されるまでには数十分ほどかかる可能性があります

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

ちなみに実際に反映された広告が…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-1-14

↑ こちらです(便宜上、モザイクをかけてます)

PC表示用の設定については、これでOK

今度は、「スマホ表示用」の設定を見ていきましょー🐥

スマホの方は、もっと簡単!

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

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

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

スマホ表示の場合【記事おわりにアドセンス広告を「単体」で設置】

ブログガイド_見出し_02

まずは、同じく WordPress管理画面 > 外観 > ウィジェット をクリックして、「ウィジェット」の設定画面を開きましょう

つづいて、さきほどの「PC表示用」のときと同じように…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-2-01

↑ 左側の「カスタムHTML」タブを開いたら、今度は「広告・スマホ用記事下のみ」という項目を選択しましょう

選んだら、「ウィジェットを追加」をクリックします

すると、右側の…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-2-02

↑「広告・スマホ用記事下のみ」という項目に、「カスタムHTML」のボックスが新規追加されるので…

AFFINGER5_アドセンス広告を記事おわりに自動挿入_1-2-03

↑ こちらの「内容」という欄に、「アドセンスの広告コード」をコピー&ペイストでまた貼りつけます

注意ポイント

「PC表示用」の広告とデータ計測を別々にしたい場合は、同じ広告コードは使わずに、この「スマホ表示用・記事おわり」専用の広告コードを使いましょう

ということで、コードを貼りつけたら「保存」をクリックします

「スマホ表示用」の場合、もうこれだけでOK

あとは「PC表示用」のときと同様に…

  • キャッシュ削除
  • パーマリンク設定の再保存

だけしておいて、数十分ほど置いてから広告が反映されているかチェックしましょう

おしまい♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

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

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

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

あずき

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

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

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

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。