Firefox UIのカスタマイズ方法を徹底解説!userChrome.cssで見た目を自由に変えるステップバイステップガイド

ここ数年、特に最近になってその傾向が強まっていますが、筆者はFirefoxの見た目や挙動を自分のマシンに合わせて変更せざるを得ない場面が何度もありました。以前は理にかなっていたデフォルト設定が、ほとんど恣意的とも言える形で変更され、作業フローに機能的・美的な非効率をもたらしてきたのです。AustralisやProtonは、この現象の好例と言えるでしょう。

最近筆者は、Firefox 91以降で採用された「グレー地にグレー」という配色を元に戻す方法について、かなり詳細なガイドを2本公開しました。いずれも筆者の持っていたFirefox UIに関する知識に依拠した内容だったため、多くの人にとっては手順が難解に感じられたかもしれません。そこで本記事では、Firefox UIをカスタマイズするための汎用的なガイドを作成しました。同じことを試みたい方でも、つまずきにくい構成になっています。

基本の仕組み

FirefoxのUIは、ある意味でWebページとよく似ています。CSS(Cascading Style Sheets)と呼ばれるWebベースの言語による一連のスタイル指定によって定義されているのです。これは通常のサイトと同じ仕組みです。たとえばあるサイトで表示されるのはテキストですが、ページの幅、フォントの色、段落の間隔などを決めているのはCSSファイルです。Firefoxも同様にスタイリングされています。

デフォルトのルールは、独自のルールを作成することで上書きできます。そのためには、Firefoxプロファイルに新しいファイルを追加します。ファイル内に新しいルールを記述すると、Firefox UIの既存の視覚要素に反映されます。具体的な手順は以下の通りです。

• Firefoxを開き、アドレスバーに「about:support」と入力します。
• 開いたページの表にある「プロファイルフォルダー」の行を探し、「フォルダーを開く」ボタンをクリックします。すると使用中のOSのファイルエクスプローラーが起動し、Firefoxプロファイルの場所が表示されます。なお、Firefoxのプロファイルはユーザーごとに固有なので、複数ユーザーがいる場合はそれぞれ個別に変更が必要です。

• プロファイルの場所が分かったら、まずバックアップを作成しましょう。フォルダ全体とその中身を手動でコピーするだけでも十分です。何か問題が起きても、初期状態に復元できるようにしておくのです。大きな変更を行う前に必ず実施してください。
• Firefoxプロファイルフォルダ内に、「chrome」という名前のフォルダを作成します(すべて小文字)。すでに存在する場合は不要です。
• そのフォルダに入り、「userChrome.css」という名前のファイルを作成します(大文字・小文字の使い方に注意してください)。
• このファイルをテキストエディタで開きます。

デフォルトではこのファイルは空で、何も含まれていません。ここにCSSの指示を書き込むことで、Firefoxのさまざまな要素の見た目(や挙動)を上書きしていきます。筆者はこれまで何度も同じ作業を行っているので、ワークフローの参考として過去のガイドを活用できます。たとえば以下のようなものがあります。

• Plasma HDスケーリングとFirefox
• Firefoxのピン留めタブ
• Firefoxとアドレスバーの挙動

追加の下準備

変更を有効にするには、あといくつかの準備が必要です。

• アドレスバーに「about:config」と入力し、警告が表示されたら承認して先へ進みます。
• about:configページの検索ボックスで「legacy」を検索すると、次の設定項目が表示されます。

toolkit.legacyUserProfileCustomizations.stylesheets

この項目をダブルクリックして「false」から「true」に切り替えます。これにより、Firefoxがカスタムの修正を読み込み、ブラウザに適用できるようになります。この設定を切り替えない限り、UIには一切変化が現れません。

• 現在空の状態であるuserChrome.cssファイルに、冒頭として次の1行を追加します。

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

これにより、レガシーな要素や宣言を使用できるようになります。

• 最後に、CSSの基本的な知識と仕組みの理解は必須です。これがないと、本記事で説明する概念を理解するのは困難でしょう。クラス、識別子、CSSの階層構造やルールの優先順位といった概念です。残念ながら、魔法のような近道は存在しません。

Firefox UIのレイアウトを知る

これで動作させるための核心的な材料は揃いました。次はUIそのものに慣れる必要があります。筆者のチュートリアル(上記リンク)では、.tab-background、#searchbar、#navigator-toolboxなどのセレクタを使用しました。「これらが何なのか、どこでその情報を見つければいいのか」と疑問に思うのは当然です。

答えはそれほど単純ではありません…。

第一に、リファレンスガイドが必要です。第二に、Firefoxに組み込まれているBrowser Toolboxを利用できます。これは要素を選択して特定するためのツールです。ただし、やや骨の折れる作業になることは覚悟してください。まずブラウザのメニューから「その他のツール」→「ウェブ開発ツール」を開きます。次に、開いたパネルの右端にある3点リーダーのアイコン(別メニュー)をクリックし、「設定」を選択するか、F1キーを押します。そこで右列の最後の2つのオプション「ブラウザクロームの...を有効化」と「リモートデバッグを有効化」にチェックを入れる必要があります。あまり直感的とは言えません。しかも同じUIの中でハンバーガーメニューと3点メニューという異なる種類のメニューが混在している点については、あえて不満を述べるのはやめておきましょう。

