あずきです🐥
Googleアドセンスにおける…
「ディスプレイ広告」の作り方（広告コードの取得方法）
について、ブログ初心者さん向けに1から解説していきます
具体的には、大きく3つのステップです
- 【本題】ディスプレイ広告のコード取得方法と、おすすめ広告サイズ
- 【補足①】作成済みのディスプレイ広告コードを、あとから再表示する方法
- 【補足②】作成済みのディスプレイ広告を、あとから再編集する方法
さっそく見ていきましょー🐥
はじめに
大前提として、「Googleアドセンス審査」に合格している必要があります
Googleアドセンスのお申し込み手順はこちら ↓
-
【テストコードの貼り方まで】Googleアドセンスの審査に新規申請する手順【WordPressブログ】
続きを見る
Googleアドセンスの審査についてはこちら ↓
-
【本音／本質】Googleアドセンス審査合格のコツを、当時の自分に寄り添うつもりで書いてみた【WordPressブログ】
続きを見る
関連
コードを作成・取得したあとの、アドセンス広告の「貼り方」についてはこちら ↓
「手動」で1つ1つ挿入していく方法
-
WordPressブログにおける、各種「広告コード」の基本的な貼り方【アフィリエイト広告の挿入方法】
続きを見る
※どのテーマでも基本共通のノーマルな手順です
全記事の「各見出し前」に自動挿入する方法
-
AFFINGER5で、アドセンス広告を「n番目の見出し前」に自動で挿入する手順【ブログ】
続きを見る
※このブログでも使用中のテーマ「WING AFFINGER5」における手順です
全記事の「末尾」に自動挿入する方法
-
AFFINGER5で、アドセンス広告を「記事おわり」に自動で挿入する手順【PC並列／スマホ単体】
続きを見る
※同じく「WING AFFINGER5」における手順です
今回の記事はこちらの章に属しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
Googleアドセンスにおける、「ディスプレイ広告」の作り方【広告コードの取得方法／3ステップ】
本題：ディスプレイ広告のコード取得方法と、おすすめ広告サイズ【レスポンシブが便利】
まずは、「Googleアドセンス」にアクセスします
ちなみにアクセスした際に、ログイン後のTOPページではなく…
↑ こちらの画面になる場合は、ログイン状態が保持されていない状態です
その場合、右上の「ログイン」から（Googleアカウントへの）ログインを済ませればOKです
注意
Googleアカウントを複数持ってる場合は、「アドセンス審査のときに使ったアカウント」でログインします
Googleアドセンスの「ログイン後」の画面に入れたら、左側のメニュー一覧から…
↑「広告」をクリックし、つづいて画面上部の…
↑「広告ユニットごと」というタブをクリックします
すると「新しい広告ユニットの作成」という画面が表示されて…
↑ このように…
- ディスプレイ広告
- インフィード広告
- 記事内広告
という「3つ」の広告タイプが表示されるので、このなかから今回は「ディスプレイ広告」を選びましょう
まずは、左上の…
↑「広告ユニットの名前を入力」という欄に、これから作る広告のタイトルを入力します
ここのタイトルはブログの読者から直接見られるものではないので、自分で管理しやすいと思う任意の名前でOKです
今回は例として…
↑ このような名称にしてみました
つづいて、広告の「形状タイプ」を指定していきます
画面右上を見ると…
↑ このように、3つの形状タイプ…
- スクエア
- 横長タイプ
- 縦長タイプ
が用意されているので、このなかから使用するタイプを選択しましょう
広告の「形状」を選んだら、さらに右側の…
↑「広告サイズ」という項目を指定していきます
ここは…
- レスポンシブ
- 固定
という2択になっているんですが、基本的には「レスポンシブ」一択でOKです
この「レスポンシブ」の場合、（ブログ読者が使っている）デバイスの画面ごとでサイズが自動調整されます
ということで、「広告サイズ」も選択できたら、右下の…
↑「作成」ボタンをクリックしましょう
すると…
↑ 作成したディスプレイ広告の「専用コード」が表示されるので、左下の「コードをコピー」をクリックで、このコードを丸々コピーします
ちなみに！
この画面の上部に並んでいる…
- HTML
- AMP
という2つのタブは、通常「HTML」のままでOKです
「広告を貼る予定のページを ”AMP化” させている」という場合のみ、「AMP」側に切り替えます
ということで…
「コードをコピー」をクリックして丸々コピーできたら、右下の「完了」をクリックすれば作成完了です🐥
このコピーしたコードをブログに貼りつけることで、ディスプレイ広告は表示されるようになります
関連
コードを作成・取得したあとの、アドセンス広告の「貼り方」についてはこちら ↓
「手動」で1つ1つ挿入していく方法
-
WordPressブログにおける、各種「広告コード」の基本的な貼り方【アフィリエイト広告の挿入方法】
続きを見る
※どのテーマでも基本共通のノーマルな手順です
全記事の「各見出し前」に自動挿入する方法
-
AFFINGER5で、アドセンス広告を「n番目の見出し前」に自動で挿入する手順【ブログ】
続きを見る
※このブログでも使用中のテーマ「WING AFFINGER5」における手順です
全記事の「末尾」に自動挿入する方法
-
AFFINGER5で、アドセンス広告を「記事おわり」に自動で挿入する手順【PC並列／スマホ単体】
続きを見る
※同じく「WING AFFINGER5」における手順です
注意
WordPressにおける各種設定は、反映までに時間がかかる場合があります
すぐに反映させたいときは、次の方法を試してみてください
- WordPressキャッシュのクリア
- パーマリンク設定の更新
具体的な手順はこちら ↓
-
WordPressで、設定内容が反映されないときにまず試したい2つの対処方法【キャッシュの削除／パーマリンク設定の再保存】
続きを見る
補足①：作成済みディスプレイ広告コードを、あとから再表示する方法【既存の広告ユニット ＞「コードを取得」アイコンから】
ここからは補足です
1つ目は…
作成済みディスプレイ広告コードを、あとから再表示する方法
から
まず作成した広告コードというのは、最初に 広告 ＞ 広告ユニットごと をクリックで表示された…
↑ こちらの画面上で、「既存の広告ユニット」という項目に一覧で表示されます
で！
作成した広告コードをあとからまたコピーしたい場合は、この一覧から…
↑ こちらの「コードを取得」ボタンをクリックすると、いつでもコードを再表示させることができます
補足②：作成済みのディスプレイ広告を、あとから再編集する方法【既存の広告ユニット ＞「編集」アイコンから】
2つ目の補足は…
作成済みのディスプレイ広告を、あとから再編集する方法
について
まずは1つ目の補足と同じく、 広告 ＞ 広告ユニットごと ＞ 既存の広告ユニット の一覧から…
↑ こちらの「編集」ボタンをクリックすると、作成済みのディスプレイ広告をいつでも再編集できます
おしまい♪
あずき（Twitter：@azuki_rinrin）
今回の記事はこちらの章に属しています
関連
「インフィード広告」の取得方法はこちら
-
Googleアドセンス「インフィード広告」の作り方を1から解説【広告コードの取得方法／おすすめは自動】
続きを見る
「記事内広告」の取得方法はこちら
-
Googleアドセンス「記事内広告」の作り方を1から解説【広告コードの取得方法／おすすめの設定例】
続きを見る
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^