PCとスマホでは表示可能面積が異なりますからAdsense広告はで別個に考えた方が良いですよね。
このサイトでも最近まで記事下にレクタングル大の広告をPCと同様にスマホでもダブルで掲載していました。WPQUADSというプラグインを利用して常に記事下に表示するようになっているんですが、スマホの時に非表示にするにはWPQUADS Proを有償購入しなくてはならないので放置をしていました。
Pro買わなきゃ選択できなよ～(T。T) ケチ
でもでも、なんとなくググっていたら、簡単にできる事が分かりました。
GoogleAdsenceのコード確認
おなじみのAdsence広告を見てみましょう。
実際に下記のコードでPCの場合はダブルレクタングル、スマホの場合はシングルレクタングルの表示ができています。
スポンサーリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- コンテンツ下にデフォルト表示（左側） -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- コンテンツ下にデフォルト表示（右側） -->
<ins class="adsbygoogle adsensepc"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-xxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
スマホ画面で非表示にする作戦の確認
どんな方法でPCの場合ダブルレクタングルでスマホでシングルレクタングルにするのか作戦をまとめておきましょう。
上記のコードを見ながらですが、「コンテンツ下にデフォルト表示（左側）」と「コンテンツ下にデフォルト表示（右側）」二つのAdsense広告があります。コンテンツ下にデフォルト表示（左側）はPCでもスマホでも常に表示させて、コンテンツ下にデフォルト表示（右側）はスマホ表示の時のみに表示させるようにコントロールします。要するに下記のように対応します。
コンテンツ下にデフォルト表示（左側） ⇒ デフォルト 何もしないでOK
コンテンツ下にデフォルト表示（右側） ⇒ 変更する必要あり
クラスの追加
さて、「コンテンツ下にデフォルト表示（右側）」のコードを変更する必要があります。方法としてはクラスを追加して、メディアクエリでコントロールを行います。
下記のようにします。adsbygoogle の後方にadsensepcというクラスを追加します。
このクラスがある場合は、スマホで非表示にするといったコントロールをします。
変更前（Adsenseからコピーしたまま）
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- コンテンツ下にデフォルト表示（右側） -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
変更後（adsensepcを追加）
<!-- コンテンツ下にデフォルト表示（右側） -->
<ins class="adsbygoogle adsensepc"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
メディアクエリでのクラスコントロール
テーマによって様々だと思いますが、スタイルシートいわゆるCSSにスマホで非表示にする記述を追加しています。
下記のように記述します。意味としては表示領域が680pxまでは表示させないという事です。良く分からなくてもコピペすればOkです。
/* mobile */
@media screen and (max-width: 680px) {
.adsensepc{
display: none !important;
}
}
スマホで非表示になるか確認
お疲れ様でした。では実際に動作を確認してみましょう。
まずはPC表示の場合
レクタングル大がダブルになっていますね
スマホ表示の場合
PCでは表示されていた右側のレクタングル大が非表示になっています。
他にも応用していけば柔軟にいろいろとできそうですね。極論をいうとWP QUADS使わない方がシンプルな構成になっていいかもしれませんね。
コメント