Repy's side>Repy's programs side>Repy's free software side>
Firefoxのテーマ作成
Firefoxのテーマを作るにあたり重要なことがひとつ、CSSの見方書き方を知らないとどうしようもない。当然CSS以外にもHTMLを読めないとつらい。
CSSって何？という人は簡単な作り方の方へ
HTMLもCSSも知ってるという人は、まず、ベースとなるテーマを準備します。僕はQuteをベースにしました。
最初にベースとなるテーマファイル(.jar)を解凍します。(.jar)ファイルはZIPファイルの拡張子が違うだけなのでZIP解凍ソフトで解凍します。
中にあるCSSを書き換えていきます。ここからの内容は一部Quteのみという場合があります。
テーマで一番重要なツールバー、メニューバー、コンテキストメニュー、タブ、ステータスバーを書き換える方法を紹介します。
ツールバー
global/toolbar.css
toolbox {
ツールバー全体
}
global/toolbarbutton.css
toolbarbutton {
ボタン
-moz-appearance: none; /* XPスタイル解除 */
}
メニューバー、コンテキストメニュー
global/menu.css
menu,
menuitem {
メニューリストの文字色
}
menu[disabled="true"], menuitem[disabled="true"],
menu[_moz-menuactive="true"][disabled="true"],
menuitem[_moz-menuactive="true"][disabled="true"] {
メニューにある選べないもの
}
menubar > menu[_moz-menuactive="true"] {
メニューバーの選択中
}
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"],
popup > menu[_moz-menuactive="true"],
popup > menuitem[_moz-menuactive="true"] {
メニューリストの選択中
}
menuseparator {
区切り線
}
global/popup.css
menupopup,
popup {
メニューリスト全体
}
タブ
global/browser.css
.tabbrowser-tabs {
タブエリア全体
}
global/tabbox.css
tab {
タブ自身
}
tab[selected="true"] {
選択中タブ
}
tab[beforeselected="true"] {
選択タブの左のタブ
}
tab[afterselected="true"] {
選択タブの右のタブ
}
ステータスバー
global/global.css
statusbar {
ステータスバー全体
}
statusbarpanel {
ステータスバーのある一部品
}
.statusbar-resizerpanel {
右下のつかめるものがあるところの背景
}
resizer[dir="bottomright"] {
右下のもの
}
このくらいでテーマを作るにあたり重要なCSSはのせました。
画像は見比べながら換えていきましょう。
では、テーマの情報を書き換えましょう。テーマの情報の書き方は詳しくMozilla Japanに書かれていますので、簡単に。
install.rdf
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>{????????-????-????-????-????????????}</em:id> <!-- テーマのGUID(?を1〜9,a〜fにランダムに置き換え) -->
<em:version>0.1.0</em:version> <!-- テーマのバージョン -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- FirefoxのID -->
<em:minVersion>0.1</em:minVersion> <!-- 利用可能Firefoxの最小バージョン -->
<em:maxVersion>1.0</em:maxVersion> <!-- 利用可能Firefoxの最大バージョン -->
</Description>
</em:targetApplication>
<em:name>テーマタイトル</em:name>
<em:description>テーマの説明文</em:description>
<em:creator>作者の名前</em:creator>
<em:homepageURL>作者のURL</em:homepageURL>
<em:internalName>テーマの内部名</em:internalName>
</Description>
</RDF>注意：文字コードを必ずUTF-8にすること。
contents.rdf
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<Seq about="urn:mozilla:skin:root">
<li resource="urn:mozilla:skin:テーマの内部名"/>
</Seq>
<Description about="urn:mozilla:skin:テーマの内部名" chrome:name="テーマの内部名">
<chrome:packages>
<Seq about="urn:mozilla:skin:テーマの内部名:packages">
<li resource="urn:mozilla:skin:テーマの内部名:global"/>
<li resource="urn:mozilla:skin:テーマの内部名:browser"/>
<li resource="urn:mozilla:skin:テーマの内部名:mozapps"/>
<li resource="urn:mozilla:skin:テーマの内部名:help"/>
</Seq>
</chrome:packages>
</Description>
<RDF:Description about="urn:mozilla:skin:テーマの内部名:global" chrome:skinVersion="テーマのバージョン"/>
<RDF:Description about="urn:mozilla:skin:テーマの内部名:browser" chrome:skinVersion="テーマのバージョン"/>
<RDF:Description about="urn:mozilla:skin:テーマの内部名:mozapps" chrome:skinVersion="テーマのバージョン"/>
<RDF:Description about="urn:mozilla:skin:テーマの内部名:help" chrome:skinVersion="テーマのバージョン"/>
</RDF:RDF>