Firefox で、アクティブなタブの幅を広くする方法

Firefox


タブをいくつも開いていると幅が狭くなってしまい、タブのタイトルが読めなくなることがよくあります。
そういうときに、アクティブなタブだけ幅が広くなっていると読めるのになるなーと思ったので、ハックしてみました。

設定方法

  1. about:support を開く*1
  2. プロファイルフォルダーの「フォルダーを開く」をクリック
  3. 新規に chrome フォルダを作成
  4. chrome フォルダの中に、userChrome.cssを作成
  5. userChrome.cssに以下の設定を記載
  6. Firefox を再起動
.tabbrowser-tab[visuallyselected="true"]:not([pinned]) {
    min-width: 225px !important;
}

これで、アクティブなタブだけ幅が広くなります。
もとに戻すときは、userChrome.css を削除するだけでOK。

ホバー時にも幅を広げる設定

非アクティブなタブにマウスカーソルをあてたときにも、タブの幅が広くなるようにもできます。
使いにくく感じるときもありますので、お好みでどうぞ。

  1. userChrome.cssに以下を追記
.tabbrowser-tab:not([visuallyselected="true"]):not([pinned]):hover {
    min-width: 225px !important;
}

注意事項

Firefox のバージョンアップなどで動きがおかしくなったり、バグったりする可能性があります。
そのときは、userChrome.css を削除してください。

*1:ロケーションバー（URLの入力欄）に about:support と入力して Enter を押下