Firefox 5のツールバーボタンをフラットなスタイルにするCSS

Firefox 4以降、ツールバーに設置できるボタン群が従来のフラットなスタイルからシャドウの付いた立体的なものに変更されています。

このようなスタイルは、ボタンの境界がわかりやすいなどのメリットがありますが、従来のフラットなスタイルのほうがなじみがあるという方もいらっしゃるのではないでしょうか。

そんな方は、以下のCSSをFirefoxの[userChrome.css]ファイルへ記述、またはStylishを使って新規スタイルの作成を行うことによって、ツールバーボタン群をFirefox 3.6ライクなフラットスタイルに変更することができます。

/*ツールバーボタンから影と背景を削除する*/
toolbar .toolbarbutton-1 { border:0!important; box-shadow:none!important; background:none!important;}

スタイル適用後は、ツールバーボタンから影と背景が削除され、以下のようにフラットでスッキリしたスタイルになります。


■適用前





■適用後





* All-in-One Sidebar ツールバーなどのボタンにも適用されます。

*ほんの少しですが境界が無くなった分だけツールバースペースを稼ぐこともできます。


ただし、Greasemonkeyなどのアドオンをインストールして追加される▼付きツールバーボタンには効果が及びませんので、これらをお使いの方は該当ボタンをアドオンバーなどに移動したほうが統一感が出ていいと思います。

Firefox 5のボタンデザインが気に入らない方は、試してみてはいかがでしょうか。


＜関連記事＞


■FirefoxやThunderbirdに大量のツールバーボタンセットを追加できるアドオン「Toolbar Buttons」

■Firefox 4のツールバーやボタンを簡単にカスタマイズできるアドオン「Stratiform」

■Firefox 4.0のUIを5か所カスタマイズできるアドオン「Firefox 4 UI Fixer」

■Firefox 4の細部をカスタマイズできるユーザースタイルあれこれ。

Comments

#toolbar dropmarker {display:none !important;} を記入すればドロップマーカーも消せますよ。

Posted by ナナシ at 2011年06月30日 19:46