どもっダンデライオンです。
今回は、自サイトのレスポンシブ広告の表示がおかしいことに気が付き立ち上がりました。
「なんか広告が中途半端に切れている。。。」
PCでは広告は掲載されているのですが、なぜかスマホでは中途半端に途切れている現象が起きていました。
「これはいかん!!直さなければ!!」
あれやこれややってるうちに無事に解決したので解決方法をここに書き留めます。
では、グーグルアドセンス記事内に貼った「レスポンシブ広告」がズレている時の対処方はこちら!!
レスポンシブサイズのズレたり中途半端に途切れる時の原因
主な原因は、広告を設定する箇所の幅または余白ですね。
アフィンガー4でのモバイル表示の場合は、余白が15px設定してあるためその余白を取り除けば無事に解決します。
また、アフィンガー4に限らず自サイトの幅や余白が分かればあなたのサイトに合わせたレスポンシブサイズの広告を設定することができます。
グーグルアドセンス「レスポンシブサイズ」サイトに合わせた調整方法
まずは、あなたのサイトの余白を調べましょう。
アフィンガー4の場合、サイドの余白は15PXで設定されているのでサイドの15PXの余白を調整することで広告のズレ・キレが修正されます。
<div style="margin-left:-15px;margin-right:-15px;"> ここに広告コードを入れてください </div>
<div style=”margin-left:-15px;margin-right:-15px;”>
↑このコードで左右の余白15pxを消すことができます。
-15pxはアフィンガー4の場合の数値です。
あなたにサイトに合ったpxを記述してください。
グーグルアドセンス「レスポンシブサイズ」左にずれている場合の調整方法
左にずれている場合は、右に寄るように右側の余白を調整してあげればおｋです。
左にずれているので、右の余白を消して右側に寄るようにしましょう。
<div style="margin-right:-●●px;"> ここに広告コードをいれてください </div>
<div style=”margin-right:-●●px;”>
↑このコードで右側の余白を調整することができます。
●●pxにはあなたのサイトに合ったpxを記述してください。
グーグルアドセンス「レスポンシブサイズ」右にずれている場合の調整方法
右にずれている場合は、左に寄るように左側の余白を調整してあげれおｋです。
右にずれているので、左の余白を消して左側に寄るようにしましょう。
<div style="margin-left:-●●px;"> ここに広告コードをいれてください </div>
<div style=”margin-left:-●●px;”>
↑このコードで左側の余白を調整することができます。
●●pxにはあなたのサイトに合ったpxを記述してください。
スポンサーリンクのコードと一緒に併用したい場合はこちら
スポンサーリンクを表記する際のコードと広告位置の調整どちらもしたい場合は下記のようにしましょう。
今回は、このサイトでも使っているスポンサーリンク表記のコードを使用しています。
<div style="margin-left:-●●px;margin-right:●●px;"> <p style="color: #888; text-align: center;"><span style="font-size: 80%;">スポンサーリンク</span> ここに広告コードを入れてください </div>
<div style=”margin-left:-●●px;margin-right:●●px;”>
↑このコードで左右の余白を調整することができます。
●●pxにはあなたのサイトに合ったpxを記述してください。
また、左寄り又は右寄りの場合は上記の例で調整しましょう。