もうひとつの選択肢として、最も重要なUI要素に絞った簡易的な解説を筆者が行う方法があります。そこで、Proton関連のガイドで筆者が変更した要素を注釈付きのスクリーンショットにまとめました。

重要な要素は以下の7つです。

1. #navigator-toolbox - ページナビゲーションとタブバーを含む枠全体です。
2. #nav-bar - navigator-toolboxの下半分(下部セクション)のみを指します。
3. .tabbrowser-tab[selected="true"] - アクティブなタブの要素です。状態(selected、true)に注目してください。
4. .tabbrowser-tab:not([selected="true"]) - 非アクティブなタブです。
5. .tabbrowser-tab[usercontextid] - コンテナータブです(Containersアドオンを使用している場合)。なお、3〜5番目の項目については、.tab-backgroundというクラスも把握しておく必要があります。これはタブの背景領域を指定するもので、後ほど上記のtabbrowser-tab系の宣言と組み合わせて使用します。
6. #urlbar - アドレスバーです。類似の目的を持つ#urlbar-backgroundという識別子もあり、先ほど紹介したタブ背景要素と似た役割を果たします。こちらもすぐ後に具体例を示します。
7. #searchbar - 検索ボックスです(使用している場合)。

実際にはもう少し複雑なのですが、これでどのような方向に進んでいるのかは掴めたはずです。一番良いのは、いくつかの実例で示すことだと思うので、早速見ていきましょう。

基本のカスタマイズ例

以下のコードをuserChrome.cssに追加すると、次のような効果が得られます。

• アクティブなタブに対して、タブの大きな四角い背景部分の境界線を設定します。
• 上の境界線は3px、左右は1pxの太さになります。
• それぞれ色も異なります。
• 左右の境界線は30%の透明度を持ちます。

.tabbrowser-tab[selected="true"] .tab-background {
  border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-top: 3px solid #0a84ff !important;
}

次のコードをuserChrome.cssに追加すると、以下の効果があります。

• 非アクティブなタブの背景(タブの大きな四角いキャンバス)を設定します。sRGBカラースペースで、現在の色(システムのアクセントカラー)と透明レイヤーを混合した実際の背景色を指定し、システムアクセントカラーの不透明度をわずか5%にします。要するに、タブはほぼ透明になり、ブラウザ本来の色と調和します。
• 30%の不透明度を持つ非常に細い1px(黒)の境界線を作成します。「!important」句は、同じ要素に適用される他のどのルールよりも自分のルールが優先されることを意味します。

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

さらに次のコードをuserChrome.cssに追加すると:

• 左側に2pxのマージンを追加することで、タブをわずかに内側へ押し込みます。つまり、タブとブラウザウィンドウの端との間に小さな余白が生まれます。

#navigator-toolbox {
  margin-left: 2px !important;
}

さらに応用編

次のコードをuserChrome.cssに追加すると:

• アドレスバー(urlbar)の背景を純白に設定し、先ほど指定したアクティブタブのアクセントカラーに合わせた薄い30%不透明度の境界線を付けます。ここでは完全に自由にデザインできます。

#urlbar-background {
  background-color: white !important;
  border: 1px solid rgba(10, 132, 255, 0.3) !important;
}

もちろん、できることはまだまだたくさんあります!ただ、これらの例があれば、あとは自力で進められるはずです。

まとめ

かなり複雑だったことは認めます。Firefox UIをもっと簡単に編集できれば良いのですが、残念ながら、デフォルトの見た目に満足できず、基本のカスタマイズ以上の変更を望むなら、CSSの知識、CSSファイル、そして一連のルールが必要になります。本ガイドは、ブラウザインターフェースの細部すべてには立ち入らずに、その実現方法を概説するものです。

これが決して簡単な作業ではないことは重々承知しています。CSSは使いこなせる人には「簡単」に見えますが、シンプルで人間工学的な解決策を求める一般の人々には、正当な理由から敬遠されがちです。しかし筆者は、少し時間を投資してこの言語を習得することが正しい道だと考えています。そうすれば、どこかの誰かの恣意的な判断に頼ることなく、UIに必要な調整を自由に加えられるようになるからです。Mozillaにもっと良い選択をしてほしいものですが、それでも、あれだけの混乱が詰め込まれたFirefoxは依然として最高のブラウザであり、インターフェースを変更できる唯一の存在です。デスクトップでもモバイルでも使うべきブラウザは、これ以外にありません。Firefoxがあるからこそ、インターネットはかろうじて使いやすい状態を保てているのです。Firefoxのない未来は、あなたが望むものではないはずです。さあ、CSSを手に取り、不快な要素を取り除いて、Firefoxを使い続けましょう。以上です。

それでは、また。