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

この記事は約3分で読めます。

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

こんにちは、さち です。

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

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

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

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

スポンサーリンク

userChrome.css を使う

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

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

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

Firefox: UIデザイン を変える「userChrome.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;
}

コメント

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