Firefoxにしてみた

私はGoogle社のウェブ ブラウザーである、Google Chromeを長らく愛用しておりました。

しかしながら先日、Google Chromeへインストールできる拡張機能を “Chrome ウェブストア” でホストされているものに限定する方針を明らかにしました。

窓の杜 / "Google、“Chrome ウェブストア”以外のChrome拡張機能をブロックする方針を明らかに" のページのURL:
http://www.forest.impress.co.jp/docs/news/20131108_622758.html


セキュリティー向上の為だそうですが、この変更により、実名使用が必要なGoogle アカウントを使わずには拡張機能を使えなくなります。
最近のGoogle社はオンライン サービスの連携に力を注いでおりますが、個人情報の収集と利用者の囲い込みが甚だしく感じられます。
そこで、私は評判が良いウェブ ブラウザーのFirefoxに乗り換える事に致しました。

"Firefox" の公式ウェブサイトのURL:
http://www.mozilla.jp/firefox/


ですが、インストールしてみましたところ、インターフェイスの色遣いが好みに合いませんでした。
Personasという機能が搭載されており、用意された膨大な種類のウィンドウ デザインをワン クリックで替えられるのですが、私が使用しているPC OSであるWindows 7のAero Glass機能の透明効果が利用できません。
また、様々なアドオンにより、透明効果や色の変更、配置換えまで簡単にできるのですが、どれも余りに多機能過ぎて好きではありません。

調べてみたところ、CSS ファイルを書いてデザインを変える事ができるとの事。
私はその方法でデザインを変える事に致しました。

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

上記のディレクトリに"chrome"と名前を付けたフォルダーを作り、その中にuserChrome.cssファイルを入れてやればデザインを変えられるとの事。

ですが、ネット検索で得た情報をもとに記述したCSS ファイルを所定のフォルダーに入れてブラウザーを再起動しても、タブの部分が変更できず、困惑。

アドオンのDOM インスペクターでFirefoxのデザインの構造を見て、手探りで書き換えて行きました。


注意: この記事はFirefoxのVersion 28以前を対象としたものです。Firefox29以降につきましては、次の記事を参考にして下さい。

記事: Firefox29のタブをuserChrome.cssで透明化できた
http://crater.blog.so-net.ne.jp/2014-05-02




https://farm8.staticflickr.com/7500/16114481787_2c5a730df7_o.png
判り易く色分けしたところのスクリーンショットです。


https://farm8.staticflickr.com/7505/16274406926_bd6a7cd91e_o.png
こちらはメニュー バーを表示した状態のスクリーンショット。


https://farm9.staticflickr.com/8659/16112787548_fdfe22b208_o.png
これが自分好みにした状態のFirefoxのスクリーンショットです。
しっかりと透明効果が適用され、色はグレイ スケールにしました。


以下に、私のuserChrome.cssの内容を掲載致します。

注意: この記事はFirefoxのVersion 28以前を対象としたものです。Firefox29以降につきましては、次の記事を参考にして下さい。

記事: Firefox29のタブをuserChrome.cssで透明化できた
http://crater.blog.so-net.ne.jp/2014-05-02


色分けした段階の内容ですので、スクリーンショットとrgba()の数値を比べて見ると対応部分が解るかと思います。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); #main-window #appmenu-button { background-image: none!important; } #appmenu-button { margin-top: 0px !important; margin-left: 0px !important; padding-top: 4px !important; padding-left: 16px !important; background-color: rgba( 64, 64, 64, 1.0 ) !important; } menubar { background-color: rgba( 255, 24, 24, 0.2 ) !important; } #navigator-toolbox[tabsontop = "true"] #TabsToolbar { padding-left: 100px !important; padding-top: 2px !important; padding-right: 128px !important; } #nav-bar { background-color: rgba( 64, 64, 255, 0.2 ) !important; -moz-appearance: none !important; } #PersonalToolbar { background-color: rgba( 255, 64, 64, 0.2 ) !important; -moz-appearance: none !important; } .tabbrowser-tab:not( [selected = "true"] ):not( :hover ), .tabs-newtab-button:not( :hover ) { background-image: none !important; background-color: rgba( 64, 255, 64, 0.2 ) !important; -moz-appearance: none !important; } .tabbrowser-tab:not( [selected = "true"] ):hover, .tabs-newtab-button:hover { background-image: none !important; background-color: rgba( 128, 255, 128, 0.4 ) !important; -moz-appearance: none !important; } .tabbrowser-tab[selected = "true"]:not( :hover ) { background-image: none !important; background-color: rgba( 128, 255, 128, 0.4 ) !important; -moz-appearance: none !important; } .tabbrowser-tab[selected = "true"]:hover { background-image: none !important; background-color: rgba( 192, 255, 192, 0.8 ) !important; -moz-appearance: none !important; } #addon-bar { background-color: rgba( 128, 24, 128, 0.8 ) !important; }

これからはFirefoxをメインに使って行こうと思います。

タグ：Firefox CSS userChrome.css タブ 透明 ブラウザー ウェブ デザイン Aero glass