Firefox 75以降のアドレスバー拡大表示を元に戻す方法｜userChrome.cssカスタマイズガイド

Firefox 75では、多くのデスクトップユーザーを困惑させる変更が加えられました。アドレスバー（URLバー）をクリックすると、まるでスマートフォンのように画面が「ズームイン」して拡大され、周囲のUIやピン留めしていたショートカットが隠れてしまうのです。この挙動はモバイル向けのデザインであり、デスクトップ環境にはまったく馴染みません。一時期は、about:configの設定をいくつか変更することで、この仕様を無効化できました。

ところが、Firefox 77（Nightly版）ではこれらの設定項目そのものが削除されてしまいました。そこで本記事では、userChrome.cssを活用して、旧来のアドレスバーの見た目と操作感を取り戻す方法を段階的に解説します。将来のバージョンアップで同じ問題に直面しても、慌てずに対応できるようになりますよ。

この鬱陶しい拡大表示されるアドレスバーをどうにかしたいところです。

やることの概要

カスタムCSSを作成し、FirefoxのUIを以前の状態に戻します。実はFirefoxのUIは、通常のWebページと同じようにCSSでスタイリングすることが可能です。方法は、プロファイルフォルダ内にあるuserChrome.cssファイルにCSSを記述するだけです。

なお、筆者が最初に発見した手法ではありません。このニーズへの回答は、すでにMozillaサポートサイトで公開されています。ただ、掲載されているコードには多少の調整が必要でした。そこで本記事では、誰でも迷わず作業できるよう、手順をできるだけシンプルに整理して紹介します。

userChrome.cssを有効化する

まず、Firefoxにユーザー作成のCSS変更を反映させるよう設定します。

• Firefox 68以前：特別な作業は不要です。
• Firefox 69以降：about:configを開き、以下の設定を「false」から「true」に変更してください。

toolkit.legacyUserProfileCustomizations.stylesheets

次に、Firefoxのプロファイルフォルダを開きます。Windowsの場合、通常は以下の場所にあります。

C:\Users\"ユーザー名"\AppData\Roaming\Mozilla\Firefox\"プロファイル名"

Linuxの場合はこちらです。

/home/"ユーザー名"/.mozilla/firefox/"プロファイル名"

• このフォルダ内に「chrome」という名前のフォルダを作成します（すべて小文字）。
• chromeフォルダの中に「userChrome.css」という空のテキストファイルを作成します（大文字・小文字の表記に注意してください）。

アドレスバー用のスタイルを追加する

次に、userChrome.cssファイルにコードを記述します。以下のコードをコピーして貼り付けてください。このコードは前述のサポートスレッドから引用したものです。このままでは完璧ではないかもしれませんが、まずは手順全体を把握してもらうため、順を追って説明していきます。

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* 一度だけでOK */

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 30px !important;

  width: 100% !important;
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
  height: var(--urlbar-height) !important;
  width: 100% !important;
  padding-block: unset !important;
  padding-inline: unset !important;
  transition: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  animation: none !important;
}

ファイルを保存したら、Firefoxを再起動しましょう。

結果：わずかにズレが残る

実際に試してみると、上記のコードだけではレイアウトが少し不完全です。ご覧のとおり、アドレスバーの位置が「高すぎ」、つまり垂直方向の中央に配置されていません。上下のマージンも正しくありません。

CSSの微調整（2回目の変更）

ここで必要なのは、追加したCSSのデフォルト値を少し調整することです。具体的には、URLバーの高さ（--urlbar-height）とツールバーの高さ（--urlbar-toolbar-height）を変更します。上部マージンは、この2つの値の差分の半分として自動計算されます。もちろん、topの値を直接指定することも可能です。

試行錯誤の結果、筆者の環境ではツールバーの高さを38pxにすると理想的な表示になりました。

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 38px !important;

また、上部マージンも、デフォルトの計算式から任意の値に変更できます。

top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;

たとえば、次のように固定値を指定することもできます。

top: 5px !important;

なお、「!important」の指定は非常に重要です。これにより、Firefox側のデフォルト設定ではなく、ユーザーが定義した値が優先的に適用されます。

最終結果：本来あるべき姿

これで、快適で理にかなったアドレスバーが復活しました。

まとめ

以上で作業完了です。近年、筆者はブラウザを正常な動作に戻すために、カスタムCSSに頼る機会がますます増えています。これは懸念すべき傾向ですが、ある意味避けられない流れかもしれません。明確な機能上の理由もないまま、変化のための変化として、実証済みの優れたデザインがいわゆる「モダン風」のものへと置き換えられるケースが後を絶ちません。

本記事の手順は、Firefox 75ですぐに適用することもできますし、Firefox 77の正式リリースを待ってから導入することも可能です。それまでの間は、about:configによる設定変更で対処しておきましょう。こうした仕様変更は残念ですが、少なくとも技術的な知識を持つユーザーには、生産性の高い従来型のレイアウトを取り戻す手段が残されています。今後どうなるかは分かりませんが、Firefoxには他社の真似をしないでほしいものです。

本記事が皆さんの参考になれば幸いです。