Firefox89で多段タブ表示

Firefox

Firefox89で初めて多段タブ表示をしたい方向けです。

以前のver.で多段タブ表示をしていて、表示に不具合がある場合は

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

スポンサーリンク

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

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


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

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


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

1.MultiRowTabLiteforFx.uc.js

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


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


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


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

2.userChrome.css

今まで使っていたuserChrome.cssを再利用する場合

今まで使っていたuserChorome.cssを再利用することが可能です。
タブ幅など前に色々設定してあればこの方法で今まで使っていたものを再利用した方が良いと思います。
もし、toolbarbutton#alltabs-button{-moz-binding: url(“userChrome.xml#js”);}があるのなら削除します。
例)このようになっていたら、削除します。


削除後。これで保存します。※UTF-8 BOM無しで保存してください

userChorome.cssを再利用しない場合

userChorome.cssを再利用しない場合、useChorome.cssがない場合は
「多段タブ」フォルダ内の「userChrome.js用スクリプトを利用する方法」フォルダを開きます。


中に入っている「userChrome.css」を使います。

3.userChrome.js

「多段タブ」フォルダ内の「userChrome.js用スクリプトを利用する方法」フォルダの中のuserChrome.jsを使います。

chromeフォルダにファイルをコピー

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


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


開いたフォルダーの中に「Chrome」というフォルダーがあれば、それを開きます。
なければChromeという名前のフォルダーを作成します。


Chromeフォルダーの中身は空にしておきます。(※userChrome.cssは上記の方法で再利用可能です)
(問題が起こったときに戻せるように、中に入っていたファイルを削除するのではなくどこかに保存しておいたほうが無難です)

準備した3つのファイルをChromeフォルダに入れます。
(他のファイルがあったらそれも取り除いてください)

Firefoxインストールフォルダにファイルとフォルダを追加

Firefoxインストールフォルダを開きます。

C→Program Files(64bit版の場合)
C→Program Files(x86)(32bit版の場合)
を開きます。


Mozilla FireFoxフォルダを開きます。この中に、


「多段タブ」フォルダ内の「userChrome.js用スクリプトを利用する方法」フォルダの中の「config.js」と「defaults」フォルダを追加します。(警告が出ますが無視して「続行」します)
すでにある場合は、上書き(または以前のを別に移動して保存しておきます)


Firefoxインストールフォルダの場所が分からない場合は、 Firefoxのヘルプ→「他のトラブルシューティング情報」
を開きます。「プログラムの実行ファイル」に表示されている場所です。


これでFirefoxを再起動すれば多段タブ表示ができるはずです。

カスタマイズ

タブの高さ調節

「多段タブ.zip」の「タブの高さ調節.txt」を開きます。ここにやり方が書いてあります。


先ほど選んだ「MultiRowTabLiteforFx.uc.js」が01なのか02なのか03-06なのかでやり方が変わります。
「MultiRowTabLiteforFx.uc.js」をメモ帳などで開き、下記の部分を「タブの高さ調節.txt」にかかれている通りに変更します。この部分をそっくり、

   /* 多段タブ */
    box.scrollbox-clip[orient="horizontal"] { display: block; }
    scrollbox[part][orient="horizontal"] {
        display: flex;
        flex-wrap: wrap; }
    tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
    tab > .tab-stack { width: 100%; }
    @media not (-moz-proton) { tabs tab,#tabs-newtab-button { height: var(--tab-min-height); } }
    @media (-moz-proton) { tabs tab,#tabs-newtab-button { height: calc(8px + var(--tab-min-height)); } }
    #tabs-newtab-button { margin: 0 !important; }


03-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; }
    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; }


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

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


の数値を変更すれば高さの調節が可能です。目安として、前と同じにするには32位が良いと思います。
色々数値を変えて、自分の好みの高さに変えてください。

タブの横幅固定

「userChrome.css」に下記を追加ます。(「MultiRowTabLiteforFx.uc.js」を変更する方法は段数固定の場合に、変更した段数が5に戻ってしまうことがあるようなので、こちらに変更しました。)

    tabs tab[fadein]:not([pinned]) {
        min-width: 100px !important; /* 最小値 デフォルト  76px */
        max-width: 100px !important; /* 最大値 デフォルト 225px */
    }

今100pxになっている数値を好みに変更します。両方同じにすると横幅が固定されます。

MultiRowTabLiteforFx.uc.jsを変更していた場合

既に以前この欄に書いてあった「MultiRowTabLiteforFx.uc.js」を変更する方法を行っていた場合は

    tabs tab[fadein]:not([pinned]) {
        flex-grow: 1 !important;
        min-width: 100px !important; /* 最小値 デフォルト  76px */
        max-width: 100px !important; /* 最大値 デフォルト 225px */
    }

に変わっている部分を

tabs tab[fadein]:not([pinned]) { flex-grow: 1; }

に戻してください。


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

関連コンテンツ
Firefox
スポンサーリンク
カメとヒヨコの海外ロングステイ

