ENTEREAL

背景

最新HTML5やCSS3の対応状況やアドオンの豊富さなどが理由でWEB系の表示確認やテストをする時以外は、基本的にFirefoxをメインに使っています。

使うときは複数ディスプレイ(SXGA + WQHDの2画面)に複数ウインド(平均 約10ウインド程度)を並べ、WEB、メール、画像編集、コーディングなどを同時に進めていて、各作業においては、1動作でも少なくなるように日々考えながら作業しています。

その代表例が、各アプリケーションにおけるキーボードショートカットであり、多機能多ボタンマウスであり、各種機能の自動化等を行っています。

今回は、課題は、限られた画面エリアに出来るだけ多くの情報を同時に表示するかという部分に特化して、FirefoxのUIに関してカスタマイズしてみます。

ブックマークまわりのカスタマイズ

作業をするとき、Firefox上では、左サイドに常にブックマークリストを表示し、複数のタブに複数のページを開き、それらを行き来しながら作業していますが、このブックマークリストが意外と大きく場所を取り、結果としてFirefoxのウインドを大きくしなければ、ページ表示に必要な大きさが確保できない状況を改善すべく、FirefoxのUIをカスタマイズする事に至ったのです。

今回は、作業前と作業後の結果比較を先に、ご紹介します。明らかに画面が広くなってますよね。

カスタマイズ前

カスタマイズ後

カスタマイズ方法

FirefoxのUIをカスタマイズする方法は幾つかありますが、今回は、独自のcssスタイルを作成し、Firefoxに適用する方法を使います。

1. FirefoxのProfileディレクトリを開く

Firefoxのアドオンや各種設定が保存されている以下のフォルダを開きます。OSのバージョンによって若干異なりますので、ご自身に合ったパスを開いてください。

// Windows Vista/7/8/8.1の場合
C:\Users\<ユーザ名>\AppData\Roaming\Mozilla\Firefox\Profiles

// Windows XPの場合
C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles

// Mac OS Xの場合
/<ユーザホーム>/Library/Application Support/Firefox/Profiles

* Windowsは、デフォルトで「AppData」及び、「Application Data」が非表示になっています。
* OS X 10.7以上は、デフォルトで「~/Library」が非表示になっています。

上記、ディレクトリの下に、*******.defaultというディレクトリがありますので、その中が各種設定等の格納先になります。
*******の部分は英数羅列の文字列です。

2. chromeディレクトリを開く

chromeというディレクトリがなければ、自分で作成し、そのディレクトリに移動してください。

3. userChrome.cssの編集

まずは、中身の空のuserChrome.cssというファイルを作成してください。次に、以下のテキストをファイルに書き込んで文字コードUTF-8で保存してください。
* 下記からuserChrome.cssをダウンロードする事も可能です。

@charset "UTF-8";
#sidebar {min-width: 0px !important;}
#bookmarks-view treechildren {margin-left: -20px !important; font-size: 10px !important;}
treechildren::-moz-tree-indentation {width: 0.5em !important;}
#bookmarksPanel scrollbar {display: none !important;}

4. Firefoxを再起動

全てのFirefoxを終了し、再度起動すると、この変更が画面に適用されます。

CSSスタイルの解説

#sidebar {
min-width: 0px !important;
}

#bookmarks-view treechildren {
margin-left: -20px !important;
font-size: 10px !important;
}

treechildren::-moz-tree-indentation {
width: 0.5em !important;
}

#bookmarksPanel scrollbar {
display:none !important;
}