Top Stylish >Firefox 4で「Delicious/Webdeveloperツールバー」を透過させる方法。
2011年05月02日

Firefox 4で「Delicious/Webdeveloperツールバー」を透過させる方法。

Windows 7上のFirefox 4は、UIの一部にAero効果が適用されるようになっています。

しかし、このようなスタイルでの表示は、タブバーを上部に表示した際のタブバー周辺や、旧タイトルバーの位置あたりにしか適用されず、その他のバーは透過しないままとなっています。

こうしたスタイルに不満がある方は、ブックマークツールバーやアドオンバーなど、その他のUIをGlass化するためのCSSを適用されている方も多いと思いますが、アドオンのインストールによって追加されるバーなどがそのままになっている方もいらっしゃるのではないでしょうか。


01_Delicious_Webdeveloper_Aero.JPG


いくつかのバーが透過しているのなら、こうしたバーもきちんとスタイルを統一しておきたいものですね。

そこで今回は、Firefoxユーザーに人気のアドオン「Delicious」と「Webdeveloper」をインストールすることによって追加される専用のツールバーを透過させるためのCSSをご紹介したいと思います。

以下のCSSは、プロファイルフォルダ内の[userchrome.css]ファイルへ記述、またはStylishにて新規作成することで適用することができます。


1.Deliciousツールバーを透過させる。

#ybToolbar
{
-moz-appearance: -moz-win-glass !important;
background-color: transparent !important;

}



2.Webdeveloperツールバーを透過させる。

#webdeveloper-toolbar
{
-moz-appearance: -moz-win-glass !important;
background-color: transparent !important;

}



両方を適用すると、以下のようなスタイルとなります。


03_Delicious_Webdeveloper_Aero.JPG


両アドオンをお使いの方は、1.2をまとめて記述しておけばいいでしょう。

また、この表示では単にツールバーが透過するだけで、壁紙などの背景が暗い場合に文字が読みにくくなる場合があります。

そんな場合は、以下のように記述することで、上記見本画像のブックマークツールバーのようにテキストシャドウを付け、読みやすくすることができます。


#ybToolbar
{
-moz-appearance: -moz-win-glass !important;
background-color: transparent !important;
color: #ffffff !important;
text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white !important; color:black !important; font-weight:bold !important;
}

#webdeveloper-toolbar
{
-moz-appearance: -moz-win-glass !important;
background-color: transparent !important;
color: #ffffff !important;
text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white !important; color:black !important; font-weight:bold !important;
}


これで2つのバーを以下のようにクールなスタイルに変更することができます。


02_Delicious_Webdeveloper_Aero.JPG


FirefoxのUIをGlassっぽくされている方で、両アドオンをお使いの方は試してみてはいかがでしょうか。


<関連記事>


■Firefox 4.0のUI各部を[glass]っぽくできるユーザースタイル「Firefox 4 Windows 7 total remake」

■Windows 7でFirefoxをスケスケにするユーザースタイルあれこれ。

■FirefoxをWindows 7アプリ風のクールなデザインにしてくれるアドオン「Stratum Fusion」

■Firefox 4.0(Beta)で上部に表示したタブ(やその周辺)を半透明にする方法。(Windows Vista/7)

■Firefox 3.5をグラス仕様にできるアドオン「All-Glass Firefox」(Win Vista/7)


posted by moziller at 12:29 | Comment(0) | TrackBack(0) | Stylish



この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック





×

この広告は180日以上新しい記事の投稿がないブログに表示されております。