コメント

  1. Wiz. より:

    いつも参考にさせていただいております。

    「多段タブ.zip」の02を使用し、「MultiRowTabLiteforFx.uc.js」を
    ・段数を3
    ・タブの横幅固定(134px)
    に編集しようとすると、横幅固定は出来るのですが、段数が5になってしまいます。

    段数を3にする対処法はありますでしょうか。
    お忙しいところ恐縮ですが、ご教示いただけますと幸いです。

    • bunji_bunji_ より:

      >Wiz.さん

      タブの横幅固定を「MultiRowTabLiteforFx.uc.js」の編集ではなく、CSSの編集で行うとできると思います。
      該当部分(「タブの横幅固定」の欄)を書き直しました
      「MultiRowTabLiteforFx.uc.js」の変更した部分は元に戻してください。
      こちらの環境で試してみましたが、3段で横幅固定もできたので、これでできると思います。

      • Wiz. より:

        ありがとうございます。

        いただいたご説明を基に試行錯誤してみた結果、解決することができました。合わせて高さも調整できました。
        これで以前のような感覚で使用できます。大変助かりました。

        この度は迅速なご回答いただき、ありがとうございました。

  2. oct より:

    いつもお世話になっております
    タブバーが下に行ってしまうことの解決方法を教えてください

    別記事MultiRowTabLiteforFx.uc.jsの書き換えを試してみましたが下のままで困っております
    ttps://kamehiyo.com/firefox81-multirowtab/

  3. oct より:

    すいません、さきほど質問したのですが
    MultiRowTabLiteforFx.uc.js内のタブバーを下部にを削除することで対応できました
    コメント汚し失礼いたしました

  4. oct より:

    本当に何度も申しわけありません
    タブバーが上に行ったのはいいのですが、今度はアドレスバー内に最小化や最大化、閉じるが入ってしまいました
    こちらを一番右上にすることはできないものでしょうか?

    • bunji_bunji_ より:

      >octさん
      そちらの画面を見ることができないため、詳しいことが分からないのでいくつか教えてください。

      1.MultiRowTabLiteforFx.uc.jsの何番をお使いなのか教えてください。
      「01~06 それぞれの組み合わせ.txt」を見てご希望のものを選ばれましたか?
      タブの位置は何番を選ぶかで変えられるので、「MultiRowTabLiteforFx.uc.js」を変更する必要はないと思うのですが。

      2.また、「アドレスバー内に最小化や最大化、閉じるが入ってしまいました」とのことですが
      今どのような状況なのか教えてください。
      例えば私の場合は、一番上から「タイトルバー」「メニューバー(ファイル・編集などがあるバー)」
      「ツールバー(最小化/最大化・閉じるなどのボタン・アドレス・検索・アドオン)」
      「タブバー」となっています。この順番は「MultiRowTabLiteforFx.uc.js」の03のデフォルトです。

      3.また、ご希望の一番右上はどのバーですか?

      • oct より:

        ありがとうございます
        色々試してタイトルバーがツールバー内に入ってしまうというのは直りました
        5番を使用していて、現状タイトルバー(縮小、最大、閉じる)がタブの上に被さって表示されています
        メニューバーは表示しておらず、上から

        タブバー、(被さった状態でタイトルバーボタン)
        戻る進むアドレスバー検索窓、アドオンツール、三アプリケーションツール、(最初はここにタイトルバーボタン)

        となっています。
        以前の多段タブでスペースを設けることでタイトルバーボタンを表示していたと思うのですが、それができなく困っている次第です
        お忙しい所申し訳ありませんが、よろしくお願いいたします

        • bunji_bunji_ より:

          >octさん

          01のMultiRowTabLiteforFx.uc.jsは試されました?これを使うと
          上から、タイトルバー、メニューバー(消せます)、タブバー、ツールバーになりますが。
          これではダメということでしょうか?タイトルバーは消したくてボタンだけ残したいということでしょうか?
          ちょっとわかってなくてすみません。

          • oct より:

            先ほど01を試してみました
            この場合、タブバーとタイトルバーで別れてしまい、タブバーとの間に無駄な空白ができてしまうんです
            タブバーとタイトルバーのボタンを合体させる方法があったらと思いまして、質問させて頂いた次第です
            以前の多段タブのVer.か他サイトにあったはずなのですが今回の89で崩れてしまいました

  5. aki より:

    いつもお世話になっております。
    MultiRowTabLiteforFx.uc.jsの04を使用しているのですが
    タブバーがメニューバーの上に行ってしまいます。
    他の番号を試してみても変わらず困っております。
    タブバーを下にする方法はありますでしょうか。
    お忙しいところ申し訳ありませんがよろしくお願いいたします。

    • bunji_bunji_ より:

      >akiさん

      私は03を使っていますが、タブバーはメニューバーの下です。
      (タイトルバー→メニューバー→ツールバー→タブバーの順)
      akiさんはどの番号のを使っても変わらないのはおかしいですね。

      1つづつ確かめてみるため、とりあえず多段タブ.zipをダウンロードしなおして、
      今使っているchromeフォルダをどこかに移動してください。
      次に、Firefoxを再起動してみてください。これで見た目が変われば(多段タブにならない)次に進みます。
      変わらなければ、chromeフォルダの場所が間違っています。

      次に、新しくchromeフォルダを作りそこに「多段タブフォルダ」→「userChrome.js用スクリプトを利用する方法」にある
      「userChrome.css」と「userChrome.js」を入れて、更に「MultiRowTabLiteforFx.uc.js」を入れてみてください。
      これでFirefoxを再起動してみてください。
      これでできたら、今まで使っていた「userChrome.css」か「userChrome.js」のどちらかに問題があります。

      それでもダメなら、Firefoxインストールフォルダの中のconfig.js と defaults(フォルダ) を新しくダウンロードしたものに変えてください。
      これでもダメならまた教えてください。

      • aki より:

        ありがとうございます。
        ご説明のとおりにやってみたら、ちゃんとタブバーが下になり、大変助かりました。
        迅速なご回答をいただきありがとうございました。

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