このセクションでは、ウィンドウのスキンを変更する方法について記述します。
スキンの基礎
スキンは、スタイルシートや画像といった XUL ファイルに適用される振る舞いの情報をまとめたものです。 異なるスキンを適用することで、機能的な部分を変更しなくてもウィンドウの外観を変更することが可能です。 Firefox では、デフォルトでは 1 つのスキンが提供されていますが、 それ以外のスキンをダウンロードすることも可能です。 なお、異なるスキンを使用する場合も、XUL ファイル自体は同じになりますが、 使用されるスタイルシートや画像は、異なったものが使用されます。
Firefox ウィンドウの外観を単純に個人的に変更したい場合は、単にウィンドウと関連付けられたスタイルシートを変更するだけで可能です。 また、より大きな変更は、新規に全体をカバーするスキンを作成することで行うことができます。 Firefox では、デフォルトのスキンを変更するために、テーママネージャを提供しています。 (Mozilla の内部コードからは「スキン」、利用者のインターフェイスからは「テーマ」と呼ばれますが、これらは同じものを指しています)。
スキンは CSS を使用して記述し、
要素を描画するとき使用する色、境界線、画像といったものを定義することが可能です。
例えば、classic.jar ファイルには、デフォルトのスキンの定義が含まれています。
このアーカイブ中のグローバルディレクトリには、様々な XUL 要素の表示方法を指定するための主要なスタイル定義が含まれています。
このため、これらのファイルを変更することで、XUL アプリケーションの外観が変更できるようになります。
userChrome.css によるカスタマイズ
ユーザープロファイルディレクトリにある chrome ディレクトリに userChrome.css という名前のファイルを置くことで、アーカイブ自身は変更せずに、設定を上書きすることが可能です。
このディレクトリは、プロファイルを作成したときに作成され、いくつかの例が置かれているはずです。
また、userChrome.css でクロムファイルをカスタマイズするのと同様に、
ここに userContent.css ファイルを置くことで、ウェブページの表示をカスタマイズすることも可能です。
例えば、userChrome.css ファイルの一番最後に、次のような記述を追加すると、
すべての menubar
menubar {
background-color: red;
}
上記の変更をした後に開く Firefox のウィンドウは、すべてメニューバーが赤くなっているはずです。 この変更はユーザースタイルシートで行われたため、すべてのウィンドウに対して影響することになります。 つまり、ブラウザやブックマークのメニューバーはもちろん、チュートリアルで作成中のファイル検索ダイアログのメニューバーでさえも赤くなります。
スキンのパッケージ
特定のウィンドウに対してのみ変更を有効にするには、その XUL ファイルに関連付けられているスタイルシートを変更する必要があります。
たとえば、ブックマーク管理ウィンドウのメニューコマンドの周りに赤い枠をつけるのであれば、 classic.jar か、利用中のスキンのアーカイブにある bookmarksManager.css に、以下のような記述を追加します。
menuitem {
border: 1px solid red;
}
スキンのアーカイブのいずれかを見れば、それらには多くのスタイルシートと多くの画像が含まれていることに気づくはずです。 これらの画像は、スタイルシートから参照されるようになっています。 XUL で作成するコンテントをスキン対応にすることを考慮する場合、直接 XUL ファイルから画像への参照を置くことは避けなければなりません。 これはスキンのデザインによっては、画像は使用しない場合も、さらに複雑なデザインを必要とする可能性もあるからです。 CSS から画像を参照するように変更することで、XUL から直接参照している箇所を取り除くことは容易にできます。 また、これによって、XUL ファイルが特定の画像ファイル名に依存することも取り除くことが可能です。
CSS から、画像をボタンやチェックボックスなどの要素に設定するためには、
以下のように、list-style-image プロパティを使用します。
checkbox {
list-style-image: url("chrome://findfile/skin/images/check-off.jpg");
}
checkbox[checked="true"] {
list-style-image: url("chrome://findfile/skin/images/check-on.jpg");
}
このコードは、チェックボックスと関連付けられている画像を変更します。
1 つめのスタイルでは、通常のチェックボックスの画像を設定し、
2 つめのスタイルでは、チェックボックスがチェックされたときの画像を設定しています。
2 つめセレクタにある「checked=true」の修飾によって、checked 属性が true になった要素にのみスタイルが適用されるようになっています。
var el = env.locale; 関連ページ : Firefox のためのスキンの作成方法、CSS:はじめに
次のセクションでは、新しいスキンを作成する方法について見ていきます。