WORDPRESS

Googleアドセンス「ディスプレイ広告」の作り方を1から解説【広告コードの取得方法/レスポンシブがおすすめ】

Googleアドセンス「ディスプレイ広告」の作り方 アイキャッチ



あずきです🐥

Googleアドセンスにおける…

「ディスプレイ広告」の作り方(広告コードの取得方法)

について、ブログ初心者さん向けに1から解説していきます

具体的には、大きく3つのステップです

  • 【本題】ディスプレイ広告のコード取得方法と、おすすめ広告サイズ
  • 【補足①】作成済みのディスプレイ広告コードを、あとから再表示する方法
  • 【補足②】作成済みのディスプレイ広告を、あとから再編集する方法
簡単だよ!

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

 

はじめに

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

Googleアドセンスのお申し込み手順はこちら ↓

Googleアドセンスの審査に新規申請する手順 アイキャッチ
【テストコードの貼り方まで】Googleアドセンスの審査に新規申請する手順【WordPressブログ】

続きを見る

 

Googleアドセンスの審査についてはこちら ↓

Googleアドセンス審査合格のコツ アイキャッチ
【本音/本質】Googleアドセンス審査合格のコツを、当時の自分に寄り添うつもりで書いてみた【WordPressブログ】

続きを見る

 

関連

コードを作成・取得したあとの、アドセンス広告の「貼り方」についてはこちら ↓

 

「手動」で1つ1つ挿入していく方法

WordPressブログにおける、各種「広告コード」の基本的な貼り方 アイキャッチ
WordPressブログにおける、各種「広告コード」の基本的な貼り方【アフィリエイト広告の挿入方法】

続きを見る

※どのテーマでも基本共通のノーマルな手順です

 

全記事の「各見出し前」に自動挿入する方法

AFFINGER5で、アドセンス広告を「n番目の見出し前」に自動で挿入する手順 アイキャッチ
AFFINGER5で、アドセンス広告を「n番目の見出し前」に自動で挿入する手順【ブログ】

続きを見る

※このブログでも使用中のテーマ「WING AFFINGER5」における手順です

 

全記事の「末尾」に自動挿入する方法

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

続きを見る

※同じく「WING AFFINGER5」における手順です

 

今回の記事はこちらの章に属しています

WordPressブログガイド 第8章「広告」編 

あずきのWordPressブログガイド 総合TOP 

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

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

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

About me

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

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

あずき

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

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

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

Twitter

Googleアドセンスにおける、「ディスプレイ広告」の作り方【広告コードの取得方法/3ステップ】

本題:ディスプレイ広告のコード取得方法と、おすすめ広告サイズ【レスポンシブが便利】

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

まずは、「Googleアドセンス」にアクセスします

ちなみにアクセスした際に、ログイン後のTOPページではなく…

Googleアドセンスの「ディスプレイ広告」の作り方 1-01

↑ こちらの画面になる場合は、ログイン状態が保持されていない状態です

その場合、右上の「ログイン」から(Googleアカウントへの)ログインを済ませればOKです

 

注意

Googleアカウントを複数持ってる場合は、「アドセンス審査のときに使ったアカウント」でログインします

 

Googleアドセンスの「ログイン後」の画面に入れたら、左側のメニュー一覧から…

Googleアドセンスの「ディスプレイ広告」の作り方 1-02

↑「広告」をクリックし、つづいて画面上部の…

Googleアドセンスの「ディスプレイ広告」の作り方 1-03

↑「広告ユニットごと」というタブをクリックします

すると「新しい広告ユニットの作成」という画面が表示されて…

Googleアドセンスの「ディスプレイ広告」の作り方 1-04

↑ このように…

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

という「3つ」の広告タイプが表示されるので、このなかから今回は「ディスプレイ広告」を選びましょう

ここから、実際にブログへ貼っていく広告の編集作業に入るよ

まずは、左上の…

Googleアドセンスの「ディスプレイ広告」の作り方 1-05

↑「広告ユニットの名前を入力」という欄に、これから作る広告のタイトルを入力します

ここのタイトルはブログの読者から直接見られるものではないので、自分で管理しやすいと思う任意の名前でOKです

今回は例として…

Googleアドセンスの「ディスプレイ広告」の作り方 1-06

↑ このような名称にしてみました

どのエリアに貼る広告か、自分でわかるような名前がおすすめ!

つづいて、広告の「形状タイプ」を指定していきます

画面右上を見ると…

Googleアドセンスの「ディスプレイ広告」の作り方 1-07

↑ このように、3つの形状タイプ…

  • スクエア
  • 横長タイプ
  • 縦長タイプ

が用意されているので、このなかから使用するタイプを選択しましょう

