Firefox 91〜94:視覚と使いやすさを改善する追加CSSカスタマイズ術

毎朝、鏡を見て自問しています。「自分はヒップスターだろうか?」と。その答えは常に明確なノーなので、私の人生における選択は、美的にも機能的にも優れたものであるはずだと分かるのです。そんな私が、無意味なProtonインターフェースを備えたFirefox 91 ESRへとFirefox 78 ESRが姿を変えたのを目にしたとき、今日は良くない日になるだろうと直感しました。

さて、Firefoxはあらゆるプラットフォームにおいて私のデフォルトブラウザであり続けてきましたし、今後もそうあり続けることを願っています。しかし、流行に流されるヒップスター的な発想には屈しません。私は子供でもなければ、太平洋沿岸にも住んでいません。だからこそ、明瞭さ、コントラスト、鮮明でクリアな色が必要なのです。Protonの無意味な部分の大半を元に戻す方法は、以前の専用チュートリアルですでに紹介しましたが、今回はさらにいくつかのヒントをお届けします。どうぞお付き合いください。

コンテナタブ

実は今回のアップグレードに伴い、Windows版のFirefoxには特別な配慮が必要になりました。まず気に入らなかったのが、コンテナタブに表示されるアクセントラインです。タブの幅より短く描画されるため、非常に間抜けに見えます。そこで最初に行ったのが、アクセントラインを削除し、代わりにタブ全体に色を付ける設定でした。

.tabbrowser-tab[usercontextid] .tab-context-line {
  display: none !important;

上記のCSSコードを、最初のチュートリアルで説明した手順に従ってuserChrome.cssに追加すると、コンテナタブのアクセントラインだけを削除できます。さらにコンテナタブを識別しやすくするため、背景にはコンテキストカラーを使用し、アクセントラインの代わりに明るい赤の上罫線を付けています。

.tabbrowser-tab[usercontextid] .tab-background {
  background: var(--identity-tab-color) !important;
  border-top: 3px solid red !important;
  opacity: 0.6 !important;
}

もちろん、アクセントカラーを美しい形で残したい場合は、タブコンテキストラインの機能と上罫線要素を組み合わせ、背景にはコンテキストカラーを使わないという選択肢もあります。その場合、先ほどの2番目のコードブロックは次のようになります。

.tabbrowser-tab[usercontextid] .tab-background {
  border-top: 3px solid var(--identity-tab-color) !important;
}

通常のタブ

Linux版の例で使用した境界線の透明度は少し強すぎると感じたため、微調整を行いました。

.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;
}

.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 white !important;
}

タブ行(ナビゲーションバー)とURLバー領域の分離

デフォルトでは両者の間に境界線がなく、これがとても煩わしいのです。以下のコードで境界線を追加できます。

#nav-bar {
  border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}

タブ行の左側と上部の余白を揃える

タブ行の左側と上部の余白が等間隔になっていないことに気づいた方もいるでしょう。この要素に小さな左マージンを追加すれば修正できます。タブとURLバーを格納しているフレームは、navigator-toolboxと呼ばれています。

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

URLバーの調整

ここでは多くの変更が必要です。まず、URLのすべての要素がまったく同じ色で表示されるようにしました。繰り返しますが、私は子供ではありません。どのドメインにアクセスしているのかを知るために、3色も必要ないのです。about:configを開き、以下の設定をfalseに切り替えてください。

browser.urlbar.formatting.enabled

次に、URLバーの背景を白にし、境界線を付けました。低コントラストの無意味なデザインとはおさらばです。

#urlbar-background {
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

さらに、パディングとマージンを少し変更して見た目を整えました。これは純粋に装飾的な変更です。

#urlbar {
  padding-top: 2px !important;
  margin-top: 2px !important;
  margin-bottom: 3px !important;
}

検索ボックス

アドレスバーの右側にある検索ボックスにも、同じ手法を適用できます。

#searchbar {
  margin-top: 1px !important;
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

アクセントカラーの活用

私の青いアクセントカラーがお好みで、それをURLバー、検索バー、ナビゲーションバーの境界線に使いたい場合は、rgba(0, 0, 0, 0.1)の記述を、たとえばrgba(10, 132, 255, 0.3)に置き換えてください。不透明度(4つの数値の最後)は自由に調整できます。検索バーの宣言の例はこちらです。

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

結果の確認：スクリーンショットで安心を!

それでは、きれいに整った結果をご覧ください。

アクセントラインを廃止し、赤い上罫線を付けたコンテナタブ。

白背景で文字色が統一されたURLバーと検索ボックス。

上下にパディングを追加したURLバー。

タブの境界線と色が揃ったナビゲーションバーのライン。

整った左上のタブ行配置と、アクティブタブのアクセントカラー(上罫線)。

コンテナタブの再掲：アクセントラインの代わりに、コンテキストカラーの上罫線を適用。

そして画面中に広がる、楽しい色彩の数々!

最後に念のためお伝えしておくと、これがデフォルトの状態です。

まとめ

以上で完了です。完璧主義の悪魔たちも、ようやく安眠できるでしょう。とはいえ、結果はまだ完璧ではありません。ブラウザ全体のインターフェースの配色とコントラストは(依然として)間違っているからです。それでも私は常に、変更の数を最小限に抑え、サードパーティ製ツールを一切使わないことを心がけてきました。これでFirefoxが素晴らしいブラウザになるわけではありませんが、少なくとも十分に使いやすいものにはなります。本当に悲しいのはどこでしょうか?開発チーム全体がまるで無視しているような、10以上の人間工学的な問題を、私は1時間足らずで修正できてしまったのです。そして何のための変更だったのでしょう?灰色の上に灰色を重ねるような、無意味なデザインのためですか?

最初のチュートリアルの情報と、ここで紹介した新しいテクニックを組み合わせれば、快適なクロスプラットフォームのFirefox体験に必要なCSS調整はひと通り揃うはずです。見やすいタブの分離、適切な配色、白背景のURLバーを実現できます。この記事が、皆さんのブラウジングライフを少しでも快適にできたなら幸いです。悲しいことに、Firefoxは私が本当に使いたい唯一のブラウザなので、それが完全に使い物にならなくなったり、醜くなったりする日が来ることが何よりも恐ろしいのです。しかし、それがいわゆる「現代の生活」というものでしょう。それでも、私たちはまた一つ小さな戦いを勝ち取りました。健全な感覚を持つブラウザユーザーの1点、ヒップスター主義の0点です。

それでは、また。