新しくなった AdSense広告 は左側に寄りません？
AdSense広告は出来ることならキレイに貼りたいですよね。画面いっぱいのAdSense広告はキレイに表示されるけど、一回り小さい広告は左詰めで表示されてしまう。
今までのAdSense広告であればmarginやtext-alignでセンター配置が出来たのに効かない。これは困った。
広告の乱れは収益の乱れ
当サイトではこの症状が出ていません。別サイトのAdSense広告に症状が出ました。前回の修正も当サイトではなく別サイトでした。サイトの違いは1カラムで作っている当サイト、別サイトはサイドバーありの2カラム。大きな違いはこれくらいなのでやはりカラム関係が怪しいとにらんでいます。
AdSense広告 貼ってますか？ ASPがあれば良い→A8.netの申し込みページ AdSense広告は出来ることならキレイに貼りたいですよね。しかしGoogle神も万能ではないらしく、どんなに頑張っても多[…]
AdSense広告 は iframe ?
新しくなったAdSense広告はiframeが使用されていて今まで以上に問題が起きやすい・・・
という情報を何処かで見ました。
今までiframeを使っていなかったのか？
iframeとは？
iframeだとなぜ？
などなど細かいことはさっぱりわかりませんが、iframeに対応したセンター配置の対処をしたらAdSense広告の表示がキレイにできるようになりました。
ホント、細かいことはわからないので参考程度、実践する場合は自己責任にてお願いします。
THE THOR ザ・トール 【 AdSense広告 】をキレイに表示 ”センター揃え編”
まず症状の再確認。
- 小さいAdSense広告が左寄せになり右側に余白ができる
- 画面100%サイズのAdSense広告の場合は問題なし
- divで囲みstyleでmarginやtext-alignを指定しても効かない
上記の症状に対処します。
AdSense広告のコードにクラスを追加
AdSense広告のコードにクラスを付けるコードを追加します。普段使用しているアドセンス広告のコードにクラスを以下のようにして追加。
※クラス名はわかりやすい名前を各自付けてください。
〜 AdSense広告コード 〜
</div>
実際のサンプル
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– ディスプレイ広告スクエア –>
<ins class=”adsbygoogle”
style=”display:block; min-width:200px; max-width:1200px; width:100%; height:100px;”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxxxxx”
data-ad-format=”auto”
data-full-width-responsive=”true”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
付けたクラスにセンター配置のcssを適用
追加cssを利用してさきほど設定したクラスにセンター配置を指定
外観 → カスタマイズ → 追加css
cssのコードは以下の通り。
/* iframeセンター寄せ*/
.center_adsense{
display: block;
margin: auto;
}
これで小さなAdSense広告もセンター配置されました。ﾊﾞﾝｻﾞｰｲ！
小さなAdSense広告が表示されないと確認できないのが大変でしたw
あとがき
AdSense広告の表示の乱れは様々な要因があるので各々しらみつぶしに調べていくしかないかな〜と思っています。
僕のサイトと同じ症状の人は、上記方法によって解決するかもしれません。が、あくまで参考、自己責任でお願いします。
