アドセンス広告をPCとスマホで切り替える方法とは？

2017年8月29日

2019年6月3日

WRITER

自給人・斉藤

この記事を書いている人 - WRITER -

自給人・斉藤

㈱自給人代表取締役 / ブログマーケッター / ブログ集客の専門家
湘南茅ヶ崎で、ブログを中心としたWEBマーケティングのコンサルティングを個人や法人の方にしつつ、趣味で畑で野菜を育てています。
ブログも野菜もコツコツ育てることが大好き。
【自給人＝人生をコンテンツ化できる人】を育てていきます！

詳しいプロフィールはこちら

自給自足アフィリエイターの斉藤です！

アドセンス広告は、PCとスマホ、それぞれに合った広告を表示させてますか？

アドセンスのクリック率（CTR）を高めるためには、PCとスマホは別々にアドセンスを表示させたいですよね。

レスポンシブ広告を使えば簡単ですが、レスポンシブ広告は使う端末によって色んな形の広告が出てしまいます。なので、パソコンではデカデカと横長の広告が出たり、スマホでも小さい横長の広告が出たりするのです。

ですが、クリック率が最も高いアドセンス広告は、長方形のレクタングル！

そこで、今回は、アドセンス広告を、PCとスマホ別々に最適な広告を表示させる２つの方法を解説します。応用すれば、レクタングル以外のアドセンス広告も指定できるので、活用してみて下さい。

この記事の目次

1 アドセンスをPCとスマホを別々に表示させる方法
2 まずはレスポンシブ広告を作る
3 ①広告の形状を指定する方法
4 ②広告ユニットのサイズを指定する方法
5 さいごに

アドセンスをPCとスマホを別々に表示させる方法

アドセンスをPCとスマホ、別々に表示させる方法は色んな方法がありますが、代表的な方法は、ワードプレステーマの『function.php』をいじる方法です。しかし、初心者が『function.php』をいじるって、怖いですよね（笑）

テーマによっては、function.phpをいじると画面が真っ白になったりする場合もあります。

ちなみに、このブログで使っているSTORKの子テーマをいじったら、ブログが表示されなくなってしまいました（笑）これを直すためには、FFFTPから修正しないといけません(^^;

なので、今回は、function.phpをいじらなくてもできる方法を、２パターンご紹介しますね！

まずはレスポンシブ広告を作る

この２つの方法は、レスポンシブ広告を使います。

グーグルアドセンスの広告ユニットからレスポンシブ広告を選んで、コードを作成してください。

すると、以下のようなコードが生成されます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ユニット名 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-XXXXXXXXXXXXX"

data-ad-slot="XXXXXXXXXX"

data-ad-format="auto"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

このままでもレスポンシブ広告として作動しますが、レスポンシブ広告を場合、使う端末によって色んな形の広告が出てしまいます。なので、パソコンではデカデカと横長の広告が出たり、スマホでも小さい横長の広告が出たりするのです。

ですが、クリック率が最も高いアドセンス広告は、長方形のレクタングルです。

なので、このレスポンシブ広告をベースに、少しコードをいじり、レクタングル広告だけが出るようにしていきます。

①広告の形状を指定する方法

まず最初にアドセンスヘルプの『レスポンシブ広告のタグパラメータの使用方法』に書いてある方法。

通常のレスポンシブ広告では、『data-ad-format=”auto”』となっていますが、ここの”auto”を変更します。

data-ad-formatは、以下の３つに変えることができます。

rectangle（レクタングル）
vertical（縦長）
horizontal（横長）

この中の、レクタングルに変更すれば、レクタングル広告だけが表示されます。なので、PCではレクタングル大、スマホではレクタングル中が最適化されるってことです。

変更例は、以下の通り。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXX"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-XXXXXXXXXXXXX"

data-ad-slot="XXXXXXXXX"

data-ad-format="rectangle"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

ちなみに、”rectangle, horizontal”みたいに、組み合わせることもできます。

これだけで変更できれば簡単なんですが、テーマによっては、反映されない場合があります。

このブログで使っているSTORKでは、なかなかうまくいきませんでした。特に、PCでは、デカデカと広告が出てしまいました。

①の方法でうまくいかない場合は、②の方法を試してみて下さい。

②広告ユニットのサイズを指定する方法

次は、アドセンスヘルプの『レスポンシブ広告コードを修正する方法』に載っている方法です。

この方法では、広告ユニットをズバリ指定して、表示させます。

アドセンスヘルプに書いてある方法で、変更してみると以下になります。

<center><style type="text/css">
.ユニット名 { width: 300px; height: 250px; }
@media (min-width:400px) { .ユニット名 { width: 336px; height: 280px; } }
</style>
<ins class="adsbygoogle ユニット名"
     style="display:inline-block;"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX" ></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script></center>