<5/22更新>FirefoxQuantum(66以降)でタブを多段にする超簡単な方法!

Firefox Quantum(ver66以降)で、タブを多段(2段,3段…)にする方法!

2019/3/21 更新

ver.66へのアップデートに適応させました。
ぜひツイッターなどで、お悩みの方へシェアして頂ければと思います!

 

2019/5/22 更新

「横幅調整」について追記しました!

 

 

FirefoxがQuantumにアップデートされて、「タブを多段に出来なくなった!!」という方へ。

 

コピペで簡単に復活させる方法を説明します。

 

スポンサーリンク

 

 

別の記事「FirefoxQuantum(66以降)で「タブの文字が見えない」への対策!<横幅を広げる>

 

では、

 

 

 

firefoxのタブの幅を広げる

 

 

このように、「タブの横幅を広げる」ことで、タブが多くなっても文字が見えなくならないようにしました。

 

 

 

でも、やっぱり多段が良い!!という方もいらっしゃると思いますので、ここで共有します。

 

 

ちなみに「多段」というのは

 

firefoxQuantumでのタブの多段設定

 

このように、タブが2重、3重と段になって増えていくことです。

 

 

なお、この画像では、タブが「ブックマークツールバーの下」にありますが、これは別記事

 

<超簡単>Firefox Quantum(71以降)でタブ位置をブックマーク下に移動

 

で説明していますので、そちらをご覧下さい!

 

 

では、スタート!!

 

スポンサーリンク

 

 

「userChrome.css」を用意する!

「Firefoxのブラウザそのもののデザイン」を設定できる「userChrome.css」に書き込むので、まずはこれを用意しましょう。

 

この用意の方法については、別記事「【超簡単】Firefox Quantum(71以降)でタブ位置をブックマーク下に移動」にある、

 

まずは「userChrome.css」を用意する!!

 

を参考にして下さい。

 

 

「userChrome.css」へ以下を書き込もう!

cssファイルが用意できたら、ダブルクリックして中に以下をコピペしましょう!

 

 

:root{ --multirow-n-rows: 5}

 

#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}

 

/* Test for Firefox > 66 */
@supports (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
scrollbar-width: thin;
}
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}

 

/* Test for Firefox < 66 */
@supports not (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox{
min-height: unset !important;
}
#tabbrowser-tabs .scrollbox-innerbox{
display: flex;
flex-wrap: wrap;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}

 

.tabbrowser-tab{ height: var(--tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}

 

 

.tabbrowser-tab > stack{ width: 100%; height: 100% }

 

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }

 

 

 

/* タブ幅の設定 */
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 170px !important;/* タブ幅の設定 最小値 デフォルト 76px */
max-width: 183px !important;/* タブ幅の設定 最大値 デフォルト 225px */
flex-grow: 1;

 

/* 上記の幅設定では、タブ幅は可変されます(minとmaxを一緒にすれば固定になります) */
}

 

 

ここまでコピペしたら「上書き保存」して、firefoxを再起動して下さい!

 

 

するとすると・・・・

 

firefoxQuantumでのタブの多段設定

 

このようにタブが多段に広がっていくと思います。

 

 

なお、上の設定において「タブの幅」の数値は細かく設定できますので、ご自身で微調整してみて下さい!!

 

もしも「何も反映されない(変わらない)」という場合、そもそも「userchrome.css」が適応されない設定になっている可能性があります。

 

その場合は、以下の記事を読み「userchromeが適応されるように設定」してください。

 

>>【最新版】Firefoxで「userChrome.css」が反映されない時の設定方法

 

 

※上記コードは、GitHubを参考にさせて頂きました

 

 

 

ちなみにポイント@

以下の横幅設定について・・・

 

/* タブの高さ・横幅設定 */
.tabbrowser-tab:not([pinned]) {
min-width: 170px !important;/* タブ幅の設定 最小値 デフォルト 76px */
max-width: 183px !important;/* タブ幅の設定 最大値 デフォルト 225px */
flex-grow: 1;
}

 

この横幅設定(上記の183pxの設定)については、数値を変えても良いですが、この設定自体は消してはいけません。

 

これを消してしまうと・・・・

 

 

このように、タブの横幅が小さくなってしまったり、逆に大きくなりすぎる可能性があります。
※アップデートのたびにデフォルト値が変わっているように感じます

 

「これくらいの文字数が見えればいい!」という最低限の横幅にすると、タブが増えすぎたとしても、縦への圧迫が多少マシになるでしょう。

 

※横方向へのタブ表示数が増えるため

 

 

 

 

ちなみにポイントA

画面の大きさの違い(解像度の違い)によっては、タブの右端に「空間」が空く場合があります。

 

 

 

これを無くすには、

 

  1. 1つひとつのタブの大きさを調整して、1行にピッタリと右端までタブを納める方法
  2. 最小値を設定する方法

 

があります。

 

 

前者については、上で説明した「タブの横幅」を微調整(小さくしていく)して、右端にピタッと当てはまる大きさにして下さい。

 

後者については、ギリギリの幅になる場合に上手く縮小させることで、ピッタリ納める方法。

 

▼上手く埋まっている状態▼

 

 

上で挙げているコードは最小と最大が異なる「縮小するタイプ」ですが、これを同じ数値にしてしまうと、幅は固定されますが、上手く調整しないと隙間が生まれてしまいますね。

 

たとえば、一つのディスプレイしか使ってない場合や、同じ大きさのディスプレイを複数使っている場合は、固定してそのディスプレイの大きさに合わせればOK。

 

でももしも数枚の異なる大きさのディスプレイを使っている場合は、ウィンドウ幅によって隙間が生まれてしまいますので、そこは要調整です。

 

※最小値を小さく設定した場合、全てのタブが最小値の幅に縮小されるまで、2段目にタブは移りません

 

 

ちなみに「私の環境」の場合

 

私が使っている環境は

 

1.横の解像度1680pxのディスプレイ
2.横の解像度1280pxのディスプレイ

 

ですが、これらはともに

 

min-width: 170px !important;
max-width: 183px !important;

 

でほぼほぼピッタリです。

 

 

1280pxだとタブでピッタリ収まりきる。

 

 

 

そして1680pxだと、最後の「+」マークでピッタリと収まりきる。

 

 

 

と言った感じです♪

 

 

スポンサーリンク


 

 

合わせて以下のページも参考にしてみて下さい♪