いま見ているWebページのCSSを差し替える方法

あるいは、WinIE以外で「強制スタイル」を実現するためのメモ。

見出し一覧

  1. 概要
  2. ブラウザに依存しない方法
  3. 主要ブラウザ別の方法
    1. Internet Explorer(Windows)
      1. コンテクストメニュー追加セット
      2. Bookmarklet
    2. Gecko系ブラウザ(Mozilla, Firefox, など)
      1. Bookmarklet
      2. コンテキストメニュー拡張
    3. Opera
      1. ユーザーモード
  4. 作成者のCSSを解除したい時は?

概要

Webページ作成者によるお仕着せスタイルシートを引きはがして、簡単に他のCSSを被せるための方法を紹介しています。

ユーザースタイルシートを使う手もありますが、作成者CSS・ユーザーCSSそれぞれのON/OFFを簡単に切り替えられるわけではない(除Opera)ので、それ以外の方法を紹介しています。

Windows以外の事はよく分からないので、ここには載せていません。ごめんなさい。

ブラウザに依存しない方法

[ワツニュ]人ん家のスタイルシートで表示のようなゲートウェイを使えば、色々なサイトに色々なスタイルを適用させることが出来ます。

たとえば、W3Cのトップページを当サイトのスタイルで表示するということも可能です。

メリット
どのブラウザでも変わらず動かせる。
デメリット
サーバとの通信が必須。
ローカルファイルは全く扱えない。

主要ブラウザ別の方法

Internet Explorer(Windows)

コンテクストメニュー追加セット

コンテクストメニュー追加セットの「強制スタイル」を使います。

コンテクストメニューから「強制スタイル」を実行すると、$windir$\Web\user.cssに置かれているCSSが、現在表示中のWebページへと適用されます。

メリット
通信が不要。
右クリックからすばやく呼び出せる。
デメリット
スクリプトを無効にした環境では動かない。

Bookmarklet

ブックマークレットを使う方法もあります。

outsider reflexLatest topics > Past > 2005 > 03 > 7th dayに掲載されているPiro氏作のスクリプトは、IE系/Gecko系のブラウザに対応しています。使い方はリンク先を参照して下さい。

メリット
Bookmarkletなので、インストール/アンインストールが簡単(ブックマークを編集するだけ)。
デメリット
スクリプト無効の環境では動かない。
通信が必要(Gecko系の場合。IEでは file:/// ストリームが使える)。

Gecko系ブラウザ(Mozillaなど)

Bookmarklet

1. Camino べんりセットを使う

Camino べんりセットに含まれている「スタイル無効化」を改造します。

javascript:var bsetDenyStyle = { noStyleURL : 'http://...', noStyleLabel(以下省略)
2. Piro氏作のBookmarkletを使う
先述したBookmarkletはGecko系ブラウザでも有効です。
メリット
Bookmarkletなので、インストール/アンインストールが簡単(ブックマークを編集するだけ)。
デメリット
スクリプト無効の環境では動かない。

コンテキストメニュー拡張

コンテキストメニュー拡張の「追加のスタイル」を使う方法もあります。

設定画面で保存したCSSの内容を、現在表示中のWebページへと適用させることができます。

リロードした後もスタイルが保存されているのは、好みの分かれるところです。

メリット
通信が不要。カスタマイズ性が高い。
デメリット
重い(普通の使い方じゃないですが、50KBくらいの)CSSを使おうとすると動作も相当に重くなる。
CSS切り替えJavaScriptとの相性があまり良くないかも知れない。

Opera

ユーザーモード

Operaには、こうした用途を実現するための機能が初めから備わっています。

ユーザースタイルシートを適宜設定したのち、Opera7ではCtrl + G、Opera8ではShift + Gの操作によってユーザーモードへと切り替えれば、自前のスタイルシートを表示中のWebページへと適用させることができます(ユーザースタイルシートは、Opera8.5においては「ツール(T)→設定(R)→詳細設定→スタイル オプション」から設定します)。

また、OperaのインストールされたフォルダにあるOperadef6.iniの[Local CSS Files]セクションを編集することで、複数のユーザーCSS(ローカルCSSと言うべきか)を設定することも可能です。

設定例
[Local CSS Files]
;(「Name 1」の行から「File 11」の行まではそのまま)
Name 12=My style
File 12=c:\usercss\mystyle.css
メリット
通信が不要。スクリプト無効の環境でも問題なく動く。

作成者のCSSを解除したい時は?

切り替え・差し替えではなく、単にCSSを解除してしまいたいのであれば、

……などを使用するのが良いと思われます。Operaであれば、ユーザーCSSを設定せずにユーザーモードにすると作成者スタイルが解除されます。


作成日
2005-1-28
更新
2006-02-10(OperaのローカルCSSについて加筆)
2005-10-10(Piro氏作成のBookmarkletについての情報と、Opera8でのショートカットキーを追記)
TAL (tal@quadspace.net)