スマホ画面でAdsenseレスポンシブ表示が切れるに対する２つの対策

こんばんは、じぇいかわさきです。実は、このサイトを運営している中で、スマホの画面でのAdsense表示において、右端が切れてしまう問題が出ていました。

すごく気になっていたんですが、どう直してよいのか悩んでいました。

今回、対策方法を見つけたので備忘録を兼ね、スマホでAdsense表示か切れるに対する２つの対策を紹介します。

 

 

 

Adsenseレスポンシブ表示が切れるとは？

自分のサイトでは、Adsense広告のサイズを木にしなくても良いように、レスポンシブ広告を設定しているんです。

そもそもAdsenseのレスポンシブ広告とは、Googleが現在使用しているPCのの解像度に合わせて適切なサイズの広告を配信してくれる仕組みです。

従って、デスクトップでもスマホでも同じ広告を使用できるという利点が有るんです。

現在、自分の場合にはPCのの画面上では、Adsenseのレスポンシブ広告は問題なく普通にみれております。

 

しかし、その同じ画面をスマホを通して見てみると、なんだか右端が切れてしまう不具合が発生していました。

また、広告の内容によっては、左側に寄ってしまい、画面表示いっぱいにはならない不具合もありました。

 

これでは何のためのレスポンシブ広告なのかわからないですよね。

 

自分のサイトを、実際のスマホを通して見た時の表示はこんな感じなります。

 

よく見ていただくとわかるのですが、一番上のレスポンシブ広告は、左に寄ってしまい、右側に大きな余白ができています。

 

一方、下側の検索リンクについては、右端が切れてしまっており、見た目が非常に悪いんです。

 

機能的には動作しているので、問題ないといえば問題ないですが、やはり人間と同じで見た目が重要だと考えました。

 

これを対策するにはどうしたら良いのか、ネットで探したりして対策を調べていきましたら、ネットをチェックしていくと、同じような不具合で悩んでいる人は多数いたようで、参考になる対応策を見つけてやってみました。

 

 

答えは意外と簡単だった・・・が？

ネットを探していくと、どうやら対応策は非常に簡単に対応できるようだと分かりました。

具体的には、CSSにオーバーフローした部分を見えるようにしていすれば良いようなんです。分かってしまえば非常に簡単なことになりますね。

見つけたCSSコードはこれなんです。

やった！と思い、CSSの最終行に追加して保存。これで直ったと思い、スマホの画面をリロードしてみたんです。

[ads]

 

しかし！

結果は何も変わっていないんです。おかしいじゃないですか。

しょうがないので、Chromeのデベロッパーツールを起動して、まずPCの版でパラメータなどをチェックしていきました。

すると、広告部分の変数に間違いが有ることに気がついたんだ。

このcontainerで使用されているIDはthk_ps_widgetになっている。という事は、先のCSSコードで.adsbygoogleとなっている部分が間違っているから、せっかく修正してもダメなんだ。

多分、正しくは以下の通りにしなければいけないんだね。

 

多分これで直ったよね。

 

 

たが余白が無くなった！

さて、実際にCSSを修正した後の状況を確認してみよう。

 

これが実際の画面なんです。どうですか、最初の画面に比べると全然良くなったでしょう。

 

まず、最初（上部）のレスポンシブ広告は画面いっぱいにまで広がりました。これで問題ないですね。

 

そして、右端が切れていたスポンサー検索の部分については、綺麗に右端も表示されるようになったので、こちらも改善されています。

 

しかし、別の問題が発生したんです。

 

それは、同じcontainerに入っているレスポンシブ広告の内、スポンサー検索は良くなったのですが、一般の広告は上部の広告と同じように画面いっぱいになり、左右の余白が無くなってしまったのです。

 

 

 

こちらがその画面なんです。一番下にあるスポンサーリンクと、上のスポンサー検索は同じcontainer内にあるので、上部のスポンサー検索も実は左右の余白が無いということになりますね。

 

結果、CSSにコードを追加するだけではまだ不十分だということになりますね。

 

さあ困った。

 

もう一度対策を探さなければ。

 

 

 

 

答えは広告のコードの中に有った！

いろいろと調べていくうちに、どうやらGoogleのAdsenseのコード自体に問題が有るのではないかと言う答えにたどり着いたんだ。

まず、レスポンシブ広告のソースをみてみると、以下のようになっている。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- second4 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-****************"
data-ad-slot="2xxxxxxx46"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードで問題の部分は、多分responsiveという部分だと思う。このコードで、データをフル画面サイズにしているんだ。

[ads]

 

と言うことは、最初の対策でオーバーフローした部分を見えるようにCSSで設定したので、このコードでフル画面表示指定にするから、左右の余白が無くなってしまうのだと思われる。

従って、data-full-width-responsive="true" を data-full-width-responsive="false" に変更してしまえば、フル画面表示がされなくなるので、後はCSSで指定しているマージンで余白が出るはずだよね。

最終的なコードはいかのようになる。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- second4 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-****************"
data-ad-slot="2xxxxxxx46"
data-ad-format="auto"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

これを、スポンサー検索とスポンサーリンクの２箇所に対応させれば完了だよね。

 

 

Adsenseレスポンシブ表示が切れるに対する２つの対策

結局、スマホ画面でAdsenseレスポンシブ表示が切れるの対策は、２つのことを実施することで対応ができた。

1. CSSでオーバーフロー分を見えるようにする
2. Adsenseコードでフル画面表示を禁止する

この２つを実施すると、このように綺麗に左右に余白ができるようになった。

上部側のスポンサー検索はあまり代わり映えがないですが、下側のスポンサーリンクは左右に余白がでるようになった。

 

これで、スマホから見る人も、広告が偏っていたり、端が切れていたりすることがなくなり、見栄えが良くなることで、読んでみようかなって気持ちになるでしょうね。

[ads]

 

今回、ネットで情報を収集しましたが、自分でもプログラミングの再勉強を始めだしたこともあり、言っている内容が自分でも理解できるので、対策が全て腹落ちして納得できた。

 

やはり、プログラミングって大事なんですね。

 

 

 

 

 

 

 

まとめ

今回、このサイトを始めた当初から気になっていた広告の表示ズレについて、重い腰を上げて自分で情報を収集し対応してみた。

今までなら、まあ良いかと思っていたりしましたが、やはりサイトの見た目が良くないと、それだけで読者が去っていくような感じがしましたので、思い切って対応をしました。

これも、自分でプログラミングを始めた事もあり、単にコピペしたりするわけではなく、自分で腹落ちをしてから対処するということで、今までより一歩進んだ対応ができたのかと思っております。

今までどうしても、デスクトップ中心で表示などをチェックしセットアップしてきましたが、４月の実績をみても、半分以上がスマホからの閲覧になっているので、軸足をスマホにするべきだと、再認識したのも今回のアクションにつながっています。

これからも、少しずつですがスマホ画面を見やすく直していきたいと思います。