今や、スマホからのアクセスはPCサイトに匹敵しています。
そこで、デバイスごとに表示が変わるレスポンシブウェブデザインにすると、ユーザーの利便性が良いです。
しかし、アドセンス広告をサイトに貼っている場合、アドセンス広告のサイズもデバイスによって変更する必要があります。
これを簡単に行える方法を紹介します。
レスポンシブ広告ユニット
Google AdSense（グーグルアドセンス）も収益の増加の為、サイトをレスポンシブウェブデザインにすることを推奨しています。
そして、そのアドセンス広告版が「レスポンシブ広告ユニット」です。
サイトに一度、設定すると後は自動でデバイスにあったサイズの広告を表示してくれます。
管理画面から「広告の設定」→「新しい広告ユニット」の「広告サイズ」のプルダウンメニューから、「その他-レスポンシブ」の下にある「レスポンシブ広告ユニット（ベータ版）」を選択。
※「この広告ユニットはレスポンシブデザインを導入したサイトのみご利用いただけます。」というメッセージが表示されます。
レスポンシブデザインについては「レスポンシブ デザインの方法」をご参照下さい。
「名前」等を設定し、「保存してコードを取得」をクリックします。
すると、広告コードが表示されますが、「モード」は「アドバンス（コード変更が必要）」を選択し、「広告コード」をコピペしてメモ帳等に貼り付けてください。
スマートサイズ（推奨）
上の「モード」には「スマートサイズ（推奨）」というのがあり、最初、こちらの「モード」を選択し、コードをサイトに貼ったところ、問題が発生しました。
ところが、「スマートサイズ（推奨）」を選択してサイトを閲覧したところ、今まで728×90サイズの広告を貼っていた場所には同じサイズの広告が表示され良かったのですが、スマホサイトを閲覧すると300×250サイズの広告が表示されました。
ところが、スマホサイトの場合、サイトの上部に300×250サイズの広告を貼ることは禁止されています。
場合によっては、アカウント停止になる可能性大です。
これは、画面上部に大きなサイズの広告が表示され、コンテンツが下部に押しやられるというのが理由のようです。
ファーストビューにアドセンス広告を配置することは収益を上げることにつながるので、アドセンスでは推奨されているのですが、スマホの場合は画面が小さいのでバランスが悪いということをアドセンスのスタッフが説明していました。
そこで、今までは、サイト上部には320×50サイズが推奨だったのですが、最近では320×100サイズの広告も使用できます。
そこで、「アドバンス（コード変更が必要）」に貼り変えたのですが、こちらでも問題が発生しました。
アドバンス（コード変更が必要）
デフォルトの下記になっています。
このコードを編集する必要があります。
<style><!–
.（自分で付けた広告ユニットの名前） { width: 320px; height: 50px; }
@media(min-width: 500px) { .（自分で付けた広告ユニットの名前） { width: 468px; height: 60px; } }
@media(min-width: 800px) { .（自分で付けた広告ユニットの名前） { width: 728px; height: 90px; } }
–></style><script type=”text/javascript” src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js” async=””></script><!– （自分で付けた広告ユニットの名前） –> <ins class=”adsbygoogle （自分で付けた広告ユニットの名前）” style=”display: inline-block;” data-ad-client=”●●●” data-ad-slot=”△△△”></ins><script type=”text/javascript”>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>
デフォルトのコードの意味は次の内容です。
①「.（自分で付けた広告ユニットの名前） { width: 320px; height: 50px; }」→デバイスの横幅を設定しない時は、320×50のアドセンス広告を表示。
②「@media(min-width: 500px) { .（自分で付けた広告ユニットの名前） { width: 468px; height: 60px; } }」→デバイスの横幅が500px以上の時は、468×60のアドセンス広告を表示。
③「@media(min-width: 800px) { .（自分で付けた広告ユニットの名前） { width: 728px; height: 90px; } }」→デバイスの横幅が800px以上の時は、728×90のアドセンス広告を表示。
この数字を任意の数字に変更します。
私のサイトの場合、PCとスマホからのアクセスが半々で、タブレットからは僅かなので、下記のよう設定してみました。
<style><!–
.（自分で付けた広告ユニットの名前） { width: 300px; height: 250px; } @media(min-width: 641px) { .（自分で付けた広告ユニットの名前） { width: 160px; height: 600px; } }
–></style><script type=”text/javascript” src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js” async=””></script><!– （自分で付けた広告ユニットの名前） –> <ins class=”adsbygoogle （自分で付けた広告ユニットの名前）” style=”display: inline-block;” data-ad-client=”●●●” data-ad-slot=”△△△”></ins><script type=”text/javascript”>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>
この方法で値を変更し、3つの広告ユニットを作成しました。
ところが、問題が発生。
私の場合、サイト上部はPCの場合728×90、サイドメニューは160×600、記事下に336×280のサイズを広告を設定しているのですが、編集した「レスポンシブ広告ユニット」を各場所に貼り付けてサイトを閲覧したところ、サイト上部も記事下も縦長の160×600サイズの広告が表示されています。
これはかなり奇妙な光景です。
あれこれ考えてやってみたところ原因が判明しました。
設定の注意点
私は、1つの広告コードを使いまわし、値を変えて3つのコードを作成したのですが、これが原因のようです。
最初、サイドバーの広告コードが作成し、そのコードを使いまわししたところ、このサイズが他の場所でも引き継がれたようです。
広告コードの「data-ad-slot=”△△△”」の「△△△」の部分はコードによって違います。
3箇所に各々違うサイズの広告を表示させたい場合は、コードの取得を3回やる必要があります。
3回コードを取得し、コードを貼り付けたところ、正常に表示するようになりました。
こういうことは、アドセンスのヘルプでも動画でも解説がなかったので、正解に至るまで、時間がかかりました。
