m0r1の日記

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を作成。

Permalink | コメント(0) | トラックバック(0) | 00:12