このセクションでは、ウィンドウのスキンを変更する方法を説明します。
スキンとは、XUL ファイルに適用されるスタイルシート、イメージ、振る舞いのセットです。別のスキンを適用すれば、その機能を変更することなく、ウィンドウの外見を変えることができます。6 月 1 日現在の Mozilla ビルドのデフォルトスキンは、モダン (modern) と呼ばれています。これは、chrome/skins ディレクトリーにあります。引き続くセクションでは、モダンスキンを使っているものとします。
Mozilla ウィンドウを簡単なパーソナライズされた外見にするのは簡単で、ウィンドウと関連付けられたスタイルシートを変えるだけです。大きく変更する場合は、完全に新しいスキンを作ることによって行ないます。Mozilla の設定ウィンドウには、デフォルトスキンを変更するパネルがあります (あるいはそれが作られるでしょう)。
スキンは、CSS を使って記述されます。それによって、要素を描画するのに使われるカラーや境界、イメージが定義できます。
ファイル chrome/skins/modern/global/skin/global.css には、スタイル定義のほとんどがあります。このファイルを変更すれば、簡単な変更ができることが分かるでしょう。例えば、ファイルの最後に次のコードを追加すると、menubar 要素すべての背景色を赤に変えることができます。
menubar {
background-color: red;
}
|
この変更を行なった後 Mozilla ウィンドウを開くと、メニューバーは赤になります。この変更はグローバルスタイルシート (global.css) に対して行なったので、これはすべてのウィンドウに影響を与えます。これは、ブラウザーのメニューバー、ブックマークのメニューバー、そして「ファイル検索」のメニューバーも赤になるということです。
変更の影響範囲を一つのウィンドウだけにするには、その XUL ファイルと関連付けられたスタイルシートを変更します。例えば、アドレスボックスウィンドウのメニューコマンドに赤の境界を付けるには、次のコードを chrome/skins/modern/messenger/skin/addressbook/addressbook.css に追加します。
menuitem {
border: 1px solid red;
}
|
スキンディレクトリーの一つを見れば、その各々には、多数のスタイルシートとイメージがあるのが分かるでしょう。スタイルシートはイメージを参照します。内容にスキンを付けたい場合でも、XUL ファイル内に直接イメージを参照するのは止めるべきです。これは、スキンによってはイメージを使わないからです。CSS を使ってイメージを参照するようにすれば、それらは簡単に削除できます。こうすることにより、特定のイメージファイル名への依存もなくすことができます。
次のように、list-style-image プロパティーを使えば、ボタンやチェックボックス、その他の要素にイメージを割り当てることができます。
checkbox {
list-style-image: url("chrome://global/skin/check-off.gif");
}
checkbox[checked="true"] {
list-style-image: url("chrome://global/skin/check-on.gif");
}
|
このコードは、チェックボックスと関連付けられてイメージを変更します。最初のスタイルは、通常のチェックボックスのイメージを設定します。2 番目のスタイルは、チェックされたチェックボックスのイメージを設定します。変更子 (modifier) 'checked=true' によって、この条件にマッチした要素だけにこのスタイルが適用されます。
(進む) 次のセクションでは、新しいスキンの作り方を見ることにしましょう。