Firefox29のタブをuserChrome.cssで透明化できた：ULCAMTCVSMPS：So-netブログ

	ブログをはじめるログイン

Firefox29のタブをuserChrome.cssで透明化できた　[ソフトウェア] [編集]

現在私は、オープンソースのウェブブラウザーであるFirefoxを使用しております。

Version 28まではuserChrome.cssによってウィンドウにはWindows7のAero Glass効果を適用して透明化し、タブは各種グレースケールの半透明状態にしてGUIをカスタマイズしておりました。

しかしながら、Version 29からUIのデザインが大きく変わりまして、それまでの方法では同様のデザインにする事が出来ず、私の好みではない色遣いの状態となってしまいました。

そこで色々とウェブ検索してみたのですが、この記事の執筆時点ではCSSによってアクティブタブを含むタブの透明化についてスクリーンショット付きで解説している記事は見つかりませんでした。

ですが何とかこれらの事について成功致しましたので、スクリーンショットとCSSの内容を掲載したいと思います。

まず、できたFirefox29のSSです。

Firefox_SS_4 Firefox29のスクリーンショット。タブがアクティブのものを含めて透明化されている。

https://farm9.staticflickr.com/8637/16299814312_672b998d72_o.png
Windows7のAero Glass効果でウィンドウ枠と非アクティブのタブとアクティブのタブが透明化され、他のバーの領域は不透明度80[%]のグレーになっております。

次に、この状態にする為のCSSの中身です。

@namespace url( "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" );

#nav-bar
{
 background-color: rgba( 192, 192, 192, 0.8 ) !important;
 -moz-appearance: none !important;
}

#PersonalToolbar
{
 background-color: rgba( 192, 192, 192, 0.8 ) !important;
 -moz-appearance: none !important;
}

.tab-background-start[selected = true]::before
{
 background: green !important;
 background-color: transparent !important;
}

.tab-background-middle[selected = true]
{
 background-image: url( chrome://browser/skin/tabbrowser/tab-active-middle.png ) !important;
 background-color: rgba( 0, 0, 0, 0.0 ) !important;
}

.tab-background-end[selected = true]::before
{
 background: green !important;
 background-color: transparent !important;
}

これをテキストエディターでコピー & ペーストして " userChrome.css " という名前のファイルにして保存し、下記のディレクトリに"chrome"と名前を付けたフォルダーを作り、その中にこのuserChrome.cssファイルを入れてやればデザインを適用できます。

C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\xxxx.default\

尚、これはあくまでもVer.29での設定ですので、今後のバージョンで変更があるかもしれませんのでご注意下さい。

[追記]
Windows7上でFirefox32.01でも適用出来る事を確認致しました。

[訂正]
CSSの中身の記述を正しくコピー出来るように修正致しました。ご迷惑をお掛け致しました事をお詫び申し上げます。

Yahoo! ボックスに .css ファイルをアップロード致しましたので、どうぞご利用下さい。
次のURLのページにある " ダウンロード " と書かれたボタンをクリックするとダウンロード出来ます。

http://yahoo.jp/box/TsjCjg