Firefox57で多段タブを使う方法

Firefox関連
firefox57
スポンサーリンク

Firefox57で多段タブを使う方法をまとめます。

userChrome.cssを編集することで利用可能となります。

手順はいつも通りです。

  1. Firefoxを終了します
  2. プロファイルフォルダのChromeフォルダの「userChrome.css」を開きます
  3. 下記の内容をコピペしてファイルを保存します
  4. Firefoxを起動します
/* 多段タブ設定 */
#titlebar-buttonbox {
  vertical-align: top !important;
  display: block !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;
}

 

以上で多段タブに対応しているはずです。

タブの幅を変えたい場合は、「browser.tabs.tabMinWidth」の値を変更しましょう。方法は、1.「about:config」で変更する、2.user.jsで変更するの2通りあります。

user.jsによるFirefoxの設定
Firefoxの設定を細かく変更したい場合、「about:config」で変えてしまうのが一番手っ取り早いです。しかし、「about:config」で変更した設定は、履歴などが残せないため忘れてしまうとどこをどういう理由で変更したのかがわか...

 

なお「userChrome.cssの場所がわからない」、「Chromeフォルダがない」という場合は下記の記事を参考にしてください。

Firefoxの不要なコンテキストメニューを消す
Firefoxで「右クリックで表示される「コンテキストメニュー」から、不要な項目を消す方法のまとめです。「userChrome.css」を編集することで簡単に消すことができます。userChrome.cssの場所userChrome.css...

 

追記:

redditに少し違うやり方が載っています。

詳しくはコメント欄からredditに飛んでご確認ください。

 

コメント

  1. hosiken より:

    Redditにも多段タブのcssが貼られています。
    個人的にはこちらのほうが想定の挙動に近いです
    https://www.reddit.com/r/firefox/comments/6yvi2j/yet_another_collection_of_addons_to_imitate_tab/dmrniao/?context=1

  2. 金蛙 より:

    例えば3段固定にして、それ以上はスクロールするようにという設定は可能でしょうか?

  3. Sopipyo より:

    macOSを使っており、タブのクローズボタンを左側に配置したいのですが可能でしょうか。どこかに参考となる情報がありましたらお教えくださるようお願いいたします。

    • 管理人 より:

      わたしはWindows使いなのでMac系のサイトは見ないんですが、左側配置は見たことがないように思います。
      ただCSSなのでどうにかはなりそうですね。

  4. ヒロ より:

    タブをドラックして他のタブの前後に移動させたいのですが、動かせる範囲が限られてしまうようです。なんとかなりませんか?

  5. Kumasann より:

    有益な情報ありがとうございます。
    ただ、タブのピン留めをしてもサイズが変わらないのですが、これは修正可能でしょうか?

  6. YOU より:

    業務でFirefoxを利用しており、多段タブで使用した方が効率が良い為、大変参考になりました。

    しかし、タブが多段になると、ドラッグ&ドロップでのタブ移動が出来なくなってしまいます。

    ショートカットキーでの移動はできるのですが、操作に慣れていない為、何かと業務に支障を感じています。

    タブが一段に戻るとドラッグ&ドロップでのタブ移動ができるようになるのですが、
    何かシステムのバグのようなものでしょうか?

    当方、専門的な知識がない為、ご検証頂けますと幸いです。

    よろしくお願い致します。

    • 管理人 より:

      上にも同様の回答をしていますが、本来は一段表示されているものを無理やりCSS指定により多段に見せているだけなので、どうしても制限が発生します。(タブを移動できる範囲と移動できない範囲が出てきます)
      これはどうしようもないんじゃないかと思いますので、頻繁にタブ入れ替えを使用されたい場合は現状は多段タブを諦めるしかないのではないかと思います。
      もしかしたら方法があるのかもしれませんが、私は知りません。

  7. YOU より:

    早速のご回答ありがとうございます。

    「Tab mix plus」が使えていたバージョンでは操作できていたので、
    全く方法がないという訳ではないとは思うのですが、他の方法を検討してみます。

  8. 匿名 より:

    この方法や、リンク先の一番上の方法を試しましたが
    画面全てがタブで埋め尽くされてページ内容が表示されなくなってしまいました。
    デュアルモニタで2画面ぶんの最大限まで縦に領域を広げてもタブで埋め尽くされてしまいます。
    CSSを書き換える方法では10個とか20個程度のタブでないと対応不可能という事でしょうか?

    • 管理人 より:

      私はふだんタブを10個も開かない使い方なのでわかりません。
      どこかでタブの高さ(段数)を制限するのを見た気もしますが覚えてません。

  9. 匿名 より:

    userChrome.cssを弄ったのに多段にならない!
    と焦ってましたが、プロファイルフォルダの中にChromeフォルダを新規作成してその中に入れないとダメなんですね。危なかった。

タイトルとURLをコピーしました