PR

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

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

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

 

 

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

f:id:noabooon:20131121021548p:plain

 

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

 

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

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

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

 

 全然崩れてなかった。

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

 

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

 

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

f:id:noabooon:20131121022404p:plain

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

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

 

 これでピンときた!!

 あ、なるほど。

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

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

 

 というわけで

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

 すると……

 

 

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

 

 

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

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

 

 

 

 まとめ

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

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

 

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

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