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だと、最後の「+」マークでピッタリと収まりきる。

 

 

 

と言った感じです♪

 

 

スポンサーリンク


 

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

 

 

関連ページ

<超簡単!>Firefox Quantumでタブ位置をブックマーク下に移動!
FirefoxがQuantum(57,58)にアップデートされ、タブの位置が「タイトルバーの下」に上がってしまった!という方へ、「ブックマークツールバー下」へ移動する方法を解説!コピペでOK!
【超簡単】FirefoxQuantum(ver57)でタイトルバーを表示させる方法
FirefoxがQuantum(57,58以降)へアップデートされ、デフォルトではタイトルバーが消えてしまっています。これを出す方法(表示させる方法)簡単な方法を説明します!
FirefoxQuantum(Ver57)で「タブの文字が見えない」対策<横幅を広げる>
Firefox Quantum(57,58以降)にアップデートされて、タブを多く開いたときに(増やしたときに)、横幅が小さくて文字が見えない!という事があると思います。今回はタブの横幅を広くする方法をお伝えします。
【超簡単】FirefoxQuantumでブックマークを新規タブで開く方法
Firefoxのver57,58(Quantum)で、ブックマークを選択(クリック)した時に「新規タブ」で開くための設定を説明する!超簡単で誰でも出来ます。
【簡単】FirefoxQuantumの検索バーから「新規タブ」で結果を開く
Firefox Quantum(ver57,58)で色々とアドオンが使えなくなった。検索バーで検索した時の結果を「新規タブ」で開くにはどうしたらいいの?めちゃくちゃ簡単な方法があるので共有します。
FirefoxQuantum(57)でツリー型タブを作り、上部タブを消す方法!
Firefox Quantum(57,58)でツリー型タブを作りたい!または「上部のタブ」が消えない!消せない!という方に、作り方と消し方を説明しています。
FirefoxQuantumで新しいタブを「右隣」「右端」どちらで開くかを設定!
FirefoxQuantum(57,58)において、新しいタブを開いたときに、「既存のタブの右に開く」か「一番右端に開く」かを決める設定を入れます!微妙な違いですが、使い勝手が変わります♪
NTUSER.DATとは?削除や移動しちゃダメなファイルだよ!
Userフォルダ内に存在するntuser.datファイル。これ何ぞや?消していいのか?という疑問にお答えします。