画面中央のプレビューを参考に選ぼう!

広告の「形状」を選んだら、さらに右側の…

Googleアドセンスの「ディスプレイ広告」の作り方 1-08

↑「広告サイズ」という項目を指定していきます

ここは…

  • レスポンシブ
  • 固定

という2択になっているんですが、基本的には「レスポンシブ」一択でOKです

この「レスポンシブ」の場合、(ブログ読者が使っている)デバイスの画面ごとでサイズが自動調整されます

ということで、「広告サイズ」も選択できたら、右下の…

Googleアドセンスの「ディスプレイ広告」の作り方 1-09

↑「作成」ボタンをクリックしましょう

すると…

Googleアドセンスの「ディスプレイ広告」の作り方 1-10

↑ 作成したディスプレイ広告の「専用コード」が表示されるので、左下の「コードをコピー」をクリックで、このコードを丸々コピーします

ちなみに!

この画面の上部に並んでいる…

  • HTML
  • AMP

という2つのタブは、通常「HTML」のままでOKです

「広告を貼る予定のページを ”AMP化” させている」という場合のみ、「AMP」側に切り替えます

「AMP化ってなに…?」という人は、ここでは気にしなくてOK!

ということで…

「コードをコピー」をクリックして丸々コピーできたら、右下の「完了」をクリックすれば作成完了です🐥

このコピーしたコードをブログに貼りつけることで、ディスプレイ広告は表示されるようになります

 

関連

コードを作成・取得したあとの、アドセンス広告の「貼り方」についてはこちら ↓

 

「手動」で1つ1つ挿入していく方法

WordPressブログにおける、各種「広告コード」の基本的な貼り方 アイキャッチ
WordPressブログにおける、各種「広告コード」の基本的な貼り方【アフィリエイト広告の挿入方法】

続きを見る

※どのテーマでも基本共通のノーマルな手順です

 

全記事の「各見出し前」に自動挿入する方法

AFFINGER5で、アドセンス広告を「n番目の見出し前」に自動で挿入する手順 アイキャッチ
AFFINGER5で、アドセンス広告を「n番目の見出し前」に自動で挿入する手順【ブログ】

続きを見る

※このブログでも使用中のテーマ「WING AFFINGER5」における手順です

 

全記事の「末尾」に自動挿入する方法

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

続きを見る

※同じく「WING AFFINGER5」における手順です

 

注意

WordPressにおける各種設定は、反映までに時間がかかる場合があります。 すぐに反映させたいときは、次の「2つの方法」を試してみてください

 

① WordPressキャッシュのクリア

② パーマリンク設定の更新

 

具体的な手順はこちら ↓

WordPressで、設定内容が反映されないときにまず試したい2つの対処方法 アイキャッチ
WordPressで、設定内容が反映されないときにまず試したい2つの対処方法【キャッシュの削除/パーマリンク設定の再保存】

続きを見る

 

補足①:作成済みディスプレイ広告コードを、あとから再表示する方法【既存の広告ユニット >「コードを取得」アイコンから】

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

ここからは補足です

1つ目は…

作成済みディスプレイ広告コードを、あとから再表示する方法

から

まず作成した広告コードというのは、最初に 広告 > 広告ユニットごと をクリックで表示された…

Googleアドセンスの「ディスプレイ広告」の作り方 1-11

↑ こちらの画面上で、「既存の広告ユニット」という項目に一覧で表示されます

で!

作成した広告コードをあとからまたコピーしたい場合は、この一覧から…

Googleアドセンスの「ディスプレイ広告」の作り方 1-12

↑ こちらの「コードを取得」ボタンをクリックすると、いつでもコードを再表示させることができます

 

補足②:作成済みのディスプレイ広告を、あとから再編集する方法【既存の広告ユニット >「編集」アイコンから】

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

2つ目の補足は…

作成済みのディスプレイ広告を、あとから再編集する方法

について

まずは1つ目の補足と同じく、 広告 > 広告ユニットごと > 既存の広告ユニット の一覧から…

Googleアドセンスの「ディスプレイ広告」の作り方 1-13

↑ こちらの「編集」ボタンをクリックすると、作成済みのディスプレイ広告をいつでも再編集できます

 

おしまい♪

あずき(Twitter:@azuki_rinrin

今回の記事はこちらの章に属しています

WordPressブログガイド 第8章「広告」編 

あずきのWordPressブログガイド 総合TOP 

 

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

 ✔ 洗練された美しいデザインと、「変幻自在」な圧巻のバリエーション!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

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

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

関連:「AFFINGER5」の購入&導入ステップを画像つきで1から解説

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

About me

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

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

あずき

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

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

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

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