iBitzEdge

Firefoxのインターフェイスをカスタマイズする時に必要な「userChrome.css」を作成する方法

Pey

Firefoxは、「userChrome.css」を編集することで、メニューやダイアログ、ツールバーなど、ユーザーが好みのインターフェイスを変更することができる。
例えば、タブの位置とアドレスバーの位置を逆にしたい場合や、読み込み時のアニメーションを変更することなどもできる。

これらのことを行うためには、cssファイルを作成して編集する必要がある。もちろんすでに作成している場合は必要ない。

ここでは、Windows/Mac/のFirefoxのインターフェイスをカスタマイズするために必要な「userChrome.css」ファイルの作成と、配置する場所やフォルダーについてかんたんに説明する。

userChrome.cssファイルの作成

  1. トラブルシューティング情報を開く

    Firefoxブラウザを開き、アドレスバーに「about:support」と入力しエンターキーを押し、トラブルシューティング情報画面を開く。

  2. プロファイルフォルダ―を開く

    トラブルシューティング情報のページで、アプリケーション基本情報のセクションにある、「プロファイルフォルダ―」の右の「フォルダーを開く」ボタンをクリックする。

    クリックすると自動的に「xxxxx.default」という名前のフォルダーに移動する。(xxxxxはユーザーによって異なる)

  3. chromeフォルダーの作成

    「.default」フォルダー内に「chrome」という名前で新しいフォルダーを作成する。chromeフォルダーの作成方法は環境によって異なるが、Windowsの例では、.defaultフォルダー内の空いている場所で右クリック>新規作成>フォルダーの順でクリックし「新しいフォルダー」という名前を「chrome」という名前に変更して作成する。

    また、chromeの文字は全て小文字で入力する必要があることに注意。

    ※chromeフォルダーへすぐにアクセスできるようにショートカットを作成しておくと便利。

  4. userChrome.cssファイルの作成

    chromeフォルダーをダブルクリックして開き、chromeフォルダー内に「userChrome.css」という名前のファイルを作成する。

    cssファイルの作成方法は環境によって異なるが、Windowsの場合は、フォルダー内の空いている場所で右クリック>新規作成>テキストドキュメントの順でクリックし、「新しいテキスト ドキュメント.txt」という名前を「userChrome.css」に変更して作成する。

    ※Windowsの場合、「.txt」や「.css」などの拡張子が表示されない場合は、拡張子を表示させるように設定しておく必要がある。（参考：Windows10で拡張子を表示させる方法）

    以上の手順でcssファイルが作成できたので、以降はインターフェイスをカスタマイズしたいときはこのcssを編集することになる。

出典または引用