Firefoxのテーマ変更

UIカスタマイズシリーズ第2弾。今回はFirefoxの見た目を。

見た目を変えるだけで、操作性は特に弄りません。
Firefoxのテーマ変更、プライベートブラウズにも適用 ほかボタンもカスタム。

ff_themecustom.png

最終的にこのようになります。

テーマ


まずはテーマから。

iOSの次のバージョンのiOS7ではフラットなUIへと大幅に変更されることが決まっていますが、これまではリアルな”物”を模倣してUIが作られていました。Skeuomorphic(スキューモーフィック)の一例として語られることの多いテクスチャーは私は結構好きで、それがなくなると寂しいなーと思ってこれを入れることにしました。

Texture from iOS and OS X Lion :: Add-ons for Firefox

iOS5や6でフォルダや通知センターの背景になってるあれです。

(寂しいとは書きましたがiOS7も楽しみですよ。)

プライベートウィンドウでも適用



Private Browsing Personas :: Add-ons for Firefox

このアドオンを入れるとプライベートブラウズ時にもテーマ変更が有効になります。

ff_themecustom_pb.png

Firefoxボタンの色を変更


Firefoxボタンの色を変えます。
App Button Menu Magic - userstyles.org

これはボタンを押した時に色が変わるスタイルなんですが、色が気に入ったので常に青くすることにしました。

stylishを入れてない人は入れてから。Stylish :: Add-ons for Firefox

stylishから中身を編集します。

/* none:important!___________New App Button Menu__________none:important! */

#appmenu-button {
padding: 0 15px 1px 15px !important;
}
#main-window:not([privatebrowsingmode]) #appmenu-button:hover,
#main-window:not([privatebrowsingmode]) #appmenu-button[open="true"]{
background: -moz-radial-gradient(center bottom, farthest-side, rgba(93,199,244,.5) 10%, rgba(93,199,244,0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgb(87,163,213), rgba(181,233,244,0)),
-moz-linear-gradient(#25B6E9, #1B6FBB 95%) padding-box !important;
box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
0 0 1px 0 rgba(255,255,255,1) inset !important
}

#main-window:not([privatebrowsingmode]) #appmenu-button[open="true"]{
box-shadow: 0 0 4px 0 rgba(0,0,0,.35) inset !important;
}
赤字で書いてある#appmenu-buttonの中に書き加えます。

/* none:important!___________New App Button Menu__________none:important! */

#appmenu-button {
padding: 0 15px 1px 15px !important;
background: -moz-radial-gradient(center bottom, farthest-side, rgba(93,199,244,.5) 10%, rgba(93,199,244,0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgb(87,163,213), rgba(181,233,244,0)),
-moz-linear-gradient(#25B6E9, #1B6FBB 95%) padding-box !important;

}

#main-window:not([privatebrowsingmode]) #appmenu-button:hover,
#main-window:not([privatebrowsingmode]) #appmenu-button[open="true"]{
background: -moz-radial-gradient(center bottom, farthest-side, rgba(93,199,244,.5) 10%, rgba(93,199,244,0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgb(87,163,213), rgba(181,233,244,0)),
-moz-linear-gradient(#25B6E9, #1B6FBB 95%) padding-box !important;
box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
0 0 1px 0 rgba(255,255,255,1) inset !important
}

#main-window:not([privatebrowsingmode]) #appmenu-button[open="true"]{
box-shadow: 0 0 4px 0 rgba(0,0,0,.35) inset !important;
}
青字で書いてある部分が加えた部分。

これで初期状態もオレンジ色から水色に変わります。プライベートウィンドウでも適用されます。

ほかにも

Firefoxボタンの色やデザインを変えるものはいろいろあるみたいです。

App Button Color | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト
App Button Clear | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト
こういうのとか、

Firefox 4 Custom Boton Color - Themes and Skins for Browser - userstyles.org
こういうのとか。

おわり


とりあえずFirefoxはこんな感じ。次はWindowsなんですが、長くなるので書くのはだいぶ先になりそう…。FirefoxもWindowsも VLCの記事を書いた時点(7月18日)で終わってるのにね…。


"Firefoxのテーマ変更" へのコメントを書く

お名前:[必須入力]
メールアドレス:
ホームページアドレス:
コメント:[必須入力]
認証コード:[必須入力]

※画像の中の文字を半角で入力してください。