Firefox 57+(Quantum)のタブの幅と高さを変える設定、userChrome.cssとabout:configで。
これはFirefox 57+(Quantum)で有用な設定方法なんだけど、タブの幅を変える設定方法。
昔のFirefoxでは[ Tab Mix Plus ]っていうアドオンがあって、確かこのアドオンでタブの幅＝Widthと高さ＝Heightを決めることが出来たんだけど、アップデートされて[ Tab Mix Plus ]は利用できなくなった、の。で、英語のサイトに書いてあったんだけど、この作者はアップデートしないっぽい。。。第三者のコメントだったんだけどね。
だから新しいFirefox Quantumでタブの幅と高さを設定する方法を書きます。自己責任＆バックアップ必須。
2つ方法があって便利なのからあげると、
[ userChrome.css ]というファイルに書き込む方法。[ *.css ]って言うと、ホームページを作っている方、特に手書きをしている方は弄ったことがあるんだけど、文字を太字にしたり、フォントを変えたりすることができるファイルなのだ。Firefoxでは、そのWebページをどう描くか修飾する為のファイルをブラウザで読み取って、ブラウザの設定とすることが出来る。
コレって、考えようによっては、「卵が先か、鶏が先か」になっちゃうけど、とっても便利。
Q. じゃあ[ userChrome.css ]って何処にあるの？
A. それは、[ Firefox ]の[ プロファイルフォルダ ]の配下にあるのだぁ。
具体的には、デフォルトでは[ c:\users\[ユーザー名(人によって違う)]\AppData\Roaming\Mozilla\Firefox\Profiled\[プロファイルネーム(人によって違う)]\chrome\ ]フォルダ直下にある。無い場合は作る。私の場合はGitHubさんで作られたやつがあった。恐らく何かのアドオンを入れた際に作られたのであろう。
その[ userChrome.css ]に以下の様に、任意の数字を入力して自分で設定できる。
//———-
.tabbrowser-tab:not([pinned]) {
min-height: 32px !important;
max-height: 32px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 32px !important;
max-height: 32px !important;
width:50px !important;
min-width:50px !important;
}
//———-
設定したらFirefoxの再起動が必要。出来る事なら、Firefoxを起動していない状態で設定する方が望ましい、上書きの可能性を防ぐために。
これは、文系の人にはチョット難しいかもしれないけれど、試して欲しい便利な方の紹介。
で、更にこの[ userChrome.css ]を変更するにあたって便利というか、後々を考えてやった方が良いという方法として、[ *.cssという任意のファイル名にして保存、それをuserChrome.cssで読み取る ]って方法がある。これは、Webページを作る際には遅くなってしまい、Googleさんから指摘を受けるんだけど、ことブラウザにかかっては一度読み込んじゃうからどーでも良い。
[ userChrome.css ]に[ @import url(./[任意のファイル名].css); ](行末のセミコロン必須)って入力して[任意のファイル名].cssって言うファイルに、上記の高さと幅を設定した記述を含めるのだ。
次に書くことは確かめてないのでアレだけど、設定を確実に反映させるには[ userChrome.css ]の最初と最後に、
@import url(./[任意のファイル名].css);
を記述した方がいいかな。ブラウザが後に記述されたもので上書きするのか、最初に設定した記述が後々に上書きをされないのか詳しくないが。(だから、文頭と文末に入れよ！！と書いた。)
ちな、上記の記述はuserChrome.cssと同じディレクトリ＝フォルダに任意のcssファイルを入れる事であり、詳しい人は任意のフォルダを指定できる。
では、次に[ about:config ]でタブの幅を指定する方法。(高さの項目は、今のところ見つからなかった。)
1. URLバーに[ about:config ]と入力してリターン。
2. 検索バーに[ browser.tabs.tabM ]と入力してリターンを押すと、[ browser.tabs.tabMaxWidth ]と[ browser.tabs.tabMinWidth ]という2つの変数が現れるので、任意の数字を設定する。
3. ブラウザを再起動。
こうすることによって、タブの幅を変えられる。※なお、[ userChrome.css ]と[ about:config ]両方に違う値を記述した場合、[ userChrome.css ]の値が適用されることに注意して欲しいのだ。
なお、このパートでは前段までの「確かめてみよう」なんて出来ないのでご自分でやって欲しい。。。
おぉ、明け方の4時36分になってしまったよぉ。眠いけど好奇心の方が勝る。推定[ about:config ]の1/6を終わった。まだまだぁ。