2012年 管理者のFirefoxをいい感じにしてくれた17個のユーザースタイル。

Firefoxアドオンを使って機能をカスタマイズしたら、今度は自分だけのUIを作りたくなるものですね。

そんな時は、Stylishアドオンなどを使って好みのCSSを適用するだけで、Firefoxの細部デザインを細かく変更することができます。

管理者もこうしたCSSを使ってFirefoxを好みのデザインにしている一人です。

今回は、そんな管理者が使っているクールなユーザースタイルをまとめてご紹介したいと思います。


1.AIOS - Toolbar Skin

All in one sidebarの上部バーを透過させることができます。Firefox全体をAero化している方に。


■使用前





■使用後





2.Amazon.co.jp usedPrice Kicker

Amazonの商品ページでAmazon.co.jp以外の出品者の価格を目立たなくします。


3.Center new youtube

左寄せになってしまったYouTubeのコンテンツを中央寄せに戻します。


4.Firefox - App-button as a Tab

FirefoxのAppボタンをタブバー上に表示します。





5.FireFox 3 - Hide Search and Go Buttons

Goボタンと検索バー内の虫眼鏡アイコンを非表示にします。（現行バージョンにGoボタンはありません。）





6.Firefox 4 Custom Boton Color

Appボタンのカラーを変更できます。インストール時に5色から選択可能です。





7.Google Search - Hide Instant Previews

Googleインスタントプレビューを非表示にします。


8.Keyword addition for Add/Change Bookmark

★ボタンクリックで表示されるブックマークの編集画面にURL、キーワード、説明欄を表示します。





上記は[userstyles.org]でダウンロード/インストールできるCSSですが、そのほかにも以下のようなCSSでカスタマイズを行っています。


9.アドオンバー/ページ内検索バーを透明化する。

#browser-bottombox
{
-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;
}
#addon-bar
{
-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;
}

10.アニメーションファビコンを無効にする。

.bookmark-item[image*="favicon.gif"] .menu-iconic-icon,
.bookmark-item[image*="favicon.gif"] .toolbarbutton-icon,
.bookmark-item[image*="favicon.gif"]:not([container]) .menu-iconic-icon,
.bookmark-item[image*="favicon.gif"]:not([container]) .toolbarbutton-icon {
width: 0 !important; padding-left: 16px !important;
background: transparent url(chrome://global/skin/icons/folder-item.png) no-repeat !important;
}
#page-proxy-favicon[src$="favicon.gif"], tab[image$="favicon.gif"] .tab-icon{
width: 0 !important; padding-left: 16px !important;
}

11.サイドバーの幅制限を無くす。

#sidebar-box {
overflow-x: hidden !important;
}
#sidebar {
min-width: 0px !important;
max-width: none !important;
overflow-x: hidden !important;
}

12.ステータスパネルを右側に表示する。

statuspanel { left: auto !important; right: 0 !important; }

13.タブバーを透明化する。

tab:not([selected=”true”]){background:transparent !important;}

.tabs-newtab-button {background:transparent !important;}

tab:not([selected=”true”]) .tab-text{text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white !important; color:black !important; font-weight:bold !important;}

.tabbrowser-tabs tab
{
background:transparent !important;
color:#000!important;
background-color:rgba(0,0,0,0.1)!important;
text-shadow: white 0px 0px 5px !important;
}

.tabbrowser-tabs tab:hover
{

color:#000!important;
background-color:rgba(150,150,150,0.1)!important;
text-shadow: white 0px 0px 5px !important;
}

.tabbrowser-tabs tab[selected="true"]
{
background: url("http://www.p-k-startseite.bplaced.net/images/screen1.png") center !important;
color:#000!important;
background-color:rgba(255,255,255,0.5)!important;
/* background-color:rgba(255,255,255,0.1)!important; */
text-shadow: white 0px 0px 5px !important;
}

.tabbrowser-strip{
background-color:transparent!important;
}

14.ナビゲーションツールバーを透明化する。

#nav-bar
{
background-color:transparent !important;
-moz-appearance: -moz-win-glass !important;
}

15.ブックマークツールバーの文字色を白抜きにする。

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

#PersonalToolbar .toolbarbutton-text{text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white !important; color:black !important; font-weight:bold !important;}
}

16.ブックマークツールバーを透過させる。

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

17.検索バー右端に検索履歴表示ボタンを設置する。

#searchbar .autocomplete-history-dropmarker {
display: -moz-box !important;
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#history-dropmarker");
}

今年は以上のようなユーザースタイルでFirefoxやサイトUIをカスタマイズさせていただきました。

これらを使うとFirefoxUIがこんな感じになります。





こうしたCSSを使えば、Firefoxに負担をかけることなく好みのスタイルにすることができますので、気に入ったものがあれば使ってみてください。


＜参考記事＞


■2011年 管理者が使っていた23個のユーザースタイル。

■2012年 管理者がお世話になった49個のFirefoxアドオン。

■Thunderbirdユーザーに是非使ってほしい20個の人気アドオン。

■2012年12月時点で最もダウンロードされているFirefoxアドオンベスト30