Firefox 76 多段タブ

2020年8月5日

Firefoxが76にアップデートしたら、また多段タブが動作しなくなりました。

修正が増えすぎてわかりにくくなってきたので、今回の記事はFirefox76に新規で使用する場合を想定して書き直しました。
以前のバージョンを使用する場合は各記事をご参照ください。

元記事はこちら。
Firefoxを使いやすくカスタマイズする (about:config の設定方法はこちら
Firefox 72
Firefox 74

当サイトの72fixed~74版をご利用の場合:
「MultiRowTabLiteforFx.uc.js」 と 「userChrome.css」 以外は変更していませんので、この2つのファイルを入れ替えてください。
また、「MultiRowTabLiteforFx.uc.js」はタブ段のスクロール版を追加し同梱しています。詳細は設定方法をお読みください。
Firefox69以降はuserChrome.cssがデフォルトで無効になっています。
Firefox69以降を新規インストールした場合は about:config を開き、 toolkit.legacyUserProfileCustomizations.stylesheetstrue に変更します。
マウスホイールでタブを切り替えたい場合は about:config で次の設定をしてください。
toolkit.tabbox.switchByScrolling > true


設定方法

配布元

当サイトで紹介しているものはGitHubで配布されているものを元にして、多段タブ部分のみ使用しています。
使用方法がわかる方はこちらから直接ダウンロードしてご利用ください。

ファイルのダウンロード


解凍すると以下の[フォルダー]、ファイルが入っています。

[root] ―┬― [defaults] ─ [pref] ─ config-prefs.js
       └― config.js
[utils] ― boot.jsm、chrome.manifest、userChrome.jsm、xPref.jsm
MultiRowTabLiteforFx.uc.js(※)
MultiRowTab-scrollable.uc.js(※)
MultiRowTab-scrollable-autohide.uc.js(※)
userChrome.css

下線を引いたファイル(3つ+※印ひとつ)、フォルダー(1つ)を以下の通りコピーまたは移動してください。

※印付きファイルは3種類あります。どれか一つを選んでコピーまたは移動してください。
MultiRowTabLiteforFx.uc.js...タブの段数は無制限
MultiRowTab-scrollable.uc.js...タブ段が3段以上になるとスクロール
MultiRowTab-scrollable-autohide.uc.js...タブ段が3段以上になるとスクロール(スクロールバーはタブ上にポインターを乗せると表示)
(タブの段数はファイルを編集すると変更できます)

Firefoxがインストールされているフォルダー

firefox.exe があるディレクトリーを開く

Firefoxがインストールされているフォルダー:

32bits Firefox -> C:\Program Files (x86)\Mozilla Firefox\
64bits Firefox -> C:\Program Files\Mozilla Firefox\

Firefoxフォルダーにファイルを入れる

(a) [Mozilla Firefox]フォルダー直下(「firefox.exe」があるディレクトリー)にconfig.jsを入れる
(b) [defaults] ━ [pref] フォルダーにconfig-prefs.jsを入れる

[Mozilla Firefox] ―┬― [defaults] ─ [pref] ─ config-prefs.js
              ├― config.js
              ├― firefox.exe
              └― other files...
config.js がすでにある場合
config.js の名前を _config.js 等に変更し、ダウンロードした config.js を入れます。
私の環境では、Firefoxを再起動後に _config.js の内容が新しい config.js に追記されていましたが、同じ結果になるかは不明です。追記されているか一応確認しておく方がいいかもしれません。

Chromeフォルダー

プロファイルフォルダーを開く

Firefoxのプロファイルフォルダー内の「Chrome」フォルダーを開きます。

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.profile名\Chrome

以下のパスをマイコンピューターのアドレス欄にそのまま貼り付ければプロファイルフォルダーが開きますので、その中にある個別のプロファイルフォルダー(xxxxxxx.profile名)の中から使うものを開きます。

%APPDATA%\Mozilla\Firefox\Profiles\

プロファイルフォルダーが複数あってわからない場合は、使用するFirefoxを起動し、URL欄に about:profiles と入力しEnterキーを押すと「プロファイルについて」が開きます。
「これは使用中のプロファイルです」と表示されているところを探し、「ルートディレクトリー」の行で「フォルダーを開く」ボタンを押せばフォルダーが開きます。

Chromeフォルダーが無い場合
過去にuserChrome.css等の利用をしていない場合は「Chrome」という名前のフォルダーを作成します。

Chromeフォルダーにファイルを入れる

下の3つをChromeフォルダーに入れます。

[utils] ← フォルダーのまま入れてください
MultiRowTab*****.uc.js ← 3つのうちのひとつ(複数を入れないでください)
userChrome.css

[chrome] ―┬― [utils] ―┬― boot.jsm
        │         ├― chrome.manifest
        │         ├― userChrome.jsm
        │         └― xPref.jsm
        ├― MultiRowTab*****.uc.js
        └― userChrome.css

.jsと.css ファイルは当方で使用しているものがそのまま入っていますので、変更したくない部分などは適宜修正してください。
(変更点は次の項で)

全部のフォルダーやファイルを入れ終わったらFirefoxを再起動すると多段タブになっていると思います。

userChrome.xmlがある場合は削除してください。

オリジナルから変更したところ

MultiRowTab*****.uc.js

オリジナル

    :root {
        --tab-growth: 1}

    .tabbrowser-tab:not([pinned]) {
        flex-grow: var(--tab-growth)}

改変版
タブの段数、幅、幅の調整、高さ、フォント等の変更はこのファイルを編集してください。
段数はスクロール版のみです。

    /* タブの段数、幅 */
    :root {
        --max-tab-rows: 3; /* 段数 */
        --min-tab-width: 130px; /* 最小幅 */
        --max-tab-width: 150px; /* 最大幅 */
        --tab-growth: 1}

    /* タブ幅調整 */
    .tabbrowser-tab[fadein]:not([pinned]) {
        flex-grow: var(--tab-growth);
        min-width: var(--min-tab-width) !important;
        max-width: var(--max-tab-width) !important}

    /* タブの外観 */
    :root {
        --tab-toolbar-navbar-overlap: 0px !important;
        --tab-min-height: 26px !important} /* タブの高さ */
    :root #tabbrowser-tabs {
        height: var(--tab-min-height) !important}
    #TabsToolbar {
        height: var(--tab-min-height) !important;
        margin-bottom: 0px !important;
        font-family : "メイリオ"; /* フォント */
        font-weight: 400; /* フォントの太さ */
        font-size: 12px} /* フォントサイズ */
    #tabs-newtab-button {
        height: var(--tab-min-height) !important;
        padding: 1px 0 0 !important}
    #tabs-newtab-button > .toolbarbutton-icon {
        padding: 4px 6px !important}  /* 閉じるボタンのサイズ */

userChrome.css

6行以降(カラーの変更)を削除し、以下を追記しています。
・閉じるボタンをタブに表示
・検索バーを上に移動
・検索バーの閉じるボタンを表示
・検索バーのフォントを変更



[PR] パソコン操作をもっと速く楽にするため小ネタ満載
¥500(Kindle Unlimitedは無料)