【収益化】アドセンスのレスポンシブ広告をワードプレスのシンプリシティーで設定

ブログを収益化（マネタイズ）するため、AdSense（アドセンス）の広告の設定をしています。

すでに、WordPress（ワードプレス）で AdSense の広告の設定が済んでいますが、今回は「レクタングル」を「レスポンシブ」に置き換えてみます。

子テーマ「Simplicity2 child」の「有効」を確認

まずは WordPress で、設定されているテーマを確認しました。
もちろん以下のように、子テーマ「Simplicity2 child」を有効化してありました。

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

wp-simplicity.com

ウィジェットの広告の中を確認

以前 WordPress のウィジェット画面で設定した、広告ユニットコードを貼り付けるための領域を確認しました。

【収益化】アドセンスのレクタングル広告をワードプレスのシンプリシティーで設定しました

ブログを収益化（マネタイズ）するため、AdSense（アドセンス）の広告の設定をしています。前回は、自分のサイトと AdSense の接続までうまくいきました。まずは、子テーマ「Si...

blog.yanokou.com

2018.04.21

作業手順：

1. サイドメニュー > 外観 > ウィジェット へと移動
2. 「広告 336×280 」と「広告 300×250」に、それぞれ「カスタム HTML」が追加してあることを確認
3. あとで広告ユニットコードを設定し直すため、この画面を開いたままの状態で維持

それぞれの「カスタム HTML」の中には、以前設定した「レクタングル（大）」と「レクタングル」の広告ユニットコードが記述してあります。

つぎにレスポンシブの広告ユニットの作成

Google AdSense（グーグル・アドセンス）で、次のようにして、広告ユニットを作成しました。

新しい広告ユニットの作成

作業手順：

1. メニュー > 広告の設定 > 広告ユニット と移動
2. 「＋新しい広告ユニット」をクリック

作成する広告の種類の選択

作業手順：

1. 「テキスト広告とディスプレイ広告」をクリック

広告の名前とサイズとタイプを指定

新しい広告ユニットの名前や広告サイズなどを決めます。

作業手順：

1. 名前には、あとで見て分かるような名前を指定
2. 広告サイズが、「自動サイズ レスポンシブ」であることを確認
3. 広告タイプが、「テキスト広告とディスプレイ広告」であることを確認
4. 「保存してコードを取得」ボタンをクリック
5. 表示された「広告コード」ウィンドウで、広告コードをすべて選択してコピー

結果として「自動サイズ レスポンシブ」の広告ユニットコードが、コピーされました。

最後に、広告ユニットコードを貼り付け

WordPress に戻って、次のようにして、広告ユニットコードを貼り付けました。

作業手順：

1. 「広告 336×280」の「カスタム HTML」をクリックして開く
2. タイトルには、あとで見て分かるような名前を指定
3. 内容には、先ほどコピーした「自動サイズ レスポンシブ」の広告ユニットコードを貼り付ける
4. 「保存」ボタンをクリック

なお、同じ「自動サイズ レスポンシブ」の広告ユニットコードを「広告 300×250」の「カスタム HTML」にも、貼り付けました。

AdSense広告を設定するためには、「広告 336×280」と「広告 300×250」の両方の設定が必要です。

レスポンシブ広告の表示

ボクは、サイドバートップに広告を表示する設定にしています。

広告ユニットコードを「366×280 レクタングル（大）」や「300×250 レクタングル」から「自動サイズ レスポンシブ」に変えると、

• 

• 

パソコンでは、サイドバートップに表示されている広告が、「300×250 レクタングル」から「300×600 ラージ スカイスクレーパー」になっていました。

• 

• 

またモバイルでは、記事の下に表示されている広告が、広告の縦横の比率（アスペクト比）を維持したまま、横幅いっぱいまで拡大されました。

広告は、大きい方がクリック率が上がるので、このようなサイズになっているのだと思われます。

統計を取りたいとき（参考）

どの広告で成果があったのか、統計を取りたい場合には、次のようにします。

作業手順：

1. Google で「広告 336×280」用の「自動サイズ レスポンシブ」の広告ユニットを作成し、そのコードをコピー
2. WordPress で「広告 336×280」の「カスタム HTML」にコードを貼り付ける
3. Google で「広告 300×250」用の「自動サイズ レスポンシブ」の広告ユニットを作成し、そのコードをコピー
4. WordPress で「広告 300×250」と「カスタム HTML」にコードを貼り付ける

任意の場所に広告を置いて、統計を取りたい場合にも同様にします。

パフォーマンス追求広告の表示

サイドメニュー > カスタマイズ > 広告 で、「パフォーマンス追求広告の表示」にチェックをいれると、ウィジェット画面に「広告 320×100」と「広告 728×90」が追加されます。

追加で「広告 320×100」の広告ユニットコードを「320×100 ラージ モバイル バナー」から「自動サイズ レスポンシブ」に変えました。

サイドバートップに広告を表示する設定にすると、「広告 728×90」はどこにも表示されません。

レスポンシブ広告の調整

「広告 320×100」は、モバイル用の設定です。

「広告 320×100」の広告ユニットコードを「自動サイズ レスポンシブ」に変えると、最初は広告「300x280px レクタングル」が表示され、記事を下に押し下げてしまいました。

たしか、ポリシー違反のはずです。

そのままでは良くないので、レスポンシブ広告に高さを指定して、大きな広告で記事を下に押し下げないようにしました。

レスポンシブ広告の設定

WordPress で、次のようにして、広告ユニットコードを貼り付けました。

作業手順：

1. 左側の利用できるウィジェットの中から「カスタム HTML」を「広告 320×100」に追加（追加対象をクリックすると、追加先を選択できます）
2. 「広告 320×100」の「カスタム HTML」をクリックして開く
3. タイトルには、あとで見て分かるような名前を指定
4. 内容には、先ほどコピーした「自動サイズ レスポンシブ」の広告ユニットコードを貼り付ける
5. 広告ユニットコードの insタグのスタイル（style）に、追加で高さを指定

   <!-- 放浪Ｊ－レスポンシブ広告 -->
   <ins class="adsbygoogle"
        style="display:block; height:100px"
        ～></ins>

6. 「保存」ボタンをクリック

この広告は、モバイルの記事の上に表示されます。

広告領域に『「テキスト」ウィジェットを用いて』と書いてありますが、「カスタム HTML」ウィジェットの使用をおすすめします。

【HTML】ワードプレスへのコード追加で「テキスト」ウィジェットはもう使わない！

あなたは、WordPress のウィジェットに、Google AdSense、カスタム検索やアフィリエイトなどのコードを追加するとき、どのウィジェットを使っていますか？ボクは最近、よ...

blog.yanokou.com

2018.07.12

レスポンシブ広告の表示

• 

• 

モバイルでは、記事の上に表示されている広告が、横幅いっぱいまで拡大されました。
サイズが決まっている広告の場合は、中央に表示されて両脇に隙間が空きます。

あとがき

レスポンシブ広告にすると全体的に、広告のサイズが大きくなるようです。
大きな広告は、クリック率が高くなるそうなので、取り入れたいところです。

ただ、もし大きな広告のせいで、間違えてクリックしてしまったとなると、問題です。
ブログを読んでくれている方の気分を害してしまいます。

最適な答えを見つけるため、いろいろと試行錯誤してみないといけませんね。