現在の位置
目次(I) [折り畳む]
- 使い方
- 使用例
- XUL要素を非表示にする場合の留意点
- メニューバー
- UIの既定の文字のサイズ, 字体をすべて変更する()
- メニューバーをマウスオーバーで自動開閉
- タイトルバーとメニューバーの間の窪み横線を消すには
- ポップアップメニューの幅を広くする
- ブックマークの幅を変更する
- メニュー>ブックマークのプルダウン内のアイコンを非表示
- メニュー>ブックマークのプルダウン内の履歴とブックマークの管理を非表示
- メニュー>ブックマークのプルダウン内のブックマークツールバーを非表示
- ブックマークのプルダウン内の「タブですべて開く」を非表示 (Frefox3.5)
- ブックマークコンテキストメニュー内の「タブですべて開く」を非表示 (Frefox3.5)
- ポップアップライブブックマークメニューの幅を広くする
- ブックマークメニューをファイルメニューの次に移動する
- ポップアップメニューを立体的に表示
- ポップアップメニューの項目の縦の間隔を詰める
- アクセルキーをすべて表示させない
- ツールバー
- ブックマークツールバーのファビコン, フォルダアイコンを消したい(非表示にしたい)
- ブックマークツールバーを複数行に表示したい Fx2
- ブックマークツールバーを複数行に表示したい Fx3 以降
- ナビバー、ブックマークツールバーをマウスオーバーで自動開閉
- ツールバーの背景を変更
- ストップボタンとリロードボタンを統合
- ロケーションバーのドロップマーカー（▼印）を消す
- ロケーションバーのfaviconを消す
- 移動ボタンを常時表示 Fx3
- 移動ボタンを消す
- 移動ボタンの「移動」の文字を消す
- 検索バーの検索エンジンの名称(グレイテキスト)を非表示にする
- 検索バーを長くする
- 検索バーの右側に履歴を出すボタンを表示
- ホームボタンを任意のものにする
- タブバー
- タブバーをマウスオーバーで自動開閉する
- Office XP風にする
- 非アクティブなタブの文字色を淡色にする
- タブが多い時に多段で表示する
- タブに余裕を持たせる
- タブバーの表示位置を変える
- タブをフラットにする
- 常にタブアイコンを表示しない
- タブバーの閉じるボタンを消す
- タブバーの開くボタンを消す (Fx3.0以前)
- 新規タブボタンを非表示(Fx3.5)
- タブバーの左右にスペースを取る
- 新しいタブボタンを 常に最右端に表示 (Firefox3.1b3pre以降)
- 新しいタブボタンを 常に最左端に表示 (Firefox3.5以降)
- 新しいタブボタンやスクロールボタンを分かりやすく (Firefox3.5以降)
- サイドバー
- ブックマークの管理
- ステータスバー
- ページ内検索バー
- ブックマークバー
- ポップアップウィンドウがブロックされた場合や、パスワードの記憶の確認の際などに表示される通知バー(Notification bar)を、画面上部ではなく下部に表示したい
- 入力欄の足切れ対策(userContent.css, userChrome.css)
- 各種 マネージャ
使い方 編集
コレって何? 編集
ブラウザ上の表示をコントロールできるスタイルシートです。Mozilla・Mozilla FirefoxはUIの表現の一部をスタイルシートでしているので、柔軟な変更が出来る様になっています。
プロファイルフォルダ
直下のchromeフォルダ以下に、スタイルシートの書き方に添った形で書いたファイルをuserChrome.cssと（メモ帳などで）名前を付けて保存することで適用できます(その際、日本語を含むスタイルシートファイルを作る時は名前を付けて保存する際に、UTF-8,BOMなしというエンコード形式で保存する必要があります。)。
尚、chromeフォルダにはuserChrome-example.css というサンプルファイルが最初から用意されていますので、このファイル名を変更し、-example という文字を取り除けば、すぐに利用できます。
使ってみたい 編集
まず、ブラウザのパーツに振られているID・クラス名を知る必要があります。その場合DOMインスペクタを使って、調べてみてください。
それをふまえて、以下のリンク先を回れば大体どうすればいいかわかると思います。プロファイルがどうしてもワカランチンてな人ChromEditって拡張を導入すればFirefox本体から編集できますから(・∀・)ｲｲ!とも思いますよ。 また、Stylishという拡張ではuserChrome.css及びuserContent.cssと同じ機能をFirefoxを再起動せずに反映(有効無効切り替え)・管理(新規、編集、削除)することができます。
基本的なカスタマイズは以下をどうぞ、Mozilla独自拡張や一部のCSS3セレクタも使えますので、そちらもやっておくといいでしょう。
- Preston Wiki - UserChrome.css
- From DFJ
- CSS 3 Selectors - W3C Candidate Recommendation 13 November 2001 の一部邦訳と使用実例
- 関連リンク
使用例 編集
- Firefox Help: 便利な使い方
- The Extensions Mirror - userChrome.css
- 裸電球 - 不要なメニューアイテムを非表示
- 影祭り Website - 質問スレ、本スレにあがっていたスタイルシートのまとめ
XUL要素を非表示にする場合の留意点 編集
display:none
とするよりも,
visibility:collapse
を使用するのがよい。(そうでない場合もある)
XUL要素の場合display:none としてしまうと, その要素が存在しないものとして扱われるため, 何らかの形でその要素やプロパティを参照している場合に不具合が生じる場合がある。
メニューバー 編集
UIの既定の文字のサイズ, 字体をすべて変更する() 編集
* {
font:13px 'MS UI Gothic' !important;
}
メニューバーをマウスオーバーで自動開閉 編集
手順
userChrome.cssに
#toolbar-menubar{visibility: collapse;}
#navigator-toolbox:hover > #toolbar-menubar{visibility: visible;}
しかしこの方法を用いた場合,
- メニューを開く際時間が掛かる。
- ブックマークのコンテキストメニューを開くとメニューバーが閉じてしまう。
従って, 拡張機能Hide Menubarを用いるのがよい。|
タイトルバーとメニューバーの間の窪み横線を消すには 編集
#navigator-toolbox {border-top: 0px !important;}
ポップアップメニューの幅を広くする 編集
menupopup > menu,
popup > menu,
menupopup > menuitem,
popup > menuitem {
max-width: 50em !important;
}
ブックマークの幅を変更する 編集
下記の数値を大きくするか100%等とする。
menu.bookmark-item,
menuitem.bookmark-item {
min-width: 0;
max-width: 26em;
}
メニュー>ブックマークのプルダウン内のアイコンを非表示 編集
menuitem.bookmark-item > .menu-iconic-left
{
display: none !important;
}
menuitem[class="menuitem-iconic bookmark-item"] .menu-iconic-left
{
visibility: hidden !important;
}
メニュー>ブックマークのプルダウン内の履歴とブックマークの管理を非表示 編集
#bookmarksShowAll
{
visibility:collapse !important;
}
メニュー>ブックマークのプルダウン内のブックマークツールバーを非表示 編集
#bookmarksToolbarFolderMenu,
#bookmarksToolbarFolderMenu + menuseparator
{
visibility:collapse !important;
}
ブックマークのプルダウン内の「タブですべて開く」を非表示 (Frefox3.5) 編集
menu[container="true"]>menupopup[placespopup="true"]>menuseparator:nth-last-child(-n+2),
menu[container="true"]>menupopup[placespopup="true"]>menuseparator:nth-last-child(-n+2) + menuitem{
visibility:collapse !important;
}
toolbarbutton[container="true"]>menupopup[placespopup="true"]>menuseparator:nth-last-child(-n+2),
toolbarbutton[container="true"]>menupopup[placespopup="true"]>menuseparator:nth-last-child(-n+2) + menuitem{
visibility:collapse !important;
}
ブックマークコンテキストメニュー内の「タブですべて開く」を非表示 (Frefox3.5) 編集
#placesContext>menuitem[id="placesContext_openContainer:tabs"],
#placesContext>menuitem[id="placesContext_openContainer:tabs"]:not([hidden])+menuitem+#placesContext_openSeparator {
visibility:collapse !important;
}
ポップアップライブブックマークメニューの幅を広くする 編集
.bookmark-item[livemark="true"] menuitem{
max-width: 100em !important;
}
ブックマークメニューをファイルメニューの次に移動する 編集
#file-menu {-moz-box-ordinal-group:1 !important;}
#bookmarks-menu {-moz-box-ordinal-group:2 !important;}
#edit-menu {-moz-box-ordinal-group:3 !important;}
#view-menu {-moz-box-ordinal-group:4 !important;}
#go-menu {-moz-box-ordinal-group:5 !important;}
#tools-menu {-moz-box-ordinal-group:6 !important;}
#helpMenu {-moz-box-ordinal-group:7 !important;}
ポップアップメニューを立体的に表示 編集
他のWindowsのメニューのような感じになります。
手順
userChrome.cssに
menupopup,
popup {
border: 2px solid !important;
-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight !important;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow !important;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow !important;
padding: 1px !important;
}
を追加
ポップアップメニューの項目の縦の間隔を詰める 編集
menu label, menuitem label, menupopup label{
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-top:1px !important;
padding-bottom:1px !important;}
menu hbox, menuitem hbox, menupopup hbox,
menu image, menuitem image, menupopup image,
menuseparator{
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-top:0px !important;
padding-bottom:0px !important;}
アクセルキーをすべて表示させない 編集
.menu-accel {
display: none !important;
}
ツールバー 編集
ブックマークツールバーのファビコン, フォルダアイコンを消したい(非表示にしたい) 編集
#PersonalToolbar .bookmark-item > .toolbarbutton-icon {
display: none !important;
}
ブックマークツールバーを複数行に表示したい Fx2 編集
- Fx2
/* Multi-row bookmarks toolbar for Fx2 */ #bookmarks-ptf {display:block !important;} #bookmarks-ptf toolbarseparator {display:inline !important;} - バーの高さ表示に不具合のある場合次の設定が必要な場合がある
/* Sometimes you may need this */ #PersonalToolbar {max-height: none !important;}
ブックマークツールバーを複数行に表示したい Fx3 以降 編集
- Fx3.5
http://userstyles.org/styles/5687
- Fx3.6
http://userstyles.org/styles/20199
- ただし, 二行目以降のD&Dに不具合がある。 これを解消するには, 拡張機能
https://addons.mozilla.org/ja/firefox/addon/6937
ナビバー、ブックマークツールバーをマウスオーバーで自動開閉 編集
Fx2
#nav-bar, #PersonalToolbar { display: none;}
#navigator-toolbox:hover > #nav-bar,
#navigator-toolbox:hover > #PersonalToolbar
{ display: -moz-box;}
Fx3
http://userstyles.org/styles/6599
Fx3 拡張機能 Multirow Bookmarks Toolbarを使用している場合。 ただし, ドラッグオーバーでは開かない。
/*Auto Hide Bookmarks Toolbar
(w/ Multirow Bookmarks Toolbar Extension)*/
#PersonalToolbar { visibility: collapse !important; }
#navigator-toolbox:hover > #PersonalToolbar { visibility: visible !important; }
ツールバーの背景を変更 編集
「Preston Wiki - ツールバーの背景を変更する」をご覧ください。
ストップボタンとリロードボタンを統合 編集
中止ボタンの右に更新ボタンを置くこと
#stop-button:not([disabled=true]) + #reload-button,
#stop-button[disabled=true]
{
display:none !important;
}
ロケーションバーのドロップマーカー（▼印）を消す 編集
#urlbar dropmarker {display:none !important;}
ロケーションバーのfaviconを消す 編集
#page-proxy-deck {
display: none !important;
}
移動ボタンを常時表示 Fx3 編集
#go-button { visibility: visible !important; }
移動ボタンを消す 編集
#go-button-stack {display:none !important;}
移動ボタンの「移動」の文字を消す 編集
#go-button label {display:none !important;}
検索バーの検索エンジンの名称(グレイテキスト)を非表示にする 編集
#searchbar[empty="true"] .searchbar-textbox {
color: #FFFFFF; /*テキストの色はテーマに合わす*/
}
Firefox2.0.0.xは以下でも消せます
#searchbar[empty="true"] .autocomplete-textbox-container .textbox-input-box,
#searchbar[empty="true"] .autocomplete-textbox-container:hover .textbox-input-box {
visibility: hidden !important;
}
検索バーを長くする 編集
値は任意の値です、単位はpxです。
.searchbar-textbox {width: 400px !important;}
検索バーの右側に履歴を出すボタンを表示 編集
http://pc5.2ch.net/test/read.cgi/software/1101253968/861 より
#searchbar .autocomplete-history-dropmarker {
display: -moz-box !important;
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#history-dropmarker");
}
履歴の並び順を変えるには、Searchbar Autocomplete OrderもしくはSuggest JP Plus等のアドオンがお勧め。
ホームボタンを任意のものにする 編集
#home-button{
list-style-image: url("home.png") !important;
-moz-image-region: auto !important;
}
ただしhome.pngはchromeフォルダに保存, -moz-image-region: auto !important;は画像が一つのみの場合。
タブバー 編集
タブバーをマウスオーバーで自動開閉する 編集
.tabbrowser-strip{
min-height:4px !important;
max-height:4px !important;
}
.tabbrowser-strip:hover {
min-height:29px !important;
max-height:87px !important;
}
Office XP風にする 編集
/* Toolbar items on mouseover */
toolbarbutton:hover{
background-color: #B6BDD2 !important;
border: 1px solid #0A246A !important;
}
/* Fixes forward/back buttons bug */
#back-button:hover, #forward-button:hover {
border: 0px !important;
background: transparent !important;
}
/* Remove tab icons and close buttons */
.tabbrowser-tabs .tab-icon,
.tabbrowser-tabs > stack > .tabs-closebutton-box > .tabs-closebutton {
display: none !important;
}
/* Remove Tab Borders */
tab{
-moz-appearance: none !important;
-moz-border-radius-topleft: 0px !important;
-moz-border-radius-topright: 0px !important;
-moz-border-radius-bottomright: 0px !important;
-moz-border-top-colors: none !important;
-moz-border-right-colors: none !important;
-moz-border-left-colors: none !important;
}
/* Active tab */
tab[selected="true"] {
background: #B6BDD2 !important;
border: 1px solid #0A246A !important;
border-left: none !important;
}
/* Other tabs */
tab:not([selected="true"]) {
background: transparent !important;
border: 1px solid transparent !important;
border-right: 1px solid #666666 !important;
margin-top: 0px !important;
}
/* 最初のタブの左側のボーダーが消えるので */
.tabbrowser-tabs tab[selected="true"]:first-child {
border-left: 1px solid #0A246A !important;
}
非アクティブなタブの文字色を淡色にする 編集
tab {
color:GrayText !important;
}
tab[selected="true"] {
color:MenuText !important;
font-weight:normal !important;
}
タブが多い時に多段で表示する 編集
Firefox1.0以下
ただし、Tabbrowser Extensionsを導入していると起動できなくなります*1
tabs.tabbrowser-tabs > hbox{
display: block;}
tabbrowser tab{
display: inline;
min-width: 80px;}
Firefox2.0以上(Another 朝顔日記より),ただし, デフォルトの閉じたタブ復元機能, Tab Control/Tab Mix Lite CEのタブの複製機能およびSession Managerのセッションの復元機能などに不具合が出る。タブのD&Dにも制限があります。
tabbrowser .tabbrowser-arrowscrollbox scrollbox,
tabbrowser .tabbrowser-arrowscrollbox scrollbox>box {
max-width:0 !important;
max-height:none !important;
display:inline !important;}
tabbrowser tabs{
background-color:#aaa !important;
background-image:none !important;}
tabbrowser .tabs-stack>vbox>hbox>stack,
tabbrowser .tabs-stack>vbox>hbox>hbox {
height:0 !important;}
tabbrowser .tab-drop-indicator-bar,
tabbrowser *[class^="scrollbutton"]{
display:none !important;}
上記のタブの複製, セッション復元, 完全なD&Dを行いたいならuserChrome.cssでは無理があるため,拡張機能Tab Mix PlusやTab Kitを導入することを勧める。ただし他のタブ拡張系の拡張機能は干渉する可能性があるためこのCSSと共にそれらの拡張機能は無効/削除しておくのがよい。
タブに余裕を持たせる 編集
スペースをちょっと大きく取ります
tab{
margin-top: 4px !important;
margin-right: 1px !important;
padding: 4px 0.7em !important;
/* font-size: 8pt !important;*/
-moz-border-radius: 0px !important;}
#browser .plain{
border-top: 3px double #848484 !important;}
タブバーの表示位置を変える 編集
下側に表示
#content > tabbox { -moz-box-direction: reverse;}
左側に表示
#content > tabbox { -moz-box-orient: horizontal;}
.tabbrowser-strip {
-moz-box-orient: vertical;
overflow: -moz-scrollbars-none;}
.tabbrowser-tabs {
-moz-box-orient: horizontal;
min-width: 10px; /* お好きな値でどうぞ */
-mox-box-pack: start;
-moz-box-align: start;}
.tabbrowser-tabs > hbox {
-moz-box-orient: vertical;
-moz-box-align: stretch;
-moz-box-pack: start;}
.tabbrowser-tabs > hbox > tab {
-moz-box-align: start;
-moz-box-orient: horizontal;}
Tab Mix Plus を使用していて左側に表示するには,
Tab Mix Plusのオプション=>表示=>タブ:タブ幅を"最小","最大"共に同じ値とする。
Tab Mix Plusのオプション=>表示=>タブバー:ドロップインジケーター"TMPに内蔵のスタイル"を選択する。"「新しいタブ」ボタンを表示 ","「タブのリスト」ボタンを表示 ","「タブを閉じる」ボタンを表示"および""両端にスペースを表示"について"それぞれチェックをはずす。
尚,Tab Mix Plus設定≫表示≫タブバー≫タブバーの位置 下部にすると右側になる。
/*Vertical Tab Bar*/
/*set equal min and max tab width
use tabmix drag indicator on tabs
add this to your userChrome.css*/
/* Display the tabbar on the left */
#content > tabbox {
-moz-box-orient: horizontal;
}
.tabbrowser-strip {
-moz-box-orient: vertical;
/* note: you can set this to -moz-scrollbars-vertical instead,
but then the scrollbar will *always* be visible. this way
there is never a scrollbar, so it behaves like the tab bar
normally does */
overflow: -moz-scrollbars-none;
}
.tabbrowser-tabs {
-moz-box-orient: horizontal;
min-width: 10px; /* you may want to increase this value */
-moz-box-align: start;
}
.tabbrowser-tabs > stack > vbox > hbox > hbox {
-moz-box-orient: vertical;
-moz-box-align: stretch;
}
.tabbrowser-tabs > stack > vbox > hbox > hbox > tab {
-moz-box-align: start;
-moz-box-orient: horizontal;
}
タブをフラットにする 編集
.tabbrowser-tabs tab {
margin:0 3px 3px 0 !important;
padding:3px 4px !important;
color:-moz-dialogtext !important;
background-color:-moz-dialog !important;
-moz-appearance:none !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-colors:none !important;
-moz-border-radius-topleft:none !important;
-moz-border-radius-topright:none !important;
-moz-border-radius-bottomleft:none !important;
-moz-border-radius-bottomright:none !important;
border:1px solid -moz-dialog !important;
}
.tabbrowser-tabs tab:hover {
border-top:1px solid threedhighlight !important;
border-right:1px solid threedshadow !important;
border-bottom:1px solid threedshadow !important;
border-left:1px solid threedhighlight !important;
}
.tabbrowser-tabs tab[selected=true],
.tabbrowser-tabs tab[selected=true]:hover {
border-top:1px solid threedshadow !important;
border-right:1px solid threedhighlight !important;
border-bottom:1px solid threedhighlight !important;
border-left:1px solid threedshadow !important;
color:infotext !important;
background-color:infobackground !important;
font-weight:normal !important;
}
.tabbrowser-tabs tab:hover {
border-top:1px solid threedhighlight !important;
border-right:1px solid threedshadow !important;
border-bottom:1px solid threedshadow !important;
border-left:1px solid threedhighlight !important;
}
.tabbrowser-tabs tab .tab-text {
margin-top:2px !important;
}
常にタブアイコンを表示しない 編集
タブのアイコンがタブの幅を占領しなくなります。タブを多めに開く人へ。 Firefox2
.tabbrowser-tabs .tab-icon {
display: none;}
Firefox3.0, 3.5
.tabbrowser-tab > .tab-icon-image {
display: none;
}
.tabbrowser-tab > .tab-text {
-moz-margin-start: 7px !important;
}
タブバーの閉じるボタンを消す 編集
hail2u.net - Weblog - FirefoxのuseChrome.cssネタをご覧ください。
about:configで変更できる閉じるボタンの表示項目 browser.tabs.closeButtonsを整数値で作って 0 - アクティブなタブだけ表示 1 - すべてのタブに表示 2 - すべてのタブに非表示 3 - 一番端っこに表示
タブバーの開くボタンを消す (Fx3.0以前) 編集
.tabbrowser-tabs .tabs-newbutton {
display:none !important;
}
新規タブボタンを非表示(Fx3.5) 編集
.tabs-newtab-button {
display:none !important;
}
タブバーの左右にスペースを取る 編集
.tabbrowser-arrowscrollbox > scrollbox > box {
padding-left: 16px !important;
padding-right: 16px !important;
}
新しいタブボタンを 常に最右端に表示 (Firefox3.1b3pre以降) 編集
.tabs-container > .tabs-newtab-button {
visibility: visible !important;
}
.tabbrowser-arrowscrollbox > .tabs-newtab-button {
visibility: collapse !important;
}
新しいタブボタンを 常に最左端に表示 (Firefox3.5以降) 編集
.tabs-newtab-button {-moz-box-ordinal-group:1!important}
.tabbrowser-arrowscrollbox {-moz-box-ordinal-group:2!important}
.tabs-container>stack {-moz-box-ordinal-group:3!important}
.tabs-closebutton {-moz-box-ordinal-group:4!important}
.tabbrowser-arrowscrollbox > .tabs-newtab-button {visibility:collapse!important;}
.tabbrowser-arrowscrollbox + .tabs-newtab-button {visibility:visible!important;}
新しいタブボタンやスクロールボタンを分かりやすく (Firefox3.5以降) 編集
/*scroll button for tab 有効なら見やすく*/
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]),
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]) {
-moz-image-region: rect(0, 45px, 17px, 30px) !important;
}
/*New Tab Button 有効なら見やすく*/
.tabs-newtab-button {
-moz-image-region: rect(0px, 36px, 18px, 18px) !important;
}
サイドバー 編集
サイドバーのセキュリティ-レベルによって色を変える。 編集
/* URL bar background image for high security site */
#urlbar[level="high"] > .autocomplete-textbox-container {
background-image: url('high.png') !important;
background-color: none !important;
font-weight: 600 !important;}
/* URL bar background image for low security site */
#urlbar[level="low"] > .autocomplete-textbox-container {
background-image: url('low.png') !important;
background-color: none !important;
font-weight: 600 !important;}
/* URL bar background image for broken secure site */
#urlbar[level="broken"] > .autocomplete-textbox-container {
background-image: url('broken.png') !important;
background-color: none !important;
font-weight: 600 !important;}
サイドバーの幅を調節する 編集
#sidebar {
width:274px !important;
}
サイドバーの幅の制限を無くす 編集
/* * Allow sidebar to be closed completely using the slider Fx1.5- Fx3.7a1 */
#sidebar-box {
overflow-x: hidden !important;
}
#sidebar,
#sidebar-header {
min-width: 0px !important; max-width: none !important; overflow-x: hidden !important;
}
サイドバーを右側に配置する 編集
#main-window > hbox {
direction :rtl;}
#main-window > hbox > * {
direction :ltr;}
上記の方法はロケーションバーや検索バーなどのキャレット（カーソル）形状が変更されます
（参考：FAQ）。
これに違和感がある場合は次の方法を試してください。
#browser { -moz-box-direction: reverse;}
クローズボタンの配置を左側にする
#sidebar-box > sidebarheader {
-moz-box-direction: reverse; !important;
-moz-padding-end: 0px !important;
text-align: right !important;
}
サイドバーの不要な部分を消す 編集
サイドバーの検索バーを消す
#bookmarksPanel > hbox,
#history-panel > hbox {
display: none !important;}
サイドバーのツリーに表示される点線を消す
#bookmarksPanel treechildren::-moz-tree-line,
#history-panel treechildren::-moz-tree-line {
visibility:hidden !important;}
サイドバーのフォルダの先頭にある"＋"，"−"を消す
#bookmarksPanel treechildren::-moz-tree-twisty,
#history-panel treechildren::-moz-tree-twisty {
list-style-image: none !important;
width:0px !important;
padding:0px !important;}
サイドバーのスクロールバーを消す
#bookmarksPanel scrollbar,
#history-panel scrollbar {
display:none !important;}
サイドバーのブックマーク等のアイコン(フォルダ以外)を消す
#bookmarks-view treechildren::-moz-tree-image(leaf) ,
#history-panel treechildren::-moz-tree-image(leaf),
#sbTree treechildren::-moz-tree-image(leaf),
#cattree treechildren::-moz-tree-image(leaf)
{
list-style-image: none !important;
width: 0px !important;
height: 0px !important;
margin: 0px !important;
}
サイドバーブックマークなどのツリーの字下げ幅(インデント)を小さく 編集
サイドバーブックマークなどのツリーの字下げ幅(インデント)を小さくして, 表示できる文字数を多くしたい。
/*ツリーインデント*/
treechildren::-moz-tree-indentation
{
width:0.5em !important;
}
0.5emこの数字を好みに応じて変える。
サイドバーを自動開閉する 編集
CSSで実現するには, 開閉のタイミングの設定が出来ない等使い勝手はあまり良くない。そう感じる場合は拡張機能に種々のサイドバー自動開閉するものがあるのでそちらの使用を推奨する。
#sidebar-box {
min-width: 200px !important; max-width: 200px !important;
margin-left: -195px !important; }
#sidebar-box:hover { margin-left: 0px !important;}
サイドバーブックマークのツリー部分を水平スクロールできるようにする 編集
ツリーの表示領域の幅(以下の例では500px)を指定し, サイドバーの幅がそれ以下なら水平スクロールバーでツリーをスクロールできるようになる。
@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul)
{
treecol
{
min-width: 500px!important;
max-width: 500px!important;
}
treechildren
{
overflow-x: scroll !important;
}
}
ブックマークの管理 編集
いらない部分を隠す 編集
FirefoxのuserChrome.cssネタ #2より以下。
- Bookmark Managerのツリーを隠す
#bookmark-window #bookmark-views-splitter, #bookmark-window #bookmark-folders-view { display:none !important; } - Bookmark Managerの検索バーを隠す
#bookmark-window #bookmarks-search { display:none !important; } - Bookmark Managerのツールバーのテキストを隠す
#bookmark-window #command-toolbar .toolbarbutton-text { display:none !important; }
ステータスバー 編集
ステータスバー のフォントを大きくする。 編集
.statusbarpanel-text {font:13px Arial !important;}
スタイルシート切り替えボタンを常に表示する 編集
CSSをいつでもOFFにできるようになります。CSSが不完全なサイトでも快適に利用できるようになります。Fx1.0未満。
#page-theme-button {
display: -moz-box !important;
list-style-image: url(chrome://browser/skin/page-themes.png) !important;
padding: 0px 6px !important;}
ステータスバーに表示される拡張のアイコンを並べ替える 編集
拡張マネージャーのリストを並べ替えるだけで解決する場合があるので事前に確認してください。
また、拡張のOrganize Status Barを利用すると簡単に変更できます（推奨）。
下記の-moz-box-ordinal-groupの値を変えて適用すると数値順に並べ替えることができます。 上手く並べ替えられないときは項目数を増やしてみてください。
#page-report-button + * {
-moz-box-ordinal-group:1 !important;} /* デフォルトで左から1つ目 */
#page-report-button + * + * {
-moz-box-ordinal-group:2 !important;} /* 同2つ目 */
#page-report-button + * + * + * {
-moz-box-ordinal-group:3 !important;} /* 同3つ目 */
#page-report-button + * + * + * + * {
-moz-box-ordinal-group:4 !important;} /* 同4つ目 */
/* （必要に応じてここに5つ目以降を追加） */
#status-bar .statusbar-resizerpanel {
-moz-box-ordinal-group:99 !important;} /* リサイズパネルは常に右端 */
また、下記のサンプルように同様にIDを利用する形式でも指定できます（IDはDOM inspectorなどで調べることができます）。
#fasterfox-statusbar {-moz-box-ordinal-group:4 !important;}
#flagfox-statusbar {-moz-box-ordinal-group:3 !important;}
#noscript-statusIcon {-moz-box-ordinal-group:1 !important;}
#noscript-statusLabel {-moz-box-ordinal-group:2 !important;}
#status-bar .statusbar-resizerpanel {-moz-box-ordinal-group:99 !important;}
ただし、ForecastFoxなど一部の拡張はuserChrome.cssで並べ替えることができないようです。
ページ内検索バー 編集
ページ内検索バーをタブバーの上に表示 編集
#navigator-toolbox { -moz-box-ordinal-group: 1; }
#browser { -moz-box-ordinal-group: 3; }
#FindToolbar { -moz-box-ordinal-group: 2; }
#status-bar { -moz-box-ordinal-group: 4; }
上記の記述はFirefox1.5の仕様変更に対応していません。Firefox1.5を使っている場合は、上記に加えて次の記述を追加してください。
#FindToolbar {
display:-moz-box !important;
border-width:0 !important;}
#FindToolbar[hidden="true"] {min-height:0 !important;}
#FindToolbar[hidden="true"] * {display:none !important;}
上記の記述はFirefox2.0の仕様変更に対応していません。Firefox2.0を使っている場合は、次の記述に変更してください。
#navigator-toolbox { -moz-box-ordinal-group: 1; }
#browser-stack { -moz-box-ordinal-group: 3; }
#FindToolbar { -moz-box-ordinal-group: 2; }
#status-bar { -moz-box-ordinal-group: 4; }
#FindToolbar {display:-moz-box !important;border-width:0 !important;}
#FindToolbar[hidden="true"] {min-height:0 !important;}
#FindToolbar[hidden="true"] * {display:none !important;}
上記の記述はFirefox3.0の仕様変更に対応していません。Firefo3.0を使っている場合の記述方法は不明です。
ページ内検索(Findbar)をタブバーの下に表示する 編集
拡張機能XUL/Migemoを導入する
ページ内検索バーを常に表示する 編集
#FindToolbar{
display: -moz-box !important;
}
XUL/Migemoを使用している場合
#XMigemoFindToolbar,#FindToolbar{
display: -moz-box !important;
visibility:visible !important;
}
ページ内検索バーに入力履歴が欲しい 編集
Firefox2では拡張機能userChrome.jsを利用して可能です。
ブックマークバー 編集
ブックマークツールバーを複数行に表示したい 編集
/* Multi-row bookmarks toolbar */
#bookmarks-ptf {display:block !important;}
#bookmarks-ptf toolbarseparator {display:inline !important;}
バーの高さ表示に不具合のある場合次の設定が必要な場合がある
/* Sometimes you may need this */
#PersonalToolbar {max-height: none !important;}
ブックマークバー全部いつも見えるFirefox2。 編集
#bookmarks-ptf {display:block ;max-width: 100% !important;}
#bookmarks-ptf toolbarseparator {display:inline}
ポップアップウィンドウがブロックされた場合や、パスワードの記憶の確認の際などに表示される通知バー(Notification bar)を、画面上部ではなく下部に表示したい 編集
userChrome.cssに
notificationbox > stack {
-moz-box-ordinal-group: 2;
}
入力欄の足切れ対策(userContent.css, userChrome.css) 編集
URL バーやサイドバーの検索入力欄の文字が下にずれて表示される。
URL バー:userChrome.css 編集
/* 足切れ対策URLBar*/
#urlbar
{
line-height: 1.0 !important;
}
Searchbar:userChrome.css 編集
/* 足切れ対策Searchbar*/
#searchbar
{
line-height: 1.0 !important;
}
サイドバー:userChrome.css 編集
/* 足切れ対策Sidebar*/
.textbox-input-box
{
line-height: 1.0 !important;
}
コンテンツ:userContent.css 編集
/* 足切れ対策入力欄 */
input
{
line-height:1.0 !important;
}
各種 マネージャ 編集
ダウンロードマネージャをシンプルにする。 編集
download {
padding: 2px !important;
border-bottom: 0px !important;}
Webdeveoper Extension 編集
#webdeveloper-menu text {color: #474747 font: normal 9px helvetica !important;}
#webdeveloper-menu {border-style: none !important; }
ExtensionとThemeマネージャを狭くする。 編集
theme, extension {
padding: 3px 2px !important;
background-color: #F6F6F6
border-bottom: 1px #CCCCCC solid !important;}