Firefoxの見た目をカスタマイズ

Firefox userChrome.css

家のも会社のもFirefox自体の見た目を少しカスタマイズしてる。
たいして凝ったことをしてるわけではないけど、インストールしなおす度に情報を検索するのも面倒。
ってことで、ここにまとめておく。*1


Firefoxの見た目をいじる場合、主に以下の3パターンがあるかと。

  1. テーマをインストールする
  2. アドオン(Stylish、グリモン)をインストールする
  3. userChrome.css(もしくは、userChrome.js)を編集する

他にも、

  • 「右クリック→カスタマイズ」で設定
  • 「about:config」で設定

などでもごにょごにょできる。

今回は、主に「3. userChrome.cssを編集する」をメモ。


CSSファイルを編集する

userChrome.cssの場所

まずは、CSSファイルの場所。私のWindowsXPでは以下のフォルダ。
おそらく、Widows系であれば似たような名前、階層にあるかと。

C:\Documents and Settings\{USER_NAME}\Application Data\Mozilla\Firefox\Profiles\********.default\chrome\

Linuxだと、以下のようなディレクトリがあるかと。

~/.mozilla/firefox/********.default/chrome/

*2


さて、それではカスタマイズ内容を。

検索窓の虫眼鏡アイコンを非表示に

いわゆるGOボタン、入力した文字列で検索を開始するためのボタン。
検索ワードを入力したらそのままエンターを押すので、このボタンはまったく使ってない。
検索窓内のスペースも使われて目障りなので非表示にします。

.search-go-button {
  display: none !important;
}
ロケーションバーにある緑色の三角アイコン(GOボタン)を非表示に

こちらも上記同様、ロケーションバーにURLを入力したらそのままエンターを押すので、まったく使ってない。
なので非表示に。

#go-button {
  display: none !important;
}
ロケーションバーにある星(☆)アイコンを非表示に

ブックマーク用のアイコン。
現状ではFirefoxのブックマークには新規追加はあまりしておらず、はてブかGoogleブックマークに追加してる。
それに、Firefoxに追加する際もショートカット(Ctrl+D)使ってるからこのボタンは使ってない。
ロケーションバー内のスペースも使われて目障りなので非表示に。

#star-button {
  display: none !important;
}
再起動

設定を反映するにはFirefoxの再起動が必要。



ついでに、おまけを載せておく。

「右クリック→カスタマイズ」で設定

メニューバーあたりで「右クリック」をして、「カスタマイズ」を選び、「ツールバーのカスタマイズ」へ。

アイコンのみ(テキストなし)に

「表示」の箇所で、「アイコンのみ」を選択する。

アイコンを小さいアイコンに

「表示」の箇所で、「小さいアイコンを使用」をにチェックを入れる。

throbberを非表示に

ページ読み込み時などに右上でクルクル回ってるアイコンを、ツールバーからドラッグして持ってくる。
*3


こんな感じでカスタマイズする。
「不必要なものがなくなってすっきり」 & 「表示領域が広がってやったね」、って感じで。

追記@2009/03/26

デフォではuserChrome.cssはなかった気がする。
userChrome-example.cssをコピーしてuserChrome.cssを作成。

*1:まぁ、バックアップをとっておけばいいんじゃね？という話も。。。

*2:「{USER_NAME}」や「********」は適宜置き換えで。

*3:userChrome.cssでもできるけど、これはこっちでやってる。