Firefox 143でアドレスバーの背景色を変更する簡単な手順|userChrome.cssの新設定

Firefox 143でのアドレスバー色変更トラブルとは

MozillaはFirefoxのアップデートのたびに、大小さまざまな見た目の変更を加えてきます。ここ10年以上、その多くは人間工学的にむしろ後退するものでした。いわゆる「モダン」なインターフェースを採用するすべてのブラウザに共通する傾向ですが、筆者が主に使っているのはFirefoxなので、焦点は自然とそこに向かいます。これまでにも、無機質でフラットな疑似ミニマリズム全盛の時代において、UIレイアウトのコントラストと使いやすさを最適化するためのカスタマイズ術を何度か紹介してきました。

ところがFirefox 143では、従来のアドレスバー調整が機能しなくなりました。具体的には、意味のないグレーの背景を白に変更して、URLテキストとのコントラストを確保していたのですが、Mozilla側の仕様変更によってこれが効かなくなったのです。筆者の元にも読者の方々から同様の相談メールが多数届いています。そこで今回は、CSSに追加すべきコードを使って、アドレスバーの背景色をお好みの色に変更する方法をご紹介します。

IDセレクタからクラスセレクタへ

以前のチュートリアルで紹介したように、userChrome.cssファイルで背景色を変更する記述は以下の通りでした。

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

なお、背景色の選択やボーダーの色・太さはあくまで筆者の好みによるものです。お好きな値に自由に置き換えてください。このガイドでは、例としてこのまま進めます。

今回、筆者はFirefoxでデバッグを有効にし、ブラウザツールボックスを起動して各要素を調査し、何が変わったのかを突き止めました。結果として判明したのは、小さいながらも重要な変更点でした。なんと、MozillaがURLバー関連の宣言を「ID」から「クラス」へ変更したのです。つまり、必要な作業はたった一つだけです。

.urlbar-background {
background: white !important;
border: 1px solid rgba(130, 130, 130, 0.5) !important;
}

要するに、「#」を「.」に置き換えるだけです。CSSファイル内にある他のURLバー関連の宣言についても同様に書き換えてください。ブラウザを再起動すれば、設定したカスタマイズが有効になり、あの無意味なグレー背景を取り除くことができます。

変更前と変更後のスクリーンショットを見比べてみてください。テキストと背景のコントラストの違いが一目瞭然です。しかも、あの薄いグレーのテキスト自体も問題外。淡いグレーの文字をグレーの背景に載せるなど、人間工学的には「重大犯罪」と呼ぶべきレベルです。まさにその通りと言わざるを得ません。

まとめ

かつてMozillaはURLを読みやすく、見栄え良く表示するよう尽力していました。それがGoogleを真似るようになってからは、プロトコル接頭辞、証明書パッドロックの色、テキストの色、そして今度は背景色まで、有用な情報が次々と削ぎ落とされてきました。狙いは、このアドレスバーという要素を一般ユーザーから「隠す」ことにあるのでしょう。「一般人はインターネットを理解できない」という発想です。しかし、こうした施策は大衆の啓蒙にも助けにもならず、科学的に確立されたユーザビリティの基盤を損なうばかりです。

もし単色の「憂鬱シック」なデザインでブラウザを使いたくないのであれば、色を加えて閲覧体験を向上させましょう。より良いコントラスト、眼精疲労の軽減、細部への注意力向上——それこそが本来あるべき姿です。幸い、Firefoxには実際にUIを編集できる柔軟性があります。だからこそ、こうした度重なる迷走にもかかわらず、さらに言えばuBlock Origin(UBO)のような優れたManifest V2拡張機能が利用できる点でも、可能であればFirefoxをメインブラウザ、あるいは唯一のブラウザにすべきなのです。欠点は多々ありますが、それでも現存する唯一の「まとも」なブラウザであることに変わりありません。というわけで、注意喚起は以上です。そして、アドレスバーの色の直し方ももうご存知ですね。ミッションコンプリートです。

それではまた次回お会いしましょう。