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

Firefoxにユーザースタイルを適用して、そのUIや各サイトの表示を好みのスタイルに変更されている方も多いと思います。

今回は、そんなユーザースタイルの中から、管理者が今年一年お世話になったユーザースタイルをまとめてご紹介したいと思います。

前半の13個はuserstyles.orgで配布しているCSS、後半の10個は管理者が様々なスクリプトを参考にしてカスタムしたものや、どこで拾ってきたのかわからなくなってしまったCSSです。

Stylishをご利用の方場合、userstyles.orgで配布しているものは各ページ内の[Install]ボタンクリックで適用できます。それ以外のCSSはStylishで新規作成を行い、適当な名前を付けて保存してください。


1．AIOS - Toolbar Skin

Windows 7/Vistaで「All-in-One Sidebar」の上部バーにAero効果を効かせてくれます。





2．Amazon.co.jp usedPrice Kicker

Amazonのページで「マーケットプレイス」の価格を目立たなくしてくれます。


3．Firefox - App-button as a Tab

Appボタンとタブの下端を揃えます。





4．Firefox - Appmenu Popup display vertical

左右に分割されているAppメニューのアイテムを縦一列で表示します。





5．Firefox 9 Hide Add-on Bar [X] Close Button

なんだかかっこわるいアドオンバー左端の[×]（閉じる）ボタンを非表示にします。


6．Firefox 9 Menu Icons Improved

Firefoxの各メニューにカラフルなアイコンを付与します。

*上記No4.のAppメニューのような感じになります。


7．Gmail Date+Time in Mail List

Gmailのメールリスト右側には、当日分には受信時刻が、それ以外のメッセージには日付が表示されますが、これを入れれば全てのメッセージ右端に日付＋時刻が表示されるようになります。





8．Google navigation bar - revert to light theme

ダーク化されたGoogleのナビゲーションバーを以前のようなライトカラーに戻します。





9．Keyword addition for Add/Change Bookmark


★をクリックして表示されるブックマークの編集ポップアップ内に「キーワード」入力欄を表示します。





10．safari like text selecting color

テキスト選択時の背景色をsafariライクなライトカラーに変更できます。

*現在配布されているのはスタイル名が「color & statusbar」に変更されています。





11．FF4+ Miscellaneous tweaks

各ツールバーの縦方向間隔を若干詰めてスペースを稼ぎます。


12．Firefox 4 - Options In-content style

オプションウィンドウのデザインをちょっと格好良くしてくれます。





13．Firefox 4 Custom Boton Color

Appボタンを透明化できます。





ここからは、各コードを新規作成にて適用してください。


14．Appボタンを最大時以外にもタブバーの左に置く。

Appボタンは最大化以外の時にはタブバーより上に位置しますが、これを適用すれば常にタブバーと並んで表示されるようになります。

#appmenu-button-container {
position: fixed !important;
}
#appmenu-button {
padding: 3px 18px 3px 18px !important;
margin-top:3px !important;
background-color: rgba(54, 121, 166, 0.2) !important;
}
#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
margin-top: -30px;
padding-left: 100px !important;
padding-top:10px !important;
padding-right:98px !important;
}
#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
margin-top: 0 !important;
}

15．アドオンバー/ページ内検索バーを透過させる。

#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;
}

16．アニメーションfaviconをOFFにする。

サイトによってはブックマークしたファビコンが回転したりするものなどがありますが、これを適用すれば動かなくなります。

.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;
}

17．サイドバーの幅制限を無くす。

デフォルトの場合サイドバーは一定の幅までしか広げることができませんが、これを入れておけば無制限に広げることができるようになります。

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

18．タブバーを透過させる。

タブバーを透明化します。また、壁紙などにかぶってもページタイトルが読みやすいように文字にホワイトで影を付けています。

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;
}

19．ナビゲーションツールバーを透過させる。

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

20．ブックマークツールバーを透過させる。

ブックマークツールバーを透過させます。

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

また、こちらも以下のCSSを追記することで、ブックマーク名に見本のような白い影を付けることができます。

@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;}
}

21．検索バーの右に履歴表示ボタンを表示する。


検索バー右側に検索履歴一覧をポップアップ表示できる▼ボタンを設置します。

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

22．Delicious/Webdeveloperツールバーを透過させる。


これらアドオンをご利用の方で、各部をGlass化されている方におすすめです。

#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;
}

23．ステータスを隠す。


ページ読み込み中やリンクにマウスオーバーした際、アドオンバー上部に表示されるステータスを非表示にします。

#statusbar-display {
display: none !important;
}

今年は以上のようなCSSを使って、FirefoxのUIやサイト個別の表示スタイルを変更していました。

Firefoxの速いバージョンアップやGoogleの各サービスがリニューアルされたことで通用しなくなったCSSが多く、以前と比べて数が減りましたが、まだまだユーザースタイルによるカスタマイズはおもしろいですね。

皆さんもこの中で気にいったものがあれば、使ってみてください。


＜関連記事＞


■2009年[moziller]のFirefoxに個性を持たせてくれた17個のユーザースタイル（CSS）

■2008年 管理者が使い続けたGreasemonkeyスクリプトとユーザースタイル。

■2011年 管理者がお世話になった19個のGreasemonkeyスクリプト。

Comments

いつも便利なアドオンの紹介記事有難う御座います。
少しお尋ねしたいのですが、ページ読み込み中やリンクにマウスオーバーした際、アドオンバー上部に表示されるステータスは左側に表示されますよね？
それをページ内検索バーを表示しているときのように、常に右側に表示したいのですが、そのようなスタイルをご存知でしたら、教えていただけると幸いです。

Posted by 真冬 at 2011年12月29日 15:37

＞真冬さま。

こんにちは。mozillerです。
ご質問の件ですがStylishで

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

と新規作成すればステータスパネルが右側に表示されますのでお試しください。

コメントありがとうございました。

Posted by moziller at 2011年12月29日 17:18

教えていただいたユーザースタイルを適用したところ、無事右側に表示することが出来ました。
この度は本当にありがとうございました。

Posted by 真冬 at 2011年12月29日 23:10

解決しました

Posted by 通りすがり at 2012年05月16日 22:49 です。

Extention List Dumper
設定 → フォルダ選択 → 保存で　ファイルが生成されると思ってました。
とんだ勘違いしてました
一覧の生成のボタンでファイル作成できました

お騒がせしまた。

Posted by 通りすがり at 2012年07月18日 08:06