ココは何? 編集

userContent.cssを使って、ウェブ上の広告をカットすることができますが、そのまとめのページです。以下のリンク先を読むと参考になるかもしれません。また、DOMインスペクタがサイトの構造、製作者CSSを調べるのにとても役立ちます。是非使いましょう。

拡張Adblockとの違い 編集

userContent.cssはいわゆるユーザースタイルシートです。スタイルシート(CSS)とはHTML文書の表示を指定するファイルのことです。ユーザースタイルシートとはウェブ製作者が指定しているCSSに対してユーザー側からCSSを指定して、ユーザーがウェブの表示を変更できる仕組みです。つまり、サイトの外観を自分好みに変えることが出来ます。例えば、文字サイズが小さい、配色が見辛い、横幅が狭く固定されている、など自分好みでない部分を一度自分が読みやすいようにCSSを書いて変更すれば、以後訪れるたびに文字サイズを変更したりせずに済みます。Firefoxではサイト別に指定することが出来るので、かなり自由にいじれます。

基本的にはAdblockよりも自由度が高く、広告の親要素ごとカットしたり、テキスト広告もカット出来ます。しかし表示上は消えてもダウンロード自体は行われます。通常の広告カットはAdblock、それだけでは消えないような要素をCSSで消すなど、使い分けるといいかもしれません。

なお、Adblockとは違い再起動しないと変更が適用されません。再起動せずにCSSの編集がしたい場合は、JavaScript::Bookmarkletの「スタイルをテスト」というブックマークレットを使うか、 EditCSS(サイドバーでCSSを編集する拡張)やWeb Developer(ウェブ開発者向けの多機能拡張)を使うとよいでしょう。

広告カット例 編集

/* テキスト広告 */
a[href*="firefox.geckodev.org"] {
	display: none !important;
}
/* サイズが指定された広告をカットする */
[src][width="468"][height="60"] {
	display: none !important;
}

/* ID が指定されている広告をカットする */
#advertisement1 {
	display: none !important;
}

この書式が何を意味するかの詳細はW3C Working Draft CSS3 Selectors日本語)をご覧ください。FirefoxはCSS2も結構サポートしていますので(CSS3も一部、独自拡張などで適用可)適用の自由度は高いと言えます。デザインが崩れることがありましたら、display:none;の部分をvisibility:hidden;に書き換えてください。

さて、これより詳細に広告をカットする方法は「Firefox Help 広告をブロックする」にあります。

特定のドメインやURLのみ対象にする 編集

  1. 特定のドメインを対象にする。(" ")内を便宜書き換えてください。
  2. URLの先頭文字列が一致するサイトを対象にする。
  3. 特定のページを対象にする。
    @-moz-document domain("DOMAIN") {
    /* ここにスタイルを記述します */
    }
    @-moz-document url-prefix("URL") {
    /* ここにスタイルを記述します */
    }
    @-moz-document url("URL") {
    /* ここにスタイルを記述します */
    }

関連リンク 編集