あずきです🐥
このブログでも愛用中のWordPressテーマ、「WING（AFFINGER5）」における…
Googleアドセンス広告を、
全記事の「記事おわり」に自動挿入する手順
について、初心者さん向けに1から解説していきます（簡単です♪）
大きく…
- PC表示
- スマホ表示
この2つで手順がわかれます
具体的には、「記事おわりへのアドセンス広告の設置」で一般的とされる…
- PC表示 ⇒ 記事おわりに「並列」で、計2個の広告
- スマホ表示 ⇒ 記事おわりに「単体」で、1個のみの広告
このパターンでの設定方法です
注意ポイント
大前提として、「Googleアドセンス審査」に合格してる必要があります
それではさっそく見ていきましょー🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
AFFINGER5における、「記事おわり」へのアドセンス広告の設置方法【PC＝並列／スマホ＝単体】
はじめに、前提として「Googleアドセンス」の広告コードを取得してる必要があります
で、アドセンスの広告は…
- ディスプレイ広告
- インフィード広告
- 記事内広告
この3つのタイプにわかれますが、今回は「記事内広告」のコードを自動挿入されるよう設定していきます
ただ、どの広告コードでも、今回の「記事おわり」に自動挿入する手順は一緒です
ということで、本題の手順を見ていきましょう🐥
まずは…
↑ WordPress管理画面 ＞ 外観 ＞ ウィジェット をクリックします
ここから…
- 「PC表示」用の設定
- 「スマホ表示」用の設定
この2つにわけて、それぞれ解説していきます
PC表示の場合【記事おわりにアドセンス広告を「並列」で設置】
WordPressの「ウィジェット」設定画面が開けたら、左側の…
↑「カスタムHTML」タブをクリックして開くと…
↑「広告・Googleアドセンス用336px（A）」という項目があるので、こちらを選択しましょう
選択したら、下部の「ウィジェットを追加」をクリックします
すると、右側の…
↑「広告・Googleアドセンス用336px（A）」という欄に、「カスタムHTML」のボックスが新規追加されるので…
↑「内容」のところに、用意しておいた「アドセンスの広告コード」を丸々コピー＆ペイストで貼りつけましょう
貼りつけたら、右下の「保存」をクリックします
これで、広告の「並列」表示のなかの「片方」はOK🐥
つづいて、「もう片方」の設定です
同じく左側の「カスタムHTML」タブをクリックして…
↑ 今度は「広告・Googleアドセンス用336px（B）」という項目を選択して、「ウィジェットを追加」をクリックしましょう
あとは同じように、右側の…
↑「広告・Googleアドセンス用336px（B）」に新規追加された「カスタムHTML」のボックスの…
↑「内容」という欄に、こちらも用意しておいた「アドセンスの広告コード」をコピペで貼りつけます
注意ポイント
「並列」で挿入される2つの広告について、クリック回数や収益などのデータを「別々で計測」したい場合は…
- 広告・Googleアドセンス用336px（A）
- 広告・Googleアドセンス用336px（B）
それぞれに貼りつける広告コードは、「別々」のものを使いましょう
ということで、貼りつけたら「保存」をクリックします
これで、「もう片方」側のウィジェット設定もOK🐥
ただ！
アドセンス広告を「PC表示用で記事おわりに並列」で挿入するには、ここから「もう2つ」設定が必要になります
↑ WordPress管理画面 ＞ AFFINGER5 管理 をクリックしましょう
「AFFINGER5 管理」が開けたら、左側のメニュー一覧から…
↑「投稿・固定記事」タブをクリックすると…
↑ こちらの…
PC閲覧時に記事下のアドセンス広告を横並びにする
という項目があります
拡大すると…
↑ こちら。 この項目に、チェックを入れましょう
そしてもう1つ！
たった今チェックした項目にも説明がある通り、並列で表示させるには…
「PC閲覧時のサイトの幅」を1114px以上
に設定する必要があります
ということで、今度は同じ「AFFINGER5 管理」画面から…
↑ 左側の「デザイン」タブをクリックして開きましょう
すると…
↑「PC閲覧時のサイトの幅」という項目があるので、こちらの数値を 1114（px） 以上に設定します
「1114px以上」ならあとは任意ですが、参考までに僕は「1114」ジャストに設定してます
設定できたら、最後に下部の save をクリックして保存しましょう
これで、設定は一通り完了です
ただ、アドセンス広告が実際に反映されるまでには数十分ほどかかる可能性があります
「キャッシュ削除」と「パーマリンク設定の再保存」をしたうえで、しばらく時間を置いてからチェックしてみましょう
ちなみに実際に反映された広告が…
↑ こちらです（便宜上、モザイクをかけてます）
PC表示用の設定については、これでOK
今度は、「スマホ表示用」の設定を見ていきましょー🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
スマホ表示の場合【記事おわりにアドセンス広告を「単体」で設置】
まずは、同じく WordPress管理画面 ＞ 外観 ＞ ウィジェット をクリックして、「ウィジェット」の設定画面を開きましょう
つづいて、さきほどの「PC表示用」のときと同じように…
↑ 左側の「カスタムHTML」タブを開いたら、今度は「広告・スマホ用記事下のみ」という項目を選択しましょう
選んだら、「ウィジェットを追加」をクリックします
すると、右側の…
↑「広告・スマホ用記事下のみ」という項目に、「カスタムHTML」のボックスが新規追加されるので…
↑ こちらの「内容」という欄に、「アドセンスの広告コード」をコピー＆ペイストでまた貼りつけます
注意ポイント
「PC表示用」の広告とデータ計測を別々にしたい場合は、同じ広告コードは使わずに、この「スマホ表示用・記事おわり」専用の広告コードを使いましょう
ということで、コードを貼りつけたら「保存」をクリックします
「スマホ表示用」の場合、もうこれだけでOK
あとは「PC表示用」のときと同様に…
- キャッシュ削除
- パーマリンク設定の再保存
だけしておいて、数十分ほど置いてから広告が反映されているかチェックしましょう
おしまい♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^