Top Stylish >2012年 管理者のFirefoxをいい感じにしてくれた17個のユーザースタイル。
2012年12月29日

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

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

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

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

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


1.AIOS - Toolbar Skin

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


■使用前


01_AIOS - Toolbar Skin.JPG


■使用後


02_AIOS - Toolbar Skin.JPG


2.Amazon.co.jp usedPrice Kicker

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


3.Center new youtube

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


4.Firefox - App-button as a Tab

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


Firefox - App-button as a Tab.png


5.FireFox 3 - Hide Search and Go Buttons

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


FireFox 3 - Hide Search and Go Buttons.png


6.Firefox 4 Custom Boton Color

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


Firefox 4 Custom Boton Color.JPG


7.Google Search - Hide Instant Previews

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


8.Keyword addition for Add/Change Bookmark

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


Keyword addition for Add Change Bookmark.JPG


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


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


transparent Add-on_searchbar.JPG


#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.タブバーを透明化する。


transparent tabbar.JPG


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 history button.JPG


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



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

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


Firefox UI.JPG


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


<参考記事>


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

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

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

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

posted by moziller at 19:50 | Comment(0) | TrackBack(0) | Stylish



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

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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

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