Inside Speech

36才 会社員 ♂ があらゆるものの中に切り込んでいきます

*

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を終わった。まだまだぁ。

 - 未分類