以前のエントリーでは拡張機能Adblock Plus: Element Hiding Helperを用いることでWebページ内の指定した部分を簡単に隠す方法を紹介しましたが、今回はXRAYと拡張機能Stylishで同様のことを行う方法を紹介します。

XRAYはWebページ内にて指定した部分のCSSレイアウトを簡単に調べることができるブックマークレットです。調べたいページで登録したブックマークレットXRAYを開くとそのページ内にポップアップウインドウが表示され、調べたい部分をクリックするとその要素の情報が表示されます。

隠したい範囲が微妙でうまく指定できない場合、その部分の内側を一度クリックして、ポップアップウインドウ内の「inheritance hierarchy」（継承階層）欄に子セレクタが表示されているので、1つずつ上の階層の子セレクタをクリックしていくと狙った部分を指定できます。
（子セレクタが「○○ > □□ > △△ > ××」となっている場合、「△△」のリンクをクリックすると1つ上の階層が選択されます。）

非表示にしたい部分をうまく指定できたら、Stylishでそのドメイン（またはページ）用スタイルへ以下のように記述します。

○○○ {display: none !important;}

○○○の部分ですが、XRAYのid欄に表示されていた場合は「#○○○」を、class欄に表示されていた場合は「.○○○」を、id欄とclass欄のどちらも空白だった場合はinheritance hierarchy欄の子クラスタを記述します。複数の要素を隠したい場合は「○○○, □□□, △△△」のようにカンマで区切って指定できます。

ページ内の要素を調べるのはDOMインスペクタやほかの拡張機能でもできますが、ブックマークレットだけで調べられるXRAYはお手軽で便利です。また、非表示にするのはuserContent.cssでもできますが、Firefoxを再起動しないと指定したCSSが反映されないため、任意のタイミングでプレビューできサイト/種類ごとに管理できるStylishのほうが扱いやすいです。

毎日や毎週のように見に行くサイトで、広告以外にジャマな部分だらけなページはXRAYとStylishを活用しちゃいましょう。