【初心者向け】スマホでAdSenseレクタングル大が、画面からはみ出さないようにする

スポンサーリンク

現状、AdSenseがキレイに表示されるようにするとなると、広告サイズは以下のようになるかと思います。

  • PC:レクタングル大(336×280)
  • スマホ:レクタングル中(300×250)

少し古いスマホ、仮にiPhone5s以前の機種で「レクタングル大」を表示すると、広告が画面外にはみ出してしまいます。

しかし、スマホでも「レクタングル大」を設定したい場合があります。

「レクタングル大」と「レクタングル中」はどっちが良い?

「レクタングル大」のほうが単価が高い

レクタングル中よりも、大のほうが単価が高いです。

「レクタングル大」を使用すると、「レクタングル中」サイズの広告も表示される

大は小を兼ねるというわけですね。大を使用すると、中の広告も表示されます。

ですので、出来ればレクタングル中よりレクタングル大を使いたいです。

そもそもなんではみ出るのか

「レクタングル大」よりも、スマホのブラウザ解像度が低い場合に、画面外に広告が飛び出してしまいます。

スマートフォンには、実際の解像度の他に、ブラウザの解像度というものが設定されています。

iPhone5sのブラウザ解像度は、「320px(ピクセル)」となっています。

レクタングル大」の横幅は「336px」と、iPhone5sのブラウザ横幅よりも大きいため、画面外にはみ出てしまうわけですね。
※iPhone6以降では、ブラウザ解像度が上がったため、レクタングル大でもちゃんと画面内におさまります。

 

今回はCSS(スタイルシート)を使い、以下のように設定にします。

  1. 340px以上の解像度のブラウザだったら、レクタングル大の通常サイズ(336px)を表示する
  2. 339px以下の解像度のブラウザだったら、レクタングル大の広告を300pxに縮めて表示する。

「レクタングル大」が、画面外にはみ出さないようにする設定方法

レクタングル大のAdSenseコード

AdSenseでレクタングル大の広告ユニットを作成すると、以下のようなコードが発行されます。
※隅付き括弧【】内は、ユーザーごとに違います。今回の修正では、ここはいじらないので気にしないでください。

 

AdSenseコード(HTMLファイル)の改造

  1. まず以下の一行を消します。
    style="display:inline-block;width:336px;height:280px"
  2. 次に『class="adsbygoogle"』と記載されている部分に『ad_sp』を書き足し、以下のようなかたちにします。
    class="adsbygoogle ad_sp"

最終的に以下のようなかたちになればOKです。

 

スタイルシート(.CSSファイル)の改造

スタイルシート(.CSSファイル)に、以下のコードを追記します。
※WordPressをお使いでしたら、『管理ページ』⇒『外観』⇒『テーマの編集』を開き、「style.css」に以下を追記してください。

 

以上で設定完了となります。

はみ出していた広告が、画面内に収まっているかと思います。

設定前
2016-09-14-21-05-22←ここが右端
設定後
2016-09-14-21-22-12←ここが右端

 

注意(おまけ)

ラージモバイルサイズなど、レクタングル大以外に上記の設定すると、頭の良いGoogleさんが自動的にレクタングル大の広告にしてしまいます。

ラージモバイルバナー用の改造も書いておきます。

ラージモバイルバナーも、横幅が320pxなので、場合によってはみ出てしまうことがあります。また、少し余白があったほうがデザイン的にもキレイなので、設定しておいて良いでしょう。

『ラージモバイルバナー』サイズの設定

先ほどの修正『class="adsbygoogle"』に『ad_sp』と追加したところを、
『ad_sp_Lmob』を追加し、『class="adsbygoogle ad_sp_Lmob"』とします。

以下のかたちになっていればOKです。

 

先ほどと同じように、スタイルシート(.CSSファイル)に、今度はラージモバイルバナーようのコードを追記します。

これで、ラージモバイルバナーもキレイに表示されるようになりました。

2016-09-14-21-49-46

コメントを残す

CAPTCHA