Googleアドセンスをレスポンシブ表示させる方法【縦長や横長の広告もOK】

アドセンス初心者

Googleアドセンスレスポンシブ表示させるのってどうやるの?

Googleアドセンスをレスポンシブ表示させるのってどうやるの?

広告を縦長や横長で表示させたいんだけやり方を教えてください。
もう、Googleアドセンスの貼り方とかわけわかんねー…

こんなお悩みを解決します。

✔︎本記事の内容

  • Googleアドセンスをレスポンシブで表示させる方法
  • スマホで横幅いっぱいに広告が表示される場合の対処法

なお、ちょっとだけ
コードをいじる作業があります。

とはいえ、プログラミングができなくても
全く問題ないのでご安心を。

サクッといきましょう。
Let’s Google AdSense!

とはいえ、ブログにGoogleアドセンス広告を貼り付けるには、審査に合格する必要があります。

Googleアドセンスをレスポンシブで表示させる方法

Googleアドセンスをブログ内に貼り付け
広告収益を上げることができます。

もはや、レスポンシブ表示は必須で
レスポンシブ対応じゃないサイトはオワコン。

読者とGoogleからの評価も悪くなります。
よって、SEO対策としてもレスポンシブは重要。

レスポンシブとは?
スマホ・タブレット・PCなど、どのデバイスでも大きさや形が崩れないで表示させることです。

そもそも広告が必要なので
まず、下記の手順より広告を作りましょう。

STEP.1
管理画面

Google AdSenseの管理画面より
「広告」→「サマリー」→「広告ユニットごと」から新しい広告ユニットを作成します。

STEP.2
広告ユニットを作る

広告ユニット名を決めます。
広告サイズを「レスポンシブ」か「固定」を選択し、htmlコードを作成する。基本的にレスポンシブでOK。

STEP.3
広告ユニットのコードをコピー&貼り付け

作成されたhtmlコードをコピーし、ブログに貼り付けます。

ブログに広告コードを貼り付けるには
WordPressなどの知識が入ります。

基本的にはWordPress管理画面から
ウィジットで「カスタムhtml」や「広告専用のウィジット」に貼り付ければ問題ないです。

生成されるhtmlコードの雛形

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-************"
     crossorigin="anonymous"></script>
<!-- top-ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-***************"
     data-ad-slot="**********"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
//重要な数字は伏せています...

このようなhtmlコードが出来上がると思います。
あとは、コピーして貼り付ければ終わり。

本記事では
「data-ad-format=”auto”」「data-full-width-responsive=”true”」をいじります。

「よくわかんねー」
ってのが感想だと思います。

  • data-ad-format=”auto”→広告の型を設定する(横とか縦とか)
  • data-full-width-responsive=”true”→(横幅いっぱいのレスポンシブにするか)

順番に解説していきます。

広告が反映されるまで、最長1時間程度かかることもあるみたいですね。とはいえ、すぐ反映されるので、反映されない場合は気長に待ちましょう。

広告の形状は3つ【縦長・横長・レクタングル】

広告の形は
下記の3種類あります。

  • 縦長:縦にズラーって長い広告
  • 横長:横にスラーって長い広告
  • レクタングル:長方形の広告

基本的にコードはいじらなくてもOKです。

コードを少しだけいじることで
挿入したい所に好きな型の広告を設定できます。

本記事では、ココにフォーカスします。

上記のコードを観察してもらうとわかりますが、「deta-ad-format="auto"」が初期設定。こちらを少しいじると、広告を好きな形に変更できるようになります。

縦長の広告にする方法

変更前:deta-ad-format="auto"
変更後:deta-ad-format="vertical"

横長の広告にする方法

変更前:deta-ad-format="auto" 
変更後:deta-ad-format="horizontal"

レクタングルの広告にする方法

変更前:deta-ad-format="auto" 
変更後:deta-ad-format="rectangle"

横長またはレクタングルなどの広告にする方法

変更前:deta-ad-format="auto"
変更後:deta-ad-format="horizontal, rectangle"

組み合わせは、半角カンマで区切ります。

少しコードをいじるだけで
自由に広告の形を変更できます。

スマホで横幅いっぱいに広告が表示される場合の対処法

レスポンシブが「なんか嫌だな」という方は
下記の方法で横いっぱいに表示されなくなります。

全横幅サイズの解除方法

実は、レスポンシブ設定にすると
スマホでは、広告が横いっぱいに表示されます。

その設定を解除できる方法です。
それは下記のとおり。

変更前:data-full-width-responsive="true"
変更後:data-full-width-responsive="false"

左右にマージンがとれ隙間ができます。
とはいえ、この方法はおすすめしません。

なぜなら
広告収益に悪影響があることが確認されたから。

ただし、これによって収益増加の機会が減る可能性があります。Google のテストにより、モバイル デバイスが縦表示の場合には全幅サイズのレスポンシブ広告の成果が高いことが判明しています。

よって
「data-full-width-responsive=”true”」のままでOK。

横一杯に広告が表示される理由は
このように、広告収益に関係あるからです。

とはいえ、コードの改変って違反じゃないの?

下記に違反ではないと書かれているので
コード改変は問題ないです。

ただし、本記事で紹介した限りです。
アドセンス広告掲載のガイドラインを守りましょう。