Adsence使いは要注意！広告非表示で閲覧されるとレイアウトが崩れてた話

　今日、Twitterでお友達のブロガーさんからこんなこと言われました。　

https://twitter.com/meerkat_hatena/status/403081154149900288

　本来、意図していたレイアウトはこんな感じ。

　これの右側にある「相互RSSのブログパーツ」が、何故かタイトル部分に重なってしまってたわけですね。

　僕はこのレイアウトを作成したとき、mac環境でしか表示を確認してませんでした。

　だからWindowsだと崩れちゃうパターンかな？

　と思って、久々にWindowsパソコンを起動して確認してみたのですが……

　全然崩れてなかった。

　えー、なんでやああああ！！

　どうしていいかさっぱりわからなくて、半泣きでぬいぐるみのクマさんに抱きつきながら、想定されうる要因を考えてみたのですが……。

　その途中で、ふとおかしなことに気付きました。

　「あれ、この画像よく見ると、

　タイトル下の広告バナーが表示されてなくね？」

　これでピンときた！！

　あ、なるほど。

　このレイアウト崩れを教えてくれた人は、ブラウザの設定で広告非表示にしているんだ。

　だから、そこに本来あるはずだったバナーが空っぽになっちゃったので、そのぶん右側のRSSブログパーツが、左に食い込んでしまったんだ！！

　というわけで

　adsence広告をdivタグで囲って、そのdiv自体にwidthとheightを指定してみました。

　すると……

https://twitter.com/meerkat_hatena/status/403092352014639104

　よっしゃあああああああああああああ(´;ω;`)(´;ω;`)(´;ω;`)(´;ω;`)！！

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

　まとめ

1. 広告は、ブラウザ側の設定によっては、非表示にされてしまうことがあります。
2. だから広告ブロックが消えてたとしても問題ないレイアウトを、心がけないといけません。
3. 広告枠全体を指定しているdivに、広告と同じサイズのwidthとheightを指定するのが最もお手軽な解決方法です。

　以上でござるます(`･ω･´)

　広告周辺のレイアウト崩れに悩んでる人がいたら、

　参考にしてみてくださいー。