Firefox： 「89」以降の新デザイン（Proton）の余白を狭くする

こんにちは、さち です。

Firefox の UIデザイン が、バージョン89から「Proton」という新しいものに変更されました。

しかし、この「Proton」、以前のデザインと比べて色々な部分の「余白」が大きいと感じます。

特に、そう感じるのが「ブックマークツールバー」の余白（間隔）。大量の「ブックマーク」がある私にとっては、余計なスクロールが増えて使いにくいのです……。

そこで今回は、Firefox の UIデザイン の「余白（間隔）」を自分好みに変更してみます。

userChrome.css を使う

Firefox では、「userChrome.css」ファイルを使うことで UIデザイン を自分好みに変更できます。

userChrome.css の記述ルールは、ウェブサイトの作成で使うスタイルシート（CSS）と同じような形式です。

この機能を使い方は、こちらの記事を参考にして下さい。

Firefox： UIデザイン を変える「userChrome.css」の使い方

at.sachi-web.com

2021.06.18

デザインを変えてみる

実際に私が userChrome.css を使ってデザインを変えた記述を紹介します。参考にしてみて下さい。

「ブックマークツールバー」の余白を変える

ブックマークツールバーのフォルダー内にある「ブックマーク」の上下の余白が広く感じます。狭くしてみましょう。

「userChrome.css」に次のように追記して、Firefox を再起動すればOK。

#PersonalToolbar .bookmark-item {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

「ツールバーボタン」の余白を変える

ツールバーにある「進む／戻る」「リロード」「オプション」などのボタンの余白が広く感じます。狭くしてみましょう。

「userChrome.css」に次のように追記して、Firefox を再起動すればOK。

#nav-bar toolbarbutton {
  padding-left: 1px !important;
  padding-right: 1px !important;
}

「メニューバー」のアイコンの余白を変える

私はこちらの方法でメニューバーの右端に「アドオン（拡張機能）」のアイコンを配置しています。

しかし、以前のデザインよりも余白が広くなり、ウィンドウを小さくした時に表示が1つあふれてしまいうようになりました。不便なので狭くしてみましょう。

「userChrome.css」に次のように追記して、Firefox を再起動すればOK。

#toolbar-menubar toolbarbutton {
  padding-left: 1px !important;
  padding-right: 1px !important;
}

【Firefox】 メニューバーに置いた「拡張機能（アドオン）」の間隔を狭くする

at.sachi-web.com

2023.06.14