このセクションでは、単純なスキンの作成方法について説明します。 なお、ここで作成するスキンは、単純化のためにファイル検索ダイアログのみを対象とします。
単純なスキン
以下に示す画像は、現在のファイル検索ダイアログです。
ここでは、これに適用するスキンを作成してみることにします。
通常、スキンはアプリケーション全体に適用されますが、
ここでは簡単にするために、ファイル検索ダイアログのみに焦点を合わせることにします。
このため、global.css ファイルではなく findfile.css のみを変更します。
なお、このセクションの記述は Mozilla スイートの Classic スキンから開始することを前提とします。【訳注: つまり、このセクションの内容は、まだ Firefox 対応になっていないようなので注意してください】
また、ファイル検索ダイアログで利用しているファイルは、編集前にバックアップを取っておいた方が良いでしょう。
今回のセクションでは、findfile.css ファイルを、カスタムスキンの中に作成する必要があります。
または、とりあえずコンテントディレクトリ (XUL ファイルを置くディレクトリ) に置いて、xml-stylesheet ディレクティブの URL を調整して参照する方法でも構いません。
後者の方法では、これまでに作成した findfile.css を直接変更して効果を確認することになり、
前者の方法は、カスタムスキンを作成して、その中に置いたファイルをリンクすることになります。
カスタムスキンパッケージを作成する
カスタムスキンの作成手順を以下に示します。(下記は古いバージョン向けの手順であり、Firefox 1.5 以降では異なっています。Firefox 1.5 以降での手順は マニフェストファイルにある「ファイル検索ダイアログの例」を参照してください)
- 適当な場所に、スキンのファイルを置くためのディレクトリを作成します。
- マニフェストファイル (contents.rdf) を、Classic または Modern スキンから作成したディレクトリにコピーします。
- マニフェストファイルの
referencesを編集して、新しいカスタムスキンの名前に変更します。例えば、referencesが 「classic/1.0」なのを「blueswayedshoes/1.0」のように変更します。 -
chrome/installed-chrome.txtに、次の形式の行を追記します。「skin, install, url, file:///stuff/blueswayedshoes/」このとき、最後の部分は作成したディレクトリを示すようにします。最後にスラッシュを置くのを忘れないようにしてください。
これまでの findfile.css を新しいディレクトリにコピーし、
これを元にして新しいスキンを作成していきます。
コピーしたファイルは、URL 「chrome://findfile/skin/findfile.css」で参照することが可能になります。
このため、XUL 側の xml-stylesheet の参照先をあわせて変更します。
スタイルルールを追加する
まず最初に、どのような変更を加えたいのかを決めておきたいと思います。 今回は、簡単な色の変更、ボタンのスタイルの変更、隙間の微調整を行ってみることにしましょう。 まずはメニュー、ツールバー、タブパネル全体から始めることにします。
以下のスタイルルールを findfile.css に追加することで、その下の画像で示すように外観が変化するはずです。
window > box {
background-color: #0088CC;
}
menubar,menupopup,toolbar,tabpanels {
background-color: lightblue;
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
}
caption {
background-color: lightblue;
}
- ウィンドウのすぐ内側にあるボックス (ウィンドウのすべての内容を実際に囲んでいる) の色は、青色に変化しています。
- この青色は、タブが置かれている部分の背景とウィンドウ下端に沿った部分で見ることができます。
- 4 つの要素
menubarmenupopuptoolbartabpanels - また、良く見れば、これら 4 要素の境界線がより立体的になっていることも判ると思います。
-
caption
上記の最初のルール (window > box のもの) は、ウィンドウの子ボックスの色を変更することを指定しています。
しかしながら、この方法は最良ではなく、
本当ならスタイルクラスを使用するように変更するべきところです。
それでは、次にこれを行ってみることにしましょう。
スタイルクラスを使用するように変更しておけば、今後この XUL ファイルに変更を加える場合に、ウィンドウの最初の子要素をボックスにしておく必要がなくなります。
CSS:
.findfilesbox {
background-color: #0088CC;
}
XUL:
<vbox class="findfilesbox" orient="vertical" flex="100%">
<toolbox>
タブの角に丸みをつける
次は、タブを変更してみましょう。 選択されているタブを太字にします。 また、タブの角に丸みをつけるように変更してみます。
tab:first-child {
-moz-border-radius: 4px 0px 0px 0px;
}
tab:last-child {
-moz-border-radius: 0px 4px 0px 0px;
}
tab[selected="true"] {
color: #000066;
font-weight: bold;
text-decoration: underline;
}
2 つのルールによって、通常のタブの外観が変更されます。
1 つめのルールは最初のタブの、2 つめのルールは最後のタブの、それぞれ角の丸みを設定しています。
このために使用するのは Mozilla 固有のスタイルルール -moz-border-radius で、これは境界線の角の丸みを設定します。
これにより、最初のタブの左上の角と、最後のタブの右上の角は 4 ピクセル分丸められ、残りの角は 0 ピクセル、つまりまったく丸めを行わない指定になっています。
この値を増やせば、より丸みを帯び、減らせばより角張った外観になります。
3 つめのルールは、selectedtrue に設定されているタブに対してのみ適用されます。
これによって、選択されているタブのテキストは濃い青色の下線が引かれた太字になります。
画像から、このスタイルが最初のタブにのみ適用されていることと、そのタブは選択状態であることが確認できるはずです。
ツールバーにアイコンを追加する
また、現在のツールバーのボタンは、メニューの項目との違いが若干判別しにくいように思われます。
これを明確にするためには、ツールバーのボタンにアイコンを加えるのが良さそうです。
Mozilla スイートの Composer には、「開く」や「保存」ボタンなどのために、いくつかのアイコンが用意されています。
ここでは、これらのアイコンを利用して手間を省くことにします。
【訳注: Firefox の場合、Composer はないのでこれらのアイコンは利用できません】
ボタンに画像を設定するためには、CSS の list-style-image CSS プロパティを使用します。
#opensearch {
list-style-image: url("chrome://editor/skin/icons/btn1.gif");
-moz-image-region: rect(48px 16px 64px 0);
-moz-box-orient: vertical;
}
#savesearch {
list-style-image: url("chrome://editor/skin/icons/btn1.gif");
-moz-image-region: rect(80px 16px 96px 0);
-moz-box-orient: vertical;
}
Mozilla では、要素から画像の一部分だけを利用できるようにするために、独自のスタイルプロパティ -moz-image-region を提供しています。
これは、画像をクリップする設定であると考えることも可能です。
このプロパティで画像上での位置とサイズを指定すると、ボタンには画像の指定領域のみが表示されるようになります。
これにより、複数のボタンで同じ画像ファイルを使用しつつ、それぞれには異なる領域を割り当てることが可能になります。
多数のボタンについて、ホバー (マウスが重なっている)、アクティブ (押下されている)、無効などの状態に応じて画像を変えるような場合には、通常の方法で複数の画像ファイルを用意して使用するよりもスペースを節約することができます。
上記のコードでも、複数のボタンで同じ画像を利用していますが、それぞれは異なる領域を表示するように設定されています。
この画像 (btn1.gif) の全体を表示させて見た場合には、 16 x 16 ピクセルの小さな画像が格子状に並んでいるのが確認できるはずです。
また、-moz-box-orient プロパティは、ボタン内を垂直配置にするために利用しています。
これは、画像がラベルより上に表示されるようにするために必要になります。
このプロパティは、orient
その他の変更
次に、下端にあるボタンについても若干の変更を行いますが、 ここでも手間を省くため、Mozilla のアイコンを再利用します。 なお、実際に独自のスキンを作成する場合には、新たにアイコンを作成するか、あるいは流用する場合であっても、アイコンはコピーしておく必要があります。 例えば、このセクションの例を、配布できるように変更していく場合には、アイコン用のファイルを作成するスキンの中にコピーして、URL もそれに応じて変更する必要があります。
#find-button {
list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg");
font-weight: bold;
}
#cancel-button {
list-style-image: url("chrome://global/skin/icons/images/close-button.jpg");
}
button:hover {
color: #000066;
}
上の 2 つのルールによって、ボタンにも画像を設定し、 Find ボタンはデフォルトであることを示すために太字にします。 また、3 つめのルールは、ホバー (マウスがボタン上に重なっている) 状態のときに適用されて、テキストを濃い青色に変更します。 最後に、以下のルールによりマージンを設定して、項目の周囲の余白を若干調整します。
tabbox {
margin: 4px;
}
toolbarbutton {
margin-left: 3px;
margin-right: 3px;
}
ここまでの変更によって、ファイル検索ダイアログの外観は次のようになります。
画像からわかるように、スタイルルールにいくつかの簡単な変更を加えるだけで、ファイル検索ダイアログは外観は完全に別物になりました。 また、さらに続けて、メニュー、ツールバーのグリッピー、入力欄、チェックボックスなどの要素に変更を加えることも可能です。
グローバルスキンの作成
ここで作成したスキンは単純なもので、かつファイル検索ダイアログのみに適用可能なものでした。
このスキンに対して行った変更のうちのいくつかは、グローバルスタイルシート (スキンの global ディレクトリに置かれているもの) に組み込んで、すべてのアプリケーションに適用されるようにすることも可能です。
例えば、チェックボックスの画像がファイル検索ダイアログだけ他と異なっていると、若干の違和感があると思います。
こういった変更は、グローバルスタイルシートの方に組み込むべきでしょう。
それでは、 CSS スタイルを findfile.css から global.css に移し、Mozilla のいくつかのダイアログ (例えばクッキービューア) を表示して、
追加されたルールが反映されることを確認してみてください。
ただし、いくつかのルールは、グローバルスタイルシートに元から存在するルールと衝突してしまいます。
例えば、ボタンやタブなどには元からルールが定義されていますが、上でも追加のルールが定義されています。
グローバルスキンを変更する場合には、すでに存在するルールに、変更する内容をマージする必要があります。
スキンの有効性を、最大限に引き出すには、外観に関連したスタイルルールの宣言を、個別のスタイルファイルではなく、グローバルディレクトリに置くようにします。
ここには、色やフォント、汎用ウィジェットの外観が含まれています。
そうせずに、例えば findfile.css のような、ローカルなスキンファイルで何かの色の変更を行っていた場合には、
利用者がグローバルスキンを変更したとき、ダイアログの外観がおかしくなる可能性があります。
利用者が、デフォルトのスキンを利用していることを期待してはいけません。
var el = env.locale; ここまでのファイル検索ダイアログとスキンの例 : ソース 表示 Stylesheet
var el = env.locale; 関連ページ : Mozilla による CSS の拡張、CSS リファレンス
次のセクションでは、XUL アプリケーションを地域化 (ローカライズ) する方法について説明します。