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

突然Googleから何やら奇妙なメッセージが届く事があるとは思うのですが、今回は、

「コンテンツの幅が画面の幅を超えています」という内容に関する対策方法について。

これはそのブログやサイトそれぞれで異なった原因があるのだろうけど、

例えばGoogleアドセンスの広告がサイトに表示される際に、

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

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

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

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

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

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

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

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

という事で問題になりやすいのがこの部分。

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

今回はここら辺サイズをCSSで調整、設定する事に。

.google-auto-placed {
    overflow: scroll !important;
}

ins {
    max-width: 100% !important;
    overflow: scroll !important;
}

という事で、こんな感じのCSSを追加すれば直ると思う。

!importantを追加して無理矢理CSS側でサイズの設定をしている感じ。

なんかGoogleアドセンスの広告が、HTML側で勝手にいろんな事をやっちゃってくれたりするパターンがあるので、

もしそういった場合にはこんな感じで無理矢理応急処置するのもあり。

そのサイトによっては影響が出ている原因のクラス名が違っていたりする可能性もある。

もうこういった事が頻繁に続いて、どうにもこうにも面倒だという人は、

最悪WordPressのテーマを変えるというのもありだと思います。