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

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

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

 

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

 

スポンサーリンク

 

 

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

 

では、

 

 

 

firefoxのタブの幅を広げる

 

 

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

 

 

 

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

 

 

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

 

firefoxQuantumでのタブの多段設定

 

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

 

 

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

 

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

 

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

 

 

では、スタート!!

 

スポンサーリンク

 

 

「userChrome.css」を用意する!

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

 

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

 

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

 

を参考にして下さい。

 

 

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

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

 

 

/* 多段タブの設定 */
#titlebar-buttonbox {
display: block !important;
vertical-align: top !important;
}
.tabbrowser-arrowscrollbox scrollbox {
overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
display: block !important;
}

 

/* タブの高さ・横幅設定 */
.tabbrowser-tab:not([pinned]) {
min-height: 30px !important;
max-height: 30px !important;
min-width: 170px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 30px !important;
max-height: 30px !important;
}

 

/* 新しいタブボタン設定 */
.tabs-newtab-button {
vertical-align: bottom !important;
height: 30px !important;
}

 

 

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

 

 

するとすると・・・・

 

firefoxQuantumでのタブの多段設定

 

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

 

 

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

 

 

 

ちなみにポイント@

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

 

/* タブの高さ・横幅設定 */
.tabbrowser-tab:not([pinned]) {
min-height: 30px !important;
max-height: 30px !important;
min-width: 170px !important;
}

 

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

 

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

 

 

このように、タブの横幅が小さくなりすぎてしまいます。

 

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

 

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

 

 

 

 

ちなみにポイントA

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

 

 

 

これを無くすには、

 

  1. 1つひとつのタブの大きさを調整して、1行にピッタリと右端までタブを納める方法
  2. 画面外に少しはみ出させる方法

 

があります。

 

 

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

 

後者については、以下のcssを当てます!

 

.tabbrowser-tabs {
margin-right: -16px !important;
}

 

これが何かと言うと、「右にどれだけはみ出ることが出来るか?」の設定です。

 

「タブの横幅の設定」にも左右されますが、だいたい-20pxほどで設定していれば、

 

 

このように「微妙にはみ出す」けども、ピッタリ表示されるようになります。

 

この設定と、あとは横幅の微調整をすればピッタリ表示できます。

 

 

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

 

私が使っている環境は

 

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

 

ですが、これらはともに

 

/* タブの横幅 */

 

.tabbrowser-tab:not([pinned]) {
min-width: 183px !important;
}

 

/* 画面右へのはみ出し */
.tabbrowser-tabs {
margin-right: -16px !important;
}

 

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

 

 

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

 

 

 

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

 

 

 

と言った感じです♪

 

 

スポンサーリンク


 

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