【AdSense】レスポンシブ ウェブ デザインでPCとスマホでの広告の表示・非表示や広告サイズを切り替える方法

こんにちは。

あなたのブログではレスポンシブ ウェブ デザインを使っていますか。

レスポンシブ ウェブ デザインとはユーザーのデバイス（パソコン、タブレット、モバイル、など）の画面サイズに応じて（「レスポンシブ」に）ホームページやブログを表示するデザインのことです。

ウェブサイトといえば、以前はPC向けモバイル向けにそれぞれ別々のHTMLを用意し、URLが分けられていることが多かったのですが、昨今では、多くのサイトがレスポンシブウェブデザインを採用し、どのデバイスに対しても共通の URL・ HTML・ CSSファイルを使用してホームページを表示するようになっています。

URLが共通のためデバイスによる表示エラーが少なく、さらにGoogle検索エンジンのクローラーの巡回の手間が少なくなるという利点もあることから、Googleはレスポンシブ ウェブ デザインの使用を推奨しています。

そんな良いことばかりのようなレスポンシブ ウェブ デザインですが、AdSense広告の配置を考える場合に少し悩んでいしまいます。

というのも、AdSense広告の配置を考える際はPCとスマホを個別に考え、画面のサイズに適した広告を配置した方が「クリック率」「収益」が高まります。

（参考）【検証】クリック率が高いAdSense広告の配置について考えてみた

ところがレスポンシブ ウェブ デザインではどのデバイスに対しても共通のHTML・CSSファイルを使用しているため、AdSense広告も同じコードになってしまいます。

WordPressのテーマでは、レスポンシブでもPCとモバイルで別々にAdSense広告を配置できるようになっている場合もありますが、はてなブログのレスポンシブデザインモードではそのような機能はありません。

あまり気にせずに、全て自動広告に任せてしまったり、全ての広告ユニットをレスポンシブにしても良いのかもしれません。

でも、例えば「スマホの場合にだけ記事上に広告を表示したい」「PCの記事下にはダブルレクタングル広告を表示したい」という場合には、AdSenseコードの記載を一工夫する必要があります。

今回は、レスポンシブ ウェブ デザインでPCとスマホでのAdSense広告の表示・非表示や広告サイズを切り替える方法についてご紹介します。

レスポンシブ ウェブ デザインでPCとスマホでのAdSense広告の表示・非表示や広告サイズを切り替える方法

表示するデバイスに応じてAdSense広告の表示・非表示や広告サイズを切り替えるには、AdSenseの「自動サイズ　レスポンシブ」広告ユニットを利用します。

まずはAdSenseで「自動サイズ　レスポンシブ」広告ユニットのコードを取得する方法と、取得したコードの修正方法について順番にご紹介します。

「自動サイズ　レスポンシブ」広告ユニットのコード取得

AdSenseの管理画面から「広告の設定」の「新しい広告ユニット」をクリックし、「自動サイズ　レスポンシブ」の広告ユニットを選択。［名前］を付けて「保存してコードを取得」をクリックし、表示されたコードをテキストエディタやメモ帳などにコピーします。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 自動サイズ　レスポンシブ -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このレスポンシブ広告コードを修正することで、PCとモバイルで広告の表示・非表示を切り替えたり、表示する広告サイズを変更することができるのです。

「自動サイズ　レスポンシブ」広告ユニットのコード修正

先程コピーした「自動サイズ　レスポンシブ」広告ユニットのコードに、画面サイズに応じて表示する広告を切り替えるためのコードを加えます。

例えば、画面の小さなスマホではレクタングル（中）（300×250px）、タブレットやPCではレクタングル（大）（336×280px）の広告を表示するようにしたい場合は、先程、取得したコードを次のように修正します。

<style>
.my_adslot { display:inline-block;width: 300px; height: 250px; }
@media(min-width: 340px) { .my_adslot { display:inline-block;width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 自動サイズ　レスポンシブ -->
<ins class="adsbygoogle my_adslot"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

元のコードで青字にしていた箇所のコードを削除し、代わりに赤字箇所のコードを追記しています。

     style="display:block"
data-ad-format="auto"

追記したコードの意味は次の通りです。

<style>
.my_adslot { display:inline-block;width: 300px; height: 250px; }
@media(min-width: 340px) { .my_adslot { display:inline-block;width: 336px; height: 280px; } }
</style>

<STYLE>タグで記述した部分が、画面サイズに応じて表示する広告サイズを指定するコードです。

.my_adslot { display:inline-block;width: 300px; height: 250px; }

の部分はスマホで表示する際の広告サイズを指定する部分です。今回はレクタングル（中）（300×250px）のため { display:inline-block;width: 300px; height: 250px; }としています。

@media(min-width: 340px) { .my_adslot { display:inline-block;width: 336px; height: 280px; } }

の部分は画面サイズが指定したサイズ以上ある場合に表示する広告サイズを指定しています。

(min-width: 340px)の部分の数値を変えることで、スマホから広告を切り替える画面サイズを変更することができます。表示する広告サイズは { display:inline-block;width: 336px; height: 280px; }の部分で指定します。

この表記では「画面サイズが340px以上の場合、レクタングル（大）（336×280px）を表示」するように指定しています。

<STYLE>タグのmy_adslotで指定したコードで広告が切り替えられるようにするために、元のコードの

<ins class="adsbygoogle”

の部分にmy_adslotを追記して次のように変更しています。

<ins class="adsbygoogle my_adslot"

このmy_adslotの部分の名称は他の文字でもOKです。

この名称には英字（A～Z）、数字、アンダースコアのみ使用できます。最初の文字は英字にしてください。またサイトに適用する際は、コード設置箇所ごとに異なる固有の名前を使用します。

レスポンシブ広告コードを修正する方法については「AdSenseヘルプ」のページに記載されています。

（参考）レスポンシブ広告コードを修正する方法 – AdSense ヘルプ

応用編

ここまでは「画面サイズに応じて表示する広告を切り替える基本的な方法」についてご紹介しました。続いては、私が実際に利用している広告コードをご紹介します。

スマホの場合にだけ記事上に広告を表示したい場合（１）

過去１年くらいのデータを確認すると、私のサイトではスマホサイトでの「記事上広告（レスポンシブ）」は、スマホサイトの「記事下広告（レスポンシブ）」と並び最も多くの収益を得ています。

しかしサイトをレスポンシブ ウェブ デザインにした場合、そのままではPCでも記事上に広告が表示されてしまいます。

記事上広告は記事の一番上、TOP画像の上の表示される広告です。デザイン的にPCでは表示しないようにしたいと考えています。

そこで、スマホの場合だけ記事上に広告を表示するように、コードを以下のように修正しました。

<style>
.my_adslot { display:inline-block;width: 320px; height: 100px; }
@media(min-width: 500px) {.my_adslot { display: none } }
</style>
<div style="text-align:center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事上〈レスポンシブ〉 -->
<ins class="adsbygoogle my_adslot"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

このコードでは、画面サイズ500px未満の場合には、320×100pxの広告を表示し、画面サイズ500px以上の場合は広告を表示しないようdisplay: noneと記述しています。

また、広告がセンターに表示されるように<div style=”text-align:center”></div>タグを記述しています。

スマホの場合にだけ記事上に広告を表示したい場合（２）

先程のコードでは表示する広告のサイズを320×100pxに指定しましたが、このコードではスマホ画面でレスポンシブ広告ユニットが全幅サイズに拡大されて表示されるようにレスポンシブ広告のタグパラメータを記述しています。

<style>
.my_adslot { display:inline-block; }
@media(min-width: 500px) {.my_adslot { display: none } }
</style>
<div style="text-align:center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Hmobile01記事上〈レスポンシブ〉 -->
<ins class="adsbygoogle my_adslot"
     data-full-width-responsive="true"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

このコードの中の

     data-full-width-responsive="true"

の部分がレスポンシブ広告のタグパラメータです。このコードを記述することで モバイル端末での広告サイズの表示を指定する

.my_adslot { display:inline-block; }

の部分に広告サイズを記述しなくても、スマホ画面でレスポンシブ広告ユニットが全幅サイズに自動拡張されるようになります。

また、画面サイズが500px以上のデバイスでは広告が表示しないように下記のように記述しています。

@media(min-width: 500px) {.my_adslot { display: none } }

display: noneの部分が「広告を表示しない」という記述になります。

レスポンシブ広告のタグパラメータの使用方法については「AdSenseヘルプ」のページに記載されています。

（参考）レスポンシブ広告のタグパラメータの使用方法 – AdSense ヘルプ

PCの記事下にダブルレクタングル広告を表示したい場合

次は記事下の広告表示を画面サイズに応じてレクタングル（中）（300×250px）、レクタングル（大）（336×280px）、ダブルレクタングルに切り替えて表示するコードです。

<div style="text-align:center">
<style>
.my_adslot1 { display:inline-block;width: 300px; height: 250px; }
@media(min-width: 500px) {.my_adslot1 { display:inline-block;width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事下〈レスポンシブ〉 -->
<ins class="adsbygoogle my_adslot1"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
.my_adslot2 { display: none }
@media(min-width: 800px) {.my_adslot2 { display:inline-block;width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事下〈レスポンシブ〉 -->
<ins class="adsbygoogle my_adslot2"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

このコードでは、2か所の広告設置個所の表示について、それぞれmy_adslot1とmy_adslot2で表示方法を指定しています。

my_adslot1の表示については以下のように記述しています。

<style>
.my_adslot1 { display:inline-block;width: 300px; height: 250px; }
@media(min-width: 500px) {.my_adslot1 { display:inline-block;width: 336px; height: 280px; } }
</style>

これは画面サイズ500px未満のデバイスではレクタングル（中）（300×250px）を、500px以上のデバイスではレクタングル（大）（336×280px）を表示するという記述になります。

一方、my_adslot2の表示については以下のように記述しています。

<style>
.my_adslot2 { display: none }
@media(min-width: 800px) {.my_adslot2 { display:inline-block;width: 336px; height: 280px; } }
</style>

これはモバイル端末では広告を表示せず、画面サイズ800px以上のデバイスではレクタングル（大）（336×280px）を表示するという記述になります。

2つ広告設置個所の広告表示をこのように指定することで

• 画面サイズ500px未満のモバイル端末ではレクタングル（中）（300×250px）
• 画面サイズ500px以上、800未満のデバイスではレクタングル（大）（336×280px）
• 画面サイズ800px以上のデバイスではダブルレクタングル

を表示するように指定しているのです。

<div style=”text-align:center”></div>タグはスマホで広告をセンターに表示させるために記述しています。

まとめ

最近ではAdSense広告の設置は自動広告にお任せしておくだけでもある程度の収益は見込めるかもしれません。とはいえ設置位置や設置する広告サイズを工夫することで、収益が変わってくることがあるのも事実。

それなら、いろんな方法を試して自分のサイトにあった設置方法を模索するのも面白いような気がします。

レスポンシブ ウェブ デザインでPCとスマホでのAdSense広告の表示・非表示や広告サイズを切り替える方法について紹介は以上です。