えむもじら

この記事は、Software Design 2007年1月号に掲載された拙著「Firefox 2 カスタマイズガイド」の一部を加筆修正したものです。

ユーザスタイルシートを用いてウェブページや Firefox 本体の見栄えを変更することができます。

もくじ

• ユーザスタイルシートを管理する Stylish
  • ユーザスタイルを管理
  • ユーザスタイルを作成
  • ユーザスタイルをインストールする
  • その他の情報
• about:config と user.js による Firefox のカスタマイズ（別ページ）
• ユーザスタイルシートによるカスタマイズ(1)（別ページ）

Stylishでユーザスタイルを管理

Stylish という拡張機能を用いるとユーザスタイルを簡単に管理できるようになります。

Stylish をインストールすると、このような管理画面から、ユーザスタイルに名前をつけて個別にオン／オフの切り替え、作成、削除、編集など、スタイルごとに管理ができるようになります。

ユーザスタイルを作成

新規作成を選ぶと、名前をつけて新しいスタイルシートを定義できます。ウェブページ用と Firefox 本体用のユーザスタイルシートはそれぞれ userContents.css と userChrome.css を使い分けて分けていましたが、Stylish ではユーザスクリプトの先頭の名前空間の宣言で区別します。名前空間は編集画面の挿入ボタンから簡単に追加することができます。

ユーザスタイルシートで使用する名前空間

ウェブページ（HTML）用名前空間
  @namespace url(http://www.w3.org/1999/xhtml);
Firefox本体（XUL）用名前空間
  @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

前項で紹介した、ストップボタンとリロードボタンを統合するユーザスタイルシートは XUL 名前空間を追加して以下のようになります。（参考）

ストップボタンとリロードボタンを統合

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#stop-button[disabled="true"] { display:none; } 
#stop-button:not([disabled]) + #reload-button { display:none; }

サイトごとのスタイルシートの作り方は 朝顔日記 - Stylish いいよに詳しいので参照してください。

ユーザスタイルをインストールする

userstyles.org/ ではさまざまなユーザスタイルが公開されており、ここから Stylish 内に簡単にインストールすることができます。

一例として、About 画面の画像をフォクすけに置き換えるユーザスクリプトをインストールしてみます。About Firefox: Foxkeh Edition | userstyles.org に行くと、[Show code]、[Show into Stylish]、[Load as user script] のボタンがあります。[Show into Stylish] をクリックすると「ユーザスタイルを作成」の項で示したのと同じ編集ダイアログが開くので、そこからコードの確認、プレビュー、登録ができます。なお、[Load as user script] ボタンでは Greasemonkey のユーザスクリプトとしてインストールすることができます。

その他の情報

• 朝顔日記 - Stylish いいよ
• userstyles.org: 英語のサイトですが、Stylish 用のユーザスタイルシートが多数登録されています。
• userchrome.css - Mozilla Firefox まとめサイト: ブラウザ上の表示を制御するためのユーザスタイルシート集です。
• usercontent.css - Mozilla Firefox まとめサイト: ウェブページの表示を制御するためのユーザスタイルシート集です。