モバイル版でアドセンス広告が右にはみ出るトラブルを解決

f:id:kawarun:20200917180348j:plain:w450:h350

こんにちは、カワルンです。
今日はGoogleAdsenseの広告のお話です。

わたしは記事中にアドセンスのレスポンシブ広告を貼っています。

レスポンシブ広告とは ユーザー側のデバイスの画面サイズに合わせて、広告サイズやフォーマットを自動調整してぴったり表示する広告。
GoogleAdsenseの場合は「ディスプレイ広告」と「リンク広告」が該当する。

PCから見ると不自然ではないのですが、スマホで見ると広告の右側がはみ出しています。
写真のように右上を見るとわかりやすいのですが、見切れています。
f:id:kawarun:20200917152048j:plain:w250:h250

なのでスクロールすると、上下だけではなく左右にも画面が動いてしまう状態でした。

f:id:kawarun:20200917152034j:plain:w250:h250

左右に画面が動くと見づらくて不便です。
同じような症状がある方は、あっさり解決できたのでためしてみてくださいね。

広告が右側にはみ出る症状
修正方法
広告コードを変更しても問題ない？
おわりに

<スポンサーリンク>

広告が右側にはみ出る症状

先ほども紹介したとおり、私のブログをスマホから見ると、アドセンス広告が右側にはみ出て表示されます。
スクロールすると上下だけではなく、左右にも画面が動く状況です。

どのような状況か、修正前のページのリンクを貼っておきます。
気になる方は画面が左右へぶれるのをチェックしてみてください。

■ 修正前のページ ■

手軽にぬか漬けができる！「かんたんぬか美人」でユニーク漬物 - 書く、走る。

このような症状は、使用しているブログテーマなどにより起きるようです。

修正方法

元々のアドセンスのコードは以下のようになっています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- スポンサー検索 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXX"
     data-ad-slot="XXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true">
</ins>
<script>
      (adsbygoogle = window.adsbygoogle || []).push({});
</script>