Firefox: 「89」以降の新デザイン(Proton)の余白を狭くする

この記事は約3分で読めます。
記事内に広告が含まれています

ブックマークツールバーの間隔を変更

こんにちは、さち です。

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

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

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

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

スポンサーリンク

userChrome.css を使う

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

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

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

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

デザインを変えてみる

実際に私が 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;
}
【2023/6/14 追記】
仕様が変わったので、現在は下記リンク先の記述を使って下さい
【Firefox】 メニューバーに置いた「拡張機能(アドオン)」の間隔を狭くする

コメント

  1. ひでき より:

    ブックマークの行間が広いのが嫌でずーっと Ver72を使っていましたが,
    繋がらないサイトがあり他のブラウザーを併用していました.
    こちらを見て VerUPする気になりました.ありがとうございました.

タイトルとURLをコピーしました