IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

記事中でもAdsenseをPCとスマホで切り替えOK!レスポンシブ広告ユニット

      2016/07/26  あとで読む   はてブする

Google Adsense

Google Adsenseを記事中に挿入するのにAdMoreというプラグインを使っているということは以前「[WordPress]moreタグ(続きを読む)にGooge Adsenseを追加できるプラグイン「AdMore」が素晴らしい!」という記事で書きました。

しかし、このAdMoreやQuick Adsenseなどのプラグインでは、PCとスマートフォン(スマホ)を切り替えてAdsenseのサイズを変更することは出来ませんでした。

PCではレクタングル(大)に、スマホではレクタングル(中)で表示させようと下のコードで試してみましたが、残念ながら切り替わってくれず。

 

なのでこれまでは、PCとスマホの両方とも「300×250のレクタングル(中)」を使用してきました。

が、先日「Inseide Adsense」というグーグルアドセンスブログを見ていて、あるページに目が留まりました。それは…

レスポンシブ広告コードを修正する方法 | Inseide Adsense」という記事です。

おぉっ、もしかして!と、レスポンシブ広告ユニットを作成したら、簡単にAdMoreやQucik Adsenseなどのプラグインでも使用できたのでここで紹介します。

スポンサーリンク

Google Adsenseレスポンシブ広告ユニットを作成する方法

Google Adsenseレスポンシブ広告ユニットを作成する方法

Google Adsenseにログインし、「広告の設定」の「新しい広告ユニット」をクリック。

 

アドセンス広告のサイズ設定画面-レスポンシブ

[名前]を付けて、[広告サイズ]を自動サイズ「レスポンシブ」を選びましょう。その後「保存してコードを取得」をクリックします。

保存しコードを取得すると下の黒字と赤字以外のコードが表示されます。まずコードをメモ帳などにコピーします。

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

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 記事中(レスポンシブ) –>
<ins class=”adsbygoogle my_adslot
style=”display:inline-block”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

メモ帳にコピーしたコードの上に黒字の部分を貼りつけます。このコードの意味は以下の通り。

①スマホで表示する時の広告サイズです。レクタングル(中)にしたいので{ width: 300px; height: 250px; }に書き換えます。

(min-width: 340px) とあるように、ブラウザが340px以上ある場合の設定です。ここはレクタングル(大)が表示できるので、{ width: 336px; height: 280px; }にしましょう。

そのあと、my_adsolotで切り替えるので、コードの中にある<ins class=”adsbygoogle~の所を、<ins class=”adsbygoogle my_adslot“にしましょう。

変更した結果、下のようになりました。

<style>
.my_adslot { width: 300px; height: 250px; }
@media(min-width: 340px) { .my_adslot { width: 336px; height: 280px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 記事中(レスポンシブ) –>
<ins class=”adsbygoogle my_adslot
style=”display:inline-block”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

my_adslotは他の文字でもOK。必ず上と同じ文字にしましょう(上の赤文字参照)。

これをAdMoreやQuick Adsenseのmoreタグに貼り付ければ、ブラウザのサイズごとに自動で変更してれます。

 

スポンサーリンク

PCではビッグバナーを表示させたい場合

<style>
.my_adslot { width: 300px; height: 250px; }
@media(min-width: 340px) { .my_adslot { width: 336px; height: 280px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 記事中(レスポンシブ) –>
<ins class=”adsbygoogle my_adslot
style=”display:inline-block”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

さらに細かく設定することができます。

上の他にPCの場合は728×90のビッグバナーを追加するという方法もあります。

その場合は、ディスプレーが800px以上で見ている人には、728x90で表示という切替コードを入れましょう。(上の太文字参照)

  • 340px未満:レクタングル中(300×250)で表示
  • 340px以上~799未満:レクタングル大(336×280)で表示
  • 800px以上:ビッグバナー(720×90)で表示

上の例は以上の設定になっています。お好みで設定をしてみて下さい。

スマホの記事上には300×250を表示しないようにしましょう。規約違反です。320x100がオススメです。ご注意ください。

※以上のコード修正は認められた修正です。禁止された修正はしないようにしましょう

 

最後に

切り替えコードを使わなくても、Adsenseコードが自動で変更してくれるので便利です。ずっとやりたかった記事中の切り替え(PCはレクタングル大、スマホはレクタングル中)が表示されるようになりました。

これは色々と応用が利きますね。記事下にも同様のコードができますし、タイトル下にもスマホでは320×100(ラージモバイルバナー)や320x50(モバイルバナー)で、PCでは720×90(ビッグバナー)や336×280(レクタングル大)などをサイズごとに切り替えることも可能です。

もっと早く知ってれば…。良かったらお試しください。

【関連】[WordPress]moreタグにAdsenseを追加できるプラグインAdMoreが素晴らしい!

【関連】Google Adsense広告の右側がはみ出しているのを調整する方法

【関連】[Google Adsense]テキスト広告の色を最適化してみました

【関連】Google Adsense1アカウントで複数サイトを追加登録する方法

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - adsense・アフィリエイト

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

Google Adsense
Google Adsense広告の右側がはみ出しているのを調整する方法

スマートフォン(スマホ)でブログを読む時によく見かけるのが、Google Ads …

phg-affriate-fukusu-websites
[複数サイト運営者用]iTunes Storeアフィリエイト(PHG)に別ブログサイトを追加する方法

複数ブログサイトを運営している人は、iTuens Storeアフィリエイト(PH …

Google Adsense
Google Adsense1アカウントで複数サイトを追加登録する方法

複数のサイトやブログを運営している、または運営しようという方も多いと思います。僕 …

Google Adsense
[Google Adsense]テキスト広告の色を最適化してみました

昨日の「[WordPress]テキストリンクの色を変更→クリックされやすくなるら …