Firefox 76 多段タブ

2023年1月13日

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

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

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

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


設定方法

配布元

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

ファイルのダウンロード

アイコン

Chrome FF76.zip

1 ファイル 19.45 KB
ダウンロード


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

[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つ＋※印ひとつ）、フォルダー（１つ）を以下の通りコピーまたは移動してください。

※印付きファイルは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がある場合は削除してください。
INTEL CPU Core i7-12700
インテル
Amazon
Yahoo!ショッピング
楽天市場
ツクモネットショップ

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

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行以降（カラーの変更）を削除し、以下を追記しています。
・閉じるボタンをタブに表示
・検索バーを上に移動
・検索バーの閉じるボタンを表示
・検索バーのフォントを変更

いちばんやさしいITパスポート 絶対合格の教科書+出る順問題集
高橋 京介 (著) SBクリエイティブ
Amazon
Yahoo!ショッピング
楽天市場

[PR] パソコン操作をもっと速く楽にするため小ネタ満載
￥500（Kindle Unlimitedは無料）
高速化・快適化するためのパソコン再入門 Kindle版
150章/369ページ￥500(税込)(Kindle Unlimitedは無料)
深月 隆寛（著）
Amazon

ブラウザーFirefox,多段タブ

Posted by みつき