こんにちは、さち です。
Firefox の UIデザイン が、バージョン89から「Proton」という新しいものに変更されました。
しかし、この「Proton」、以前のデザインと比べて色々な部分の「余白」が大きいと感じます。
特に、そう感じるのが「ブックマークツールバー」の余白(間隔)。大量の「ブックマーク」がある私にとっては、余計なスクロールが増えて使いにくいのです……。
そこで今回は、Firefox の UIデザイン の「余白(間隔)」を自分好みに変更してみます。
userChrome.css を使う
Firefox では、「userChrome.css」ファイルを使うことで UIデザイン を自分好みに変更できます。
userChrome.css の記述ルールは、ウェブサイトの作成で使うスタイルシート(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; }
コメント
ブックマークの行間が広いのが嫌でずーっと Ver72を使っていましたが,
繋がらないサイトがあり他のブラウザーを併用していました.
こちらを見て VerUPする気になりました.ありがとうございました.