ユーザスタイルシートによるカスタマイズ(2) - Stylish

2007年1月14日(日) 18時4分 by level
B ?

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

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

もくじ

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

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

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 のユーザスクリプトとしてインストールすることができます。

最終更新: 2007年1月15日(月) 12時45分

コメント

コメントはありません。

トラックバック (2)

トラックバックは検索対象外です。