Stylish で特定の要素を消す - CSS による要素の指定

1. Stylish で特定の要素を消したい

Firefox のアドオン Stylish を利用すると、ウェブサイトの表示をカスタマイズできる。

Stylish を使い、ウェブサイトの特定の要素を消したい。

例えば、NIKKEI NET に表示される中の「注目のニュース・特集」の部分を消したいとする。

 

2. Firebug で HTML の要素を特定する

最初に、アドオン Firebug を使い、消したい部分を特定する。

方法は、

1. 消したい部分で右クリック
2. 「要素を調査」を選択。

これにより、Firebug の HTML要素を調査するためのペインが、ウィンドウ下部に表示される。

消したい範囲の要素を特定するために、Firebug の中で HTML 要素を選択。選択すると、HTML の対応するウェブサイトの要素が青色で示される。

例の場合、「注目のニュース」というタイトルの部分と、その「一覧」に対して、要素と属性が指定されている。

• div --- id : news-P_M
  • div --- class : main-ctn cfix ---------- タイトル
  • table --- id : pickupNews-Box ---------- 一覧

つまり、この要素に対しては、class と id によって要素を指定することができる。

CSS による、要素の指定方法について、詳しくは以下を参照。

• cf. Selectors W3C Working Draft 15 December 2005

 

3. Stylish に CSS を記述

Firebug で消したい対象が特定できたので、Stylish の記述を行う。

1. Firebug で特定した、要素の属性 id または class を控えておく。
2. Stylish のアイコンを右クリック > 「スタイルを書く > www.nikkei.co.jp 用」を選択。
3. 「スタイルを追加」ウィンドウが表示されるので、以下を記述して保存。

#news-P_M > .main-ctn, #pickupNews-Box {display: none !important;}

 

display で要素を消す

CSS で、特定の要素を消すためには、

{display: none !important;}

none という指定は、The 'display' property によると、

none

This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout).

( cf. 6.4.2 !important rules )

 

CSS の要素を組み合わせて指定する

id と class については「クラス、idによる定義の局所化」を参照。

例において、「一覧」の方は id で指定されていた。よって、同一ページの中で pickupNews-Box と id が付けられている要素はない。id に対しては、接頭辞に `#’ をつけて指定する。

「注目のニュース」というタイトルの部分は、class で指定されていた。よって、同一ページの中で、他にも main-ctn という class を付けることができる。

main-ctn の親要素を調べたら、id 属性が付けられていた。よって、要素の親子関係を利用して、CSS を指定する。

Selectors W3C Working Draft 15 December 2005 の 2. Selectors を参考にした。

E F
an F element descendant of an E element

E > F
an F element child of an E element

E + F
an F element immediately preceded by an E element

E ~ F
an F element preceded by an E element

(Selectors より)

 

関連記事

• Stylish で特定の文字列を含む「属性」を持つ要素を消す
• Stylish で特定の URL ではじまるサイトのスタイルを書く
• Firefox の「進む」ボタンを常に隠す - ツールバーのアイコンの配置に影響を受けないように、Stylish で UI をカスタマイズ