アドセンス

【アドセンス】レスポンシブの表示が記事からはみ出る時の対処法

f:id:langnerdmom:20210311232518j:plain

こんにちは!

なんだかブログの表示がおかしいような…?

ブログの左右のバランスがおかしい

左右の表示がおかしなことに。。

手動で入れているアドセンスのせいだということが発覚、手直しをしました。

アドセンスのコードをコピー

参考記事【AdSense】スマホでアドセンスのレスポンシブ広告がはみ出す時の対処法!最適サイズの貼り方を紹介!!【大きさ】 | 日曜日のOneRoom

自動でサイズ変更するようにしていたのですが、その設定をすると表示が崩れることがあるようです。

<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--ここには広告の名前が入ります-->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

個別で入れるアドセンスをコピーすると、だいたいこんな感じになります。

0000と0が並んでいるところはご自身の数字になっているところです。

アドセンスの表示をレクタングルにする

サイズが自動で変わるようになっている部分をレクタングルに変更。

data-ad-format="auto"

autorectangleに変更する

アドセンスの表示の幅を変更する

最大の幅になっているのを無効化します。

data-full-width-responsive="true"

truefalseに変更。



出来上がったアドセンスのコード

設定を変えて出来上がったコードがこちら。

<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--ここには広告の名前が入ります-->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="rectangle"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

0000の部分はご自身のコードに変えてくださいね

あと、スクリプトを入れる場合、コードを

<div></p>

で囲んであげてください。

簡単に修正ができた

はてなブログに戻って来て、新しいテーマを適用。

カスタマイズをたくさんしていたので、どの部分が表示の崩れにつながってるのかが分かりませんでした。

アドセンスのコードを変えるだけで表示が戻ったのでほっとしています。