【多段タブ】Firefox 137

Firefoxがバージョン137にアップデート後、タブの移動が動作しなくなりましたので更新しました。
Firefox 136まで更新している場合は MultiRowTab*****.uc.js のみ入れ替えすれば動作します。

最近の更新は差分のみが続いてわかりにくくなっていましたのでインストール方法を書き直しました。

参考:
Firefoxを使いやすくカスタマイズする (about:config の設定方法はこちら

Firefox69以降はuserChrome.cssがデフォルトで無効になっています。
Firefox69以降を新規インストールした場合は about:config を開き、
toolkit.legacyUserProfileCustomizations.stylesheets
true に変更します。
マウスホイールでタブを切り替えたい場合は about:config で次の設定をしてください。
toolkit.tabbox.switchByScrolling
true に変更します。


設定方法

配布元

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

ファイルのダウンロード


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

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

下線を引いたファイル(config.js、config-prefs.js、userChrome.css)、下線に(※)印の付いたファイルをひとつ、下線を引いたフォルダー( utils )を以下の通りコピーまたは移動してください。

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

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

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

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

64bits Firefox:
C:\Program Files\Mozilla Firefox\

32bits Firefox:
C:\Program Files (x86)\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 と入れ替えます。
私の環境では、Firefoxを再起動後に 元のconfig.js の内容が新しい config.js に追記されていましたが、同じ結果になるかは不明です。追記されているか一応確認しておく方がいいかもしれません。

Chromeフォルダー

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

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

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.profile名\Chrome
Chromeフォルダーが無い場合
過去にuserChrome.css等の利用をしていない場合は「Chrome」という名前のフォルダーを作成します。

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

%APPDATA%\Mozilla\Firefox\Profiles\

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

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

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

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

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

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

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

動作しない場合は

再起動しても多段化されない場合はアドレスバー(URL欄)に
about:support
と入力し、「起動時キャッシュの消去」ボタンをクリックし、「Firefoxを再起動して起動時キャッシュを削除しますか?」で「再起動」ボタンを押します。

それでも動作しない場合、最初からファイルを入れ直してみる、Firefoxのbeta版等にインストールしてみるなどの確認方法もあります。

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

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;}
    #TabsToolbar {
        margin-bottom: 0px !important;
        font-family : "メイリオ"; /* フォント */
        font-weight: 400; /* フォントの太さ */
        font-size: 12px} /* フォントサイズ */

タブの高さ調整

今回から MultiRowTab*****.uc.js に記載してある方法に変更しています。

MultiRowTab*.uc.js の119 行目(スクロール版は 138 or 140 行目)に以下のような記述がありますので、例のように高さを指定してください。
(最小値は20px、デフォルトは「inherit」を指定)

    #TabsToolbar {
        --tab-min-height: 24px !important;
    }

userChrome.cssに

以下を追記しています。
・閉じるボタンをタブに表示
・検索バーを上に移動
・検索バーの閉じるボタンを表示
・検索バーのフォント等を変更
・アクティブタブの色を変更
・音の出ているタブの色を変更


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