digital 千里眼 @abp_jp

アナログな日常とデジタルの接点

Adblock Plus を使うと lifehacker.jp の表示が乱れる場合の対処法


文字と背景が入り乱れて読めん...orz
  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓

Firefox 用アドオン Stylish もしくは Chrome 用エクステンション Stylish で修正できます

@-moz-document domain("lifehacker.jp") {
  #entry_actions {clear:both !important;}
}

を設定するだけです。面倒な場合は公開されている既存のスタイルを利用すると楽です

表示が乱れた理由
  • スクリーンショット1枚目に縦書きで「コメ…」という文字があるのが確認できます。これはエントリー末尾のコメント入力フォームのパーツです(しかも本来は横書き)。このパーツが吹っ飛んでいることによりレイアウトが崩れている状態であると認識できます
  • HTML の構造を見ると、メインカラム(#main)内の要素は本文(#entry_detail)からサイド(.entry_side)へ流れ、本文下のコメント入力欄(#entry_actions)と続いている…
  • つまり、Adblock Plus によって要素が非表示になり、サイドに回りこむ設定(float:right;)がクリア(clear:both;)されなかったのが表示が乱れた理由と考えられます
  • Stylish でそれを補完すれば元に戻せるというわけです