PR

Firefox89で多段タブ表示の調整~余分な空白をなくす~

Firefox

Firefox81から88までは下の記事で問題なく多段タブ表示ができたのですが、


Firefox89に更新したところタブバーの上下に余分な空白ができたので、解決しました。
いつもZipファイルを上げてくださる方に感謝感謝です。
※これは、以前から多段タブを使っている人用です。

新しく多段タブを設定したい方は


こちらの記事をご覧ください。


スポンサーリンク

Firefox89に更新すると、タブバーの上下に隙間が

Firefox89に更新したところ
←この図のようにタブバーの上下に余計な隙間ができてしまいました。

これをなくしていきます。

zipファイルをダウンロード

こちらにアクセスして、「MultiRowTabLiteforFx.uc.js:多段タブのスクリプトが~」と書かれている多段タブ.zipをダウンロードします。


ダウンロードページに行くので、

「ダウンロード」をクリックし、「ファイルを保存する」を選んで、「OK」をクリックします。


ダウンロードされた「多段タブ.zip」を右クリックし、解凍します。

MultiRowTabLiteforFx.uc.jsを選ぶ

できた「多段タブ」フォルダの中から、「Firefox89+」フォルダを開きます。


「01~06 それぞれの組み合わせ.txt」を開いて、どれを選ぶか決めます。



この中から、希望のものを探します。


決めたらその番号のフォルダを開いて、中に入っている「MultiRowTabLiteforFx.uc.js」を使います。

今まで使っていたMultiRowTabLiteforFx.uc.jsと入れ替える

Firefoxのヘルプから「ト他のラブルシューティング情報」を開きます。


出てきた、トラブルシューティング情報の「プロファイルフォルダー」欄の「フォルダーを開く」をクリック


開いたフォルダーの中にある「Chrome」フォルダを開きます。


中に入っている、MultiRowTabLiteforFx.uc.jsを先ほど選んだものに置き換えます。
(元に戻せるように古いものはどこかに取っておいた方が安全です)


Firefoxを再起動します。

このように上下の余白がなくなりました。

余白はなくなったのですが、タブの高さが高くなってしまったのが気になります。

タブの高さ調節

「多段タブ.zip」の「タブの高さ調節.txt」を開きます。


先ほど選んだ「MultiRowTabLiteforFx.uc.js」がどれなのかでやり方が変わります。
「MultiRowTabLiteforFx.uc.js」をメモ帳などで開き、

   /* 多段タブ */
    box.scrollbox-clip[orient="horizontal"] { display: block; }
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  この間は番号によって変わります
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    #tabs-newtab-button { margin: 0 !important; }

この部分を、


01の場合は

    /* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
    :root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */

    /* タイトルバーボタン(タブバー) */
    #TabsToolbar .titlebar-buttonbox > .titlebar-button {
    /* 24pxに合わせてるので数値を変更した時に高さが合わない場合は調整してください。 */
        padding: 6px 17px !important; /* デフォルト幅 8px 17px */
    }
    /* タブバー 高さ 最小値 */
    :root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
    /* 多段タブ */
    box.scrollbox-clip[orient="horizontal"] { display: block; }
    scrollbox[part][orient="horizontal"] {
        display: flex;
        flex-wrap: wrap; }
    tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
    tabs tab {
        padding-inline-start: 1px !important;
        padding-inline-end: 0px !important; }
    tabs tab,.tab-background {
        height: var(--multirowtabs-height) !important;
        min-height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    tab > .tab-stack { width: 100%; }
    .tab-background { box-shadow: none !important; }
    /* 新しいタブボタンの横幅と高さ */
    #tabs-newtab-button {
        height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    #tabs-newtab-button > .toolbarbutton-icon {
        width: var(--multirowtabs-height) !important;
        height: var(--multirowtabs-height) !important;
        padding: 4px !important; }

02の場合は

    /* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
    :root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */

    /* タイトルバーボタン(タブバー) */
    #TabsToolbar .titlebar-buttonbox > .titlebar-button {
    /* 24pxに合わせてるので数値を変更した時に高さが合わない場合は調整してください。 */
        padding: 6px 17px !important; /* デフォルト幅 8px 17px */
    }
    /* タブバー 高さ 最小値 */
    :root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
    /* 多段タブ */
    box.scrollbox-clip[orient="horizontal"] { display: block; }
    scrollbox[part][orient="horizontal"] {
        display: flex;
        flex-wrap: wrap;
        max-height: calc(var(--multirowtabs-height) * 5) !important; /* 段数(デフォルト5段) */
        overflow-x: hidden;
        overflow-y: auto; }
    tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
    tabs tab {
        padding-inline-start: 1px !important;
        padding-inline-end: 0px !important; }
    tabs tab,.tab-background {
        overflow: hidden;
        height: var(--multirowtabs-height) !important;
        min-height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    tab > .tab-stack { width: 100%; }
    .tab-background { box-shadow: none !important; }
    /* 新しいタブボタンの横幅と高さ */
    #tabs-newtab-button {
        height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    #tabs-newtab-button > .toolbarbutton-icon {
        width: var(--multirowtabs-height) !important;
        height: var(--multirowtabs-height) !important;
        padding: 4px !important; }

03または05の段数無制限の場合は、下記のように置換します。

    /* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
    :root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */

    /* タブバー 高さ 最小値 */
    :root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
    /* 多段タブ */
    box.scrollbox-clip[orient="horizontal"] { display: block; }
    scrollbox[part][orient="horizontal"] {
        display: flex;
        flex-wrap: wrap; }
    tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
    tabs tab {
        padding-inline-start: 1px !important;
        padding-inline-end: 0px !important; }
    tabs tab,.tab-background {
        height: var(--multirowtabs-height) !important;
        min-height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    tab > .tab-stack { width: 100%; }
    .tab-background { box-shadow: none !important; }
    /* 新しいタブボタンの横幅と高さ */
    #tabs-newtab-button {
        height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    #tabs-newtab-button > .toolbarbutton-icon {
        width: var(--multirowtabs-height) !important;
        height: var(--multirowtabs-height) !important;
        padding: 4px !important; }

04または06の段数指定の場合は

    /* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
    :root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */

    /* タブバー 高さ 最小値 */
    :root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
    /* 多段タブ */
    box.scrollbox-clip[orient="horizontal"] { display: block; }
    scrollbox[part][orient="horizontal"] {
        display: flex;
        flex-wrap: wrap;
        max-height: calc(var(--multirowtabs-height) * 5) !important; /* 段数(デフォルト5段) */
        overflow-x: hidden;
        overflow-y: auto; }
    tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
    tabs tab {
        padding-inline-start: 1px !important;
        padding-inline-end: 0px !important; }
    tabs tab,.tab-background {
        overflow: hidden;
        height: var(--multirowtabs-height) !important;
        min-height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    tab > .tab-stack { width: 100%; }
    .tab-background { box-shadow: none !important; }
    /* 新しいタブボタンの横幅と高さ */
    #tabs-newtab-button {
        height: var(--multirowtabs-height) !important;
        margin: 0 !important; }
    #tabs-newtab-button > .toolbarbutton-icon {
        width: var(--multirowtabs-height) !important;
        height: var(--multirowtabs-height) !important;
        padding: 4px !important; }

に置き換えてください。



変更したら、変更した部分の二行目の

 :root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */

の数値を変更すれば高さの調節が可能です。目安として、前と同じにするには32位が良いと思います。
色々数値を変えて、自分の好みの高さに変えてください。
モザイクで分かりづらいですが、変更前(左)と32に変更後(右)です。


どれか1つクリックお願いします。
 easteurope88_31 にほんブログ村 ライフスタイルブログ セミリタイア生活へ にほんブログ村 海外生活ブログへ 
スポンサーリンク

関連コンテンツ
Firefox
スポンサーリンク

コメント

  1. sion より:

    はじめまして
    いつも参考にさせて頂いております

    タブの上下スペースですが87くらいから使っている設定のマシンのを
    89に更新した際に発生しました

    protonの下記設定を無効にする事でも対処可能でしたので
    報告をさせていただきます

    about:config
    browser.proton.contextmenus.enabled
    browser.proton.doorhangers.enabled
    browser.proton.enabled
    browser.proton.modals.enabled

    • bunji_ bunji_ より:

      > sionさん

      他の方の参考になると思います。
      教えていただきありがとうございます。

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