【Firefox Quantum】多段タブ表示に変更する方法（Mac版）

投稿日：2017.11.25 更新日：2018.02.28

Firefoxのアップデートで崩れちゃったので、少し修正しました。相変わらず、スマートな感じではないですが、まあいいでしょう。

「Firefox Quantum」ことFirefox57へのアップデートに伴い愛用していたアドオン「Tab Mix Plus」が使えなくなりました。その為タブの多段表示が出来なくなったので、代替方法を調べてみました。

代替方法はアドオンではなくuserChrome.cssで設定

ググってみると多段対応方法がいくつか見つかりましたが、Windowsで設定しているようなので、少し不安を感じましたかとりあえずそのまま設定してみると、タブが埋まった状態で表示されてしまいました。

でも、cssでの設定なので少し調整すれば上手く表示できると色々調整してみた結果、以下の方法で出来ました。

設定方法

cssでの対応なので、タブの移動には上手く対応できていないもよう。この辺はちゃんとしたアドオンが出るの待ちかな

トラブルシューティング情報を開く

まずはFirefoxメニュー「ヘルプ」内の「トラブルシューティング情報」をクリック

ファインダー表示をクリック

プロファイルフォルダーのファインダーに表示をクリック

Finderが開く

フォルダが開いた状態でFinderが開くので、そのフォルダ内の「Chrome」フォルダを探します。（なければ作成してください。）

「Chrome」内にuserChrome.cssファイルを作成します。

cssのファイル内は以下のようにしてください。


/* 多段タブ設定 */
#titlebar-buttonbox-container {
vertical-align: top !important;
display: block !important;
margin-bottom:60px !important;
}
.tabbrowser-arrowscrollbox scrollbox {
overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
display: block !important;
}
/* タイトルバーの縦幅・高さ */
toolbarbutton.titlebar-button {
min-height: 31px !important;
}
/* タブバーの横幅・長さ */
.tabbrowser-tabs {
margin-right: -41px !important;
}
/* タブの幅・高さ */
.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;
}
/* 新しいタブボタン */
.tabs-newtab-button {
vertical-align: bottom !important;
height: 30px !important;
}

/* 未読タブの文字色を指定する */
.tabbrowser-tab[unread="true"] .tab-text {
color: #fff !important;
font-weight: 900 !important;
}