Firefox 向けのテーマは数ありますが、シンプルでかわいいテーマ「rein」をずっと使い続けています。Firefox 1.0 正式版が公開されるよりも前から。1
ほんと、お世話になっています。
rein の特徴は、「多くのアドオンに対応している」こと。
どんなにデザインが統一されたテーマを入れましても、他の Add-ons のアイコンがばらばらでは残念でしょ？
その点、Add-ons をツールバーにおいても、「rein のデザイン」で統一してくれて気持ちがいいです。rein/4.0 も リリースされ、対応 Add-ons の数も増えました。
とはいえ、すべての Add-ons に対応しているわけではありません。2
たとえば、わたしが常用している Scriptish（Greasemonkey の改良版）3 は、残念ながら対応されていません。
でも、本家の Greasemonkey には対応しています。
よし、rein が内部に持つ Greasemonkey のアイコンを Scriptish でも使えるようにしよう、と内部の CSS を書き換えました。
「（Firefox のプロファイルフォルダ）/extensionsrein@notiz.jp/chrome/rein.jar/global/add-ons/add-ons.css」を直接、書き換えてもよいのですが、Stylish でお手軽に書きましょう。下記の CSS を Stylish の「スタイルの管理 -> 新しいスタイルを書く」から、適当な名前を付けて保存してください。
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Scriptish */
#scriptish-button {
-moz-box-orient: horizontal;
list-style-image: url("chrome://global/skin/add-ons/greasemonkey.png") !important;
}
toolbar[iconsize="small"] #scriptish-button {
list-style-image: url("chrome://global/skin/add-ons/greasemonkey.png") !important;
}
#scriptish-button[scriptish-disabled] {
list-style-image: url("chrome://global/skin/add-ons/greasemonkey-dis.png") !important;
}
toolbar[iconsize="small"] #scriptish-button[scriptish-disabled] {
list-style-image: url("chrome://global/skin/add-ons/greasemonkey-dis.png") !important;
}
#category-userscript > .category-icon {
list-style-image: url("chrome://global/skin/add-ons/greasemonkey-addon.png") !important;
}
これだけです。Greasemonkey とおんなじアイコン表示になりました。
JSActions は右クリックから JavaScript を実行できる、ほんとに便利な Add-ons です。おなじ JavaScript 系の Add-ons である Greasemonkey に比べ、どうしてここまで流行らないのか不思議なくらい。みんな、もっと、JSActions を使いましょうよ。5
さておき。
当然ながら、rein は JSActions 用のアイコンセットを持っていません。しかし、ブックマーク用など、フォルダ用のアイコンをセットを有しています。そのアイコンを流用しましょう。
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* ::::: Action Icon ::::: */
menu#JsActionsMenu {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}
menu#JsActionsMenu:hover {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}
/* ::::: Sub Folder Icon ::::: */
menu#jsaSubFolder {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}
menu#jsaSubFolder:hover {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}
/* ::::: Script Icon ::::: */
menuitem#jsaScript {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}
以上です。ブックマークと同じ、白いアイコンで統一されました。また、もともとの JSActions と違い、マウスオーバーで閉じていたフォルダが開くようにもなりました。
デザインが統一されますと、すっきり気持ちがいいですね。
追記 2011/06/08
rein/5.0 で Scriptish と JSActions に対応してくださいました。
Scriptish は Greasemonkey とおんなじ挙動、JSActions は独自アイコンに。
やったねっ。
リンク：
- Mozilla – klee（rein の配布場所）
- Stylish :: Add-ons for Firefox
- Scriptish :: Add-ons for Firefox
- JSActions – + HideAway Firefox +