FirefoxQuantumのインターフェースは、独自のユーザーbrowser.cssファイルによって実現されています。このファイルを編集することで、不要なメニュー項目を隠したり、ナビゲーションツールバーの下にタブバーを移動したり、ブックマークツールバーに複数の行を表示したり、通常では不可能な動作をさせることができます。

仕組み

関連記事：FirefoxQuantumはChromeの単なる「コピー」ではなく、より強力になった

Firefox user browser.cssは、Firefoxが使用するカスケードスタイルシート（CSS）ファイルです。スタイルシートは通常 Web ページに適用されますが、この特定のスタイルシートは Firefox のユーザーインターフェイスに適用されます。Webページ周辺のすべてのものの外観やレイアウトを変更することができます。実際に機能を追加することはできず、すでにあるものを変更したり、隠したり、移動したりする修正のみ可能です。

これはGoogle Chromeとは関係なく、Google Chromeの名前の由来となったWebブラウザーのユーザーインターフェースのことを指します。

このuserbrowser.cssは、Firefoxでは昔からあるファイルですが、firefoxquantumの登場により、その重要性が増してきました。これまでブラウザーのアドオンを使って行っていた多くの調整が、user-browser.cssファイルを編集することで可能になりました。

調整箇所

CSSコードとFirefoxのインターフェイスデザインを理解していれば、自分で微調整を作ることもできます。もし、あなたが特定の変更をしたい場合、他の誰かがその方法を考え、コードを書いているかもしれません。

以下は、そのための参考資料です。

• userbrowser.orgのTweak例：userbrowser.cssを表示したショートリストです。
• Classic CSS tweak: FirefoxQuantumで動作しなくなったuserbrowser.css classic theme restorer拡張の作者が作ったtweakです。
• userChrome tweaks：面白いFirefoxの調整セットです。
• Firefox CSS on Reddit: このサブRedditは、微調整を議論するためのコミュニティです。subredditを検索して他の人のTweakを探したり、みんながシェアしたものを見たり、本当に欲しいTweakが見つからなかったら意見を求めたりすることも可能です。
• コンテキストメニューの編集ガイド: Firefox のコンテキストメニューから項目を削除し、リスト内の順序を変更する手順について、Firefox CSS sub-Reddit から抜粋しました。

古いバージョンのFirefoxでは、インターフェースが異なることを忘れないでください。古いユーザーのbrowser.cssは、Firefox 57以上（FirefoxQuantumとも呼ばれる）では、ネットで見つけた細かい調整で動作しないことがあります。

CSSの使い方を知っている場合は、ブラウザのツールボックスを有効にして、Firefoxのクロームを確認します。これは、独自のCSSコードを使用して、さまざまなブラウザのインターフェイス要素をカスタマイズするために必要な情報を提供します。

ユーザーブラウザ.cssファイルの作成方法

このユーザーbrowser.cssファイルはデフォルトでは存在しないので、試したい調整ができたら、まずFirefoxのプロファイルフォルダの適切な場所に作成する必要があります。

Firefoxのプロファイルフォルダを起動するには、Firefoxで「メニュー」→「ヘルプ」→「トラブルシューティング情報」をクリックします。

アーカイブフォルダーの右側にある「フォルダーを開く」ボタンをクリックして、アーカイブフォルダーを開きます。(macOSやLinuxでは、「Showinfinder」または「opendirectory」ボタンが表示されます。以下の手順はWindowsでの作業ですが、MacやLinuxでも基本的に同じです（使用するファイルマネージャーやテキストエディタが異なります）。

表示されたプロファイルフォルダの中に「chrome」というフォルダがあれば、それをダブルクリックします。しかし、このフォルダは最新版のFirefoxでは作成されていないため、そうでないかもしれません。

フォルダを作成するには、右側のペインで右クリックし、[新規作成] > [フォルダ]を選択します。chrome」という名前を付けてEnterキーを押し、ダブルクリックします。

関連：Windowsでファイルの拡張子を表示させる方法

まだ表示されていない場合は、Windowsにファイル拡張子を表示するように指示する必要があります。Windowsは操作を簡単にするために、デフォルトでファイル拡張子を非表示にしています。この情報がデフォルトで表示されるmacOSやLinuxでは、この手順を実行する必要はありません。

Windows 8やWindows 10では、リボンの［表示］タブをクリックし、［ファイル拡張子］にチェックを入れると、表示させることができます。Windows 7の場合、「組織」→「フォルダと検索のオプション」をクリックし、「表示」タブをクリックして「既知のファイルタイプの拡張子は表示しない」のチェックを外します。

ユーザーブラウザの.cssファイルが作成されます。これは実際には、.txtではなく.cssという拡張子を持つ単なる空白のテキストファイルです。

そのためには、右側のペインで右クリックし、「新規作成」→「テキスト文書」を選択します。ファイル名は「user-browser.css」とし、拡張子「.txt」を削除してください。

Windowsは、ファイルの拡張子を変更していることを警告します。

macOSまたはLinuxでは、同じ名前で空のテキストファイルを作成します。

ユーザーブラウザー.cssファイルの編集方法

ユーザーブラウザーの.cssファイルを編集するには、任意のテキストエディタを使用します。Windowsに付属のテキストエディタ「メモ帳」は問題なく動作します。より強力なテキストエディターが必要な場合は、Notepad++をお勧めします。

メモ帳でファイルを編集するには、ファイル上で右クリックし、「編集」を選択します。

コピー＆ペーストで好きな調整を追加します。複数の調整を追加する場合は、それぞれの行にすべて追加してください。

終了したら、「ファイル」→「メモ帳で保存」をクリックしてファイルを保存します。

ユーザーbrowser.cssファイルを編集した場合、変更を反映させるために、開いているすべてのFirefoxウィンドウを閉じ、Firefoxを再起動する必要があります。

ユーザーブラウザの.cssファイルを編集するために「chrome」フォルダに頻繁に戻るようであれば、フォルダへのデスクトップショートカットを作成するか、ファイルエクスプローラの「クイックアクセス」フォルダに追加しておくとよいかもしれませんをファイルエクスプローラーで開きます。

このusercontent.cssファイル

Firefoxには、編集可能なusercontent.cssファイルもあり、usercontent.cssファイル用の調整と書かれたものに出くわすこともあります。

このファイルを使用するには、Chromeのフォルダと同じフォルダに「usercontent.css」というファイルを作成するだけです。このファイルで行う調整は、新しいタブやオプションページなど、Firefox内部の「コンテンツページ」に影響します。

助けて！何か壊れちゃった！？

もし、この調整で問題が発生した場合は、ユーザーブラウザ.cssファイルから削除してFirefoxを再起動してください。それでもうまくいかない場合は、ユーザーブラウザ.cssファイルを完全に削除してブラウザを再起動すると、すべての変更が削除されて新しいFirefoxインターフェースが得られます。