Googleアドセンスの広告が枠からはみ出る問題について【モバイル ユーザビリティで問題が検出されました】

ここ最近突然Googleから何やら奇妙なメッセージが届いたので何かと思って見てみると、

「コンテンツの幅が画面の幅を超えています」という事で、

おかしいなと思って実際にサイトを確認してみても別に変わった様子はなし。

何がおかしいのかなと原因を探ってみると、Googleアドセンスの広告がサイトに表示される際に、

アドセンスの広告が付与される際に何やら勝手にいろんなクラスやらIDやらが付与されていて、

サイトの広告の表示のされ方(CSSでの表示)がおかしな事になってたみたい。

だから日によってその日の広告の表示のされ方によってエラーが出てるページがバラバラ。

通常だとこんな感じ。

ただよくよく見てみると中の広告が横にはみ出しちゃってる状態。

初めからスマホで普通に見てる場合にはそういう問題は出ないんだけど、

パソコンで大きい広告を表示させておいて、いきなりブラウザの画面を小さくしたりした場合に、

こんな感じで横の方までずーっと広告がはみ出しちゃってるような状態。

そこまで大きい問題ではなかったのでもう放置でいいかなとも思ったのだけど、

Google(グーグル)様に媚びへつらいながら生きていかなくてはいけないので、一応最低限の処置だけはしておく事に。

ただここ最近全くコードを見たり書いたりしてなかったため、一体どうすればいいのやらと、

多少苦労はしましたが、一応広告が枠からはみ出す問題は解決。

という事で今回はそこら辺のやり方をシェア。

Googleアドセンスの広告が枠からはみ出る問題について【モバイル ユーザビリティで問題が検出されました】

問題としては、Googleのアドセンス広告がサイトに表示される際に

何やら勝手にいろんなIDやらクラスやらが追加されて、

尚且つ勝手に画像のサイズから何からまでをHTML側で設定されちゃってたというのが原因。

という事で今回問題になってたのがこの部分。

.google-auto-placedというクラスと、insという部分。

とりあえずここら辺の問題にそんなに時間を割きたくなかったのと、

コードを触るのが久々過ぎてちょっと面倒だったので、とりあえず無理矢理サイズをCSSで設定する事に。

という事でこんな感じのCSSを追加。

そうするとこんな感じで直る。

という事で今回は、!importantを追加して無理矢理CSS側でサイズの設定をしている感じ。

なんかグーグルアドセンスの広告の奴がHTML側で勝手にいろんな事をやっちゃってくれてるので、

とりあえず今回は無理矢理応急処置。

もしまた何かしらの不具合が出るようならまた時間がある時に見直してみる予定。

という事でとりあえず、今現在広告が枠からはみ出してしまって困っている。

もしくはグーグル様からお叱りを受けている。

その結果、いろんなサイトを見てみたけど全く状況が改善がされないなどの問題が出てる人に関しては、

このやり方で応急処置をしておくというのも方法の１つ。

そしてまた時間のある時にじっくり問題を少しずつ解決していけばいいのでは？と。

どうにもこうにも面倒だという人は、最悪WordPressのテーマを変えるというのもありだと思う。