userChrome.cssで編集できる項目はまだまだありますので、少しずつまとめまがら紹介していきたいと思います。
とりあえず最初の10個をまとめてみました。
初めての方はuserChrome.cssを編集するための準備をしておきましょう。
基本的にデフォルトインストールした場合、userChrome.cssというファイルは以下の場所に存在します。
●Windows XPの場合
C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\******（8文字のランダム英数字）.default\chrome/
●Windows 98/Me の場合
C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\********.default\chrome/
●Linux の場合
~/.mozilla/firefox/********.default/chrome/
●Mac OSの場合
~/Library/Application Support/Firefox/Profiles/********.default/chrome/
もしこれらの場所にuserChrome.cssが見あたらない場合は、メモ帳などのテキストエディタで新規作成してください。（以下の各コードを記述してuserChrome.cssと名前を付けて保存後、上記のフォルダ内に置いてください。）
それでは以下のコードから気に入ったものがあれば、コード（注釈含む）をどんどんuserChrome.css内にコピペして保存してください。
/*○○*/部分はコメント部分ですので後で自分がわかるように書き換えていただいても結構です。
１．ブックマークプロパティ窓のサイズ（幅）を変更する。
ブックマークプロパティを開いた際、窓の幅が小さくて説明文やURLが見にくい場合がありますが、このコードで任意の数値を設定することによりサイズを拡大・縮小できます。（例は幅350px）
/* ブックマークプロパティのサイズ変更 */
#bmPropsWindow {
width: 350px !important;
}
２．”要素のプロパティ”サイズを変更する。
画像上などで右クリックして表示できる要素のプロパティウィンドウはかなり小さく見にくいですね。このコードでサイズを変更できます。（例はウィンドウサイズ825×500）
/* 要素のプロパティサイズ */
#metadata {
width: 825px !important;
height: 500px !important;
}
３．システムフォントの変更
ツールバーやメニューなど全体のフォントを変更できます。
（例はIPA P ゴシック9pt)
/* global font */
* {
font-size: 9pt !important;
font-family: ipagp.ttf !important;
}
４．メニューツールバーの削除
メニューツールバー全体を非表示にします。
/* remove menu toolbar */
#toolbar-menubar {
display: none !important;
}
５．メニューアイコンの削除
ファイルや表示などのドロップダウンで表示されるメニュー項目のアイコンを非表示にします。
/* don't display menu icons in some menus */
menu[label="File"] menuitem,
menu[label="Help"] menuitem,
/*menu[label="View"] menuitem,*/
menu[label="Edit"] menuitem,
menu[label="Tools"] menuitem,
menu[label="Tools"] menu {
list-style-image: none !important;
}
６．メニュー内の特定項目を非表示にする。
ツールやヘルプ内にある不要な各項目を個別に非表示にすることができます。（例はヘルプ→リリースノートの非表示）
/* hide some menu items */
menuitem[label="リリースノート"] {
display: none !important;
}
７．メニューとその中のアイテムの表示フォントサイズを変更する。
ファイル・表示などの項目およびその中のメニュー項目のフォントサイズを変更できます。（見本は文字サイズ12ptでかなり大きくなります。）
/* メニューおよびアイテムのフォント変更 */
menubar > menu *,
popup > * {
font-size: 12pt !important;
}
８．進む・戻るボタン横のリスト表示用▼を非表示にする。
進む・戻るボタン横にある▼マークでリストから選んだページで前後できますが、この機能をあまり使わない場合は非表示にできます。
/* 進む・戻るボタン横のリスト表示用▼を非表示 */
#back-button .toolbarbutton-menubutton-dropmarker,
#forward-button .toolbarbutton-menubutton-dropmarker {
display: none !important;
}
９．全てのツールバー背景を変更する。
ツールバー部分の背景画像を任意の画像に変更できます。これによりオリジナルテーマのような見た目を作り出すことができます。
＊background.gifが画像ファイル名です。使いたい画像をchromeフォルダ内に置いて、そのファイル名を記述してください。
/* ツールバーの背景 */
toolbox,
#toolbar-menubar,
#nav-bar,
#PersonalToolbar,
#FindToolbar,
tabbox,
sidebarheader,
#sidebar-box,
window statusbarpanel {
-moz-appearance: none !important;
background-image: url('background.gif') !important;
background-color: transparent !important;
}
＊メニューを開いた際の背景も変更したいなら以下も追記してください。（ツールバーと別画像にすることも可能です。）
/* メニュー背景画像 */
menupopup > *,
popup > *{
background-image: url('background.gif') !important;
background-color: transparent !important;
}
１０．タブツールバーの高さを変更する。
タブツールバーをもう少し高くしたい場合に。
（設定数値によってはタブに表示されるFaviconが歪んで表示されるかもしれません。）
/* change the tab toolbar height */
.tabbrowser-tab {
height: 26px !important;
}
.tabbrowser-strip {
height: 26px !important;
}
以上のようにFirefoxの見た目を細かくチューニングすることができます。こういった設定をこまめに行うことにより、テーマなどでは味わえない自分だけのブラウザを作り出すことができます。
気に入った設定項目はuserChrome.cssにどんどん列記するだけでOKです。
また、元に戻したい場合は再度userChrome.cssをメモ帳で開いて、項目を削除するだけでデフォルトに復旧できます。
わりと気軽にできるカスタマイズですので、オリジナリティが欲しい方はチャレンジしてみてください。
また今後10−20個ずつ記事にしていきたいと思います。
＜関連記事＞
■「userChrome.css」を編集してFirefoxのツールバーをカスタマイズする方法。
■ユーザーCSSを使って”スタイリッシュに”ページを表示する「Stylish」
■Firefoxの様々な設定ファイルにアクセスできる「Edit Config Files」
映画や音楽、ドラマなどイチオシ番組はここでチェック「GyaO」
ソニーのブログパーツ「FLO:Q」
ツイート
