XULのタグ一覧
HTMLと同じようにXULにも多くのタグが存在しますが、XULは今でもバージョンアップが行われており、その仕様が安定しておりません。
そのため、Geckoエンジンのバージョンアップに合わせて知らない間にXULのタグが増えていたりします
頻繁に出会うモノに関してはXULチュートリアルで知ることが出来ますが、その他すべてのタグに関しては、現在日本語資料がありませんのでXUL Planet内に、XULのリファレンスで追ってください
まぁ、実際は殆どのタグが名前だけで予想の付くものなんですけどね
実際のCSSファイルとXULチュートリアルを読んで予想の付かない所に関してはFirefox(またはMozilla)の内部のXULファイルを実際に読んで、さらに運が悪いとそれが使っているJavaScriptまで潜ることになりますが、やってみた経験としてそこまでやるとなんというか…気力か何かが尽きます
全容は、慣れながら把握していくのが良い方法かな…と自分では思っています
基礎知識の復習
Mozillaテーマ内部では、CSS2でのプロパティやセレクタがごく当たり前のように使われていますので、今までWebページのデザインのためのCSSを編集してきた人から見ると、知らない書式がかなりたくさん出てくることになると思います(IE6は全くと言っていい程CSS2に対応していないので)
また、Moziila等のGecko系ブラウザは-moz-で始まる独自拡張のプロパティやちょっと特殊なセレクタ等もあります。
プロパティに関してはXUL Planet:Style Propaties(英語)に、その一覧があります。また、CSS研究所の独自拡張 XUL関連CSSも参考になります。
Mozilla独自拡張関連
Mozillaには、WWWCで策定中のプロパティの実験的な先行実装や、XULでの表示のために必要なプロパティとして、規格外のプロパティが多く存在します
そのすべては、最初が-moz-で始まるため、一目でそれと分かるのですが。役割に関しては分からないものも多数あるので、良く見かけるものに関しては解説を付けておきます。
-moz-border-radius-
少し有名なものですが、
-moz-border-radius:○px;と書くことで、縁の部分を丸くします -moz-border-colors-
border-width:3px; -moz-border-top-colors:色1 色2 色3;と書くことで、ボーダーに２色以上の色をグラデーションの様に付けることが出来ます。
- -moz-binding
-
XULに対する拡張機能として付いている、XBL (Extensible Binding Language：伸長性のある紐付け言語) でタグと表示を結び付けています。
XBLについて話し出すと、明らかにテーマ作成についてを脱線するかなりの分量になりますので、対処療法にまりますが、迷わずこのプロパティを消してしまって、スタイルを書き直すのが一番楽な方法です
- -moz-image-region
-
-moz-image-region(上 右 下 左);と書くことで、画像を切り抜きます
メニューに使われている画像はそれなりに適切に設定されているので、画像のサイズ自体を変更したい場合はそんなに多くないと思うのですが、使うときは使いますから
-moz-opacity-
イメージの透明度を指定します、
-moz-opacity:0.5;と指定すると半透明になる感じですね現在のバージョン（Firefox1.5以降?）ではCSS3のOpacityプロパティが正常に動くのでこちらに入れ替えられています
CSS2関連
CSSのセレクタですがCSS2で規定されているものに関しては知らない人もいると思うので紹介しておきましょう、見かけることになるのは次の二つです
treecol[insertafter="true"]
- E[foo="warning"]
- foo属性値が「warning」であるE要素にマッチする。
treechildren::-moz-tree-row(selected)
これは基本的には次のセレクタの応用になりますね
E:lang(c)- 内容がcという言語で書かれているE要素にマッチする。（言語情報の指定方法は構造化言語によって異なる。）
先頭に-mozが付いているように、Mozillaの独自拡張になります、意味は今理解する必要はないので、見つけたときは軽く無視しておきましょう
その他に関しては、他のサイトでCSS2を実際に学んで頂くのが良いと思います
フォルダ構成から
テーマの各フォルダは大体こんな構成になっています
| browser | Firefoxブラウザの細かい設定 |
| communicator | 触る必要なし、無視すべし(というかもう最初から無いテーマとか多いかも) |
| global | 大まかな設定は、全てここで済ませてください |
| mozapps | 基本的には、別Windowで表示される拡張機能に当てます、Mozillaの拡張等もココで設定 |
| help | 名前の通りヘルプの装飾を行います |
普通、デザインを弄るときには
- globalフォルダ
- borwzerフォルダ
- mozappsやhelpフォルダ
という順番に触っていくのが順当ですので、まずはglobalフォルダから順当に弄っていきましょう
また、各フォルダ内部には、さらにフォルダがありますが、これらも各々装飾する部分が決まっています。特に必要な箇所はこの辺りでしょうか。
browserフォルダの詳細
- browser/bookmarks
- ブックマーク＞このページをブックマーク、ブックマーク＞ブックマークの管理等ブックマーク関連のデザインが集まっています
- browser/preferences
- ツール＞オプションから呼び出すFirefoxの設定画面の装飾を行います
mozappフォルダの詳細
- mozapps/downloads
- ツール＞ダウンロードから呼び出せる、ダウンロードマネージャーの装飾を行います
- mozapps/extensions
- ツール＞アドオンから呼び出せる、アドオンの装飾を行います
Firefox内部のclass、idの特定法
テーマの変更を行っているとき、classやidを特定できない場合が多々あります。
CSSを書き換えながらトライ&エラーである程度分かる所もあるのですが、最終的にはFirefox内部を覗かないといけません。
まずはMozillaFirefoxの実行ファイルのあるフォルダの下(Windowsならc:\Program Files\Firefoxが一般的)。そこのchromeフォルダを開いてください、その中に
| browze.jar | ブラウザのデフォルトのXULファイル |
|---|---|
| toolkit.jar | デフォルトで搭載されている、拡張機能等のxulファイル |
| classic.jar | ブラウザのデフォルトのテーマ |
というファイルがあるので、zip形式で解凍すれば、Fireox内部を構成しているファイルがあります。
ここから、XULファイルを解読しながら、classやidを特定して行って下さい。
ただし、XULも必ずしも単純に出来ているわけではなく、ときには内部のJavaScriptを読んでidを特定したり、XBL Bindingを読んで、造りを解読したりしながら苦労しながら知る場面が多々あります
これは経験論なのですが、悩んでも特定が難しい箇所へのデザインは、ダメなときはダメとして諦めてしまうのも一つの手ではないかな…、と思っていたりします。
正直な話、firefoxはバージョンが上がる度に、微妙にタグの構成などが変わるので、完全な対応表というのは期待できないというのが現状です(globalフォルダ内部でも毎回と言っていいほど変更がある)
というわけで、テーマ内部のcssファイルを開いて探したり、実際のXULファイルを読んだりして変更したい箇所の対応するタグは何なのかを探していく必要があります
ですが、バージョンが移っても変更がかからない部分も結構あるので、幾つか人が探したのを表にしてあります
(この表は黒い羽のshiroさんより頂きました、ありがとうございます)
一応、xul解析ではなかなか分からないと言う場合の解決策として、画像から探すという方法がありますね
- 変更したい場所に使われている画像が何処のフォルダに入っているか探す
- 画像のファイル名を取得してgrep系のツールで検索する
そういう意味ではgrep系ツールは、現段階では必携ツールの一つといえるかもしれません
