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

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

<< Mozilla Labs ロケーションバー検索を高機能化する実験的アドオン「AwesomeBar HD」を公開。 | TOP | 入力したパスワードの安全度を示してくれるFirefoxアドオン「BadPass」 >>

2011年05月02日

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

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

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

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

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

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

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

１．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;

}

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

両アドオンをお使いの方は、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つのバーを以下のようにクールなスタイルに変更することができます。