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 より:

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

  6. take より:

    いつもお世話になっております。
    多段タブのjsやcssありがたく使わせてもらっています。

    この度89対応のデータをダウンロードさせていただき、タブ自体には問題ないのですが、ドラッグドロップでタブ移動させようとすると挙動が変になり、動かしたい位置にタブが行かなくなります。(先頭や最後尾に移動させられたり、意図してない場所に置かれる)
    もし何かわかるようでしたら助言お願いします。

    あとアドレスバーの位置をタブの下に持ってきたいのですが、そのためのスクリプトがあれば教えてください。

    使用したのは04番です。

    • bunji_bunji_ より:

      >takeさん
      多段タブzipは私が作ったものではなく、使わせていただいているだけなので
      いつも上げてくださっている方に感謝感謝です。

      タブの移動の件ですが、私の環境では問題がないので
      akiさんへの返答に書いた3つの方法を試してみてください。
      それでダメでしたらまたお知らせください。

      また、「アドレスバーの位置をタブの下に持ってきたい」とのことですが
      アドレスバーというのはツールバーのことだと思うので、02番を使ってみてください。
      違うようでしたらお知らせください。

  7. PLUS より:

    こんにちは。
    いつも参考にさせていただいており、たいへん助かっています。
    ちょっと質問させていただきたいのですが、
    多段になったタブ同士の上下のアキ幅の設定はどの辺に
    記述されていますでしょうか?
    よろしくお願いいたします。

    • bunji_bunji_ より:

      >PLUSさん
      お役に立ったようで良かったです。

      >多段になったタブ同士の上下のアキ幅の設定
      というのは、タブの高さということであってますでしょうか?
      それでしたら、この記事の4.カスタマイズ→タブの高さ調節をご覧ください。
      違っていたらまたコメントください。よろしくお願いします。

      • PLUS より:

        返信ありがとうございます。

        >というのは、タブの高さということであってますでしょうか?
        ではなく、多段化したタブとタブの上と下の隙間(今だと8ピクセルくらい?)です。
        設定がどうにも見つけられず途方に暮れております。

        • bunji_bunji_ より:

          >PLUSさん
          タブ同士の上下の隙間ですか。
          ちょっと見てみましたが、私の環境ではタブ同士は
          隙間なくぴったり敷き詰められている状態です。
          タブ同士の隙間は設定されていないと考えられますので、
          ご自分で記述する必要があるのではないかと思います。

          表示中のタブの上のタブにカーソルを載せるとこんな感じになり、
          上下のタブ間に隙間はないのではないかと思います。

  8. cachaca より:

    記事と全然関係ないことですみません(最新記事がこれだったので)
    ご無沙汰してますがお元気そうで何よりです。

    昨日、あるコロナ記事へのコメに、ルーマニアやブルガリアはワクチン忌避で接種が2割ほどなので、余剰ワクチンを他国へ譲渡しているが、それでも感染は落ち着いていると書いてありました。
    住んでいてそのように感じますか? EUで導入されたワクチンパスは使われてないんでしょうか?

    日本帰国の際は厚労省独自の書式を使うなど一手間かかりそうですね。
    鍵コメの方がよろしければ、お返事は私のブログへお願いします。

    • bunji_bunji_ より:

      >cachacaさん

      理由はわからないのですが、ブルガリア人はワクチン接種には積極的ではないようです。
      前に見た意識調査でも50%以上の人が受けたくないと答えていて、EUでダントツ1位でした。
      医療従事者や施政者は受けているようです。私たちは町の集団接種で受けましたが、人数は少なかったです。
      それでもEU全体で7割接種なのに、ブルガリアでは2割というのはちょっと驚きでした。
      ブルガリアの人口が少ない(約700万人)ので、EU全体(約5億人)の接種率に影響がないのがなんとも。

      感染は初期のころはかなり抑えられていて、一時は優等生と言われていたのですが
      去年の秋から冬と春前はかなり感染が拡大し、11月頃と3月頃に二回ピークがあり、
      一時は一日5000人以上感染していました。
      人口で換算すると日本で一日8万5千人感染していたことになります。

      私たちが来た4月頃から感染が落ち着いてきて、8月頃まではかなり低かったのですが
      最近また拡大が始まっています。今は一日1500人ぐらい(日本で言ったら2万5千人ぐらい)です。

      ピークの頃にはブルガリアにいなかったのでその頃の実際の状況はわかりませんが
      都市間移動が禁止されたりロックダウンに近いことが行われたりしていたようです。

      今は感染拡大時期ですが、特に変化は感じられません。
      バスやお店ではマスクを付けるように表示されていますが、ノーマスクの人もいます。
      マスクの扱いも日本では考えられないような感じで、お店から出たら腕につけたり顎マスクは当たり前です。
      お店には消毒液も設置されていますが、消毒する人は少ないです。
      屋内でマスクを付ける以外はコロナに対して何かしているようには見えません。

      夏休みで孫たちが来て、みんなで外で食事など普通に行われているように見えます。
      今の拡大はバカンスのせいだと思います。私の友人も黒海沿岸に行っていましたし、
      国外から国内に変更になったかもしれませんが、バカンス自体は自粛していないと思います。
      集会や対面授業などは規制があるようですが、この辺は元々縁遠いのでよくわかりません。

      EUでお店に入ったりするときに使うというワクチンパスポートはもちろん使われていません。
      ワクチンを打つと、ワクチン証明書はもらえますしEU共通のデジタル証明書も取得できます。
      しかし、今のところこれらは国外に行くとき用で、ブルガリア国内では使うところがありません。
      私たちは町役場でワクチン証明書をもらいましたがほとんどの人は貰っていないようです。

      日本帰国時には日本の書式で記入してくれる病院に行く必要がありますが
      以前に取得した人の情報ではソフィアの病院は慣れているらしく、簡単に取得できたそうです。
      大使館が色々尽力してくれているのだと思います。
      といっても、やはりコロナ前に比べて色々手間もお金もかかるので面倒です。
      来年には終わっていてほしいです。

      • cachaca より:

        やはりかなり緩いんですね。人口たった700万なんですか。
        一昨日だったか、ルーマニアが韓国にファイザーを150万人分無償提供し、その代わり韓国から医療機器が送られるという記事がありました。ルーマニアはEU内のデンマークやアイルランドには販売し、エジプト、チュニジアなどには無償提供しているそうです。それほど余っている(笑)

        先日、ワクチン2度接種の70代日本人がカリフォルニアの家族に会いに行き、日本帰国前のPCR検査で陽性となったブログを見ました。その人は無症状ですが、帰国を2週間延ばさざるを得なくなり、家族のところで療養してるそうです。その家族は全員陰性とのこと。
        こうなると面倒ですよね。

        • bunji_bunji_ より:

          >cachacaさん
          かなり人口が少ないですよね。出生率も低いので、前に見た
          「2050年までに最も大きく人口が減る国」という調査では堂々のトップ1になっていました。
          調べてみたところ、ブルガリアはブータンなどにワクチンを寄付しているようです。
          EU内で割り当てられてもらっているはずなのに、EUの他国に売りつけるルーマニアは結構すごいですね。
          EUから怒られないのかな?

          そうなんです。日本のフォーマットに記入してくれる病院はこの近くにはないので(交渉すればできるかもですが)
          首都に前泊して検査するのですが、ここで陽性だったらどうするんだ?という心配があります。
          当然飛行機には乗れないし、無症状だったら帰って来ていいのか?(当然公共交通機関を使うわけで)という疑問も。。。
          また、日本帰国時の検査で2人のうち一方が陽性だった時も面倒ですよね。スーツケース2個に分けないといけないし
          来年ぐらいには終わっていてほしいんですが、無理なんですかねぇ

          欧州疾病予防センター(ECDC)の9/1付レポートでは8/22の時点で
          ルーマニアは完全接種が31.9%一回接種が32.8%に対し、ブルガリアは19.8%と21.1%でダントツでワースト1位でした。

  9. のりのり より:

    こんにちは
    いつも参考にさせてもらってます
    92 になるまでは
    記載通りの方法で今くできていたのですが
    先ほど 92にしたら
    また例のごとく ツールバーの上にタブバー になってしまいました

    いつものようにしたら
    今回は かわらずです。
    firefox用スクリプトアップローダーの
    ダウンロード先に

    MultiRowTabLiteforFx.uc.js:多段タブのスクリプトが Firefox 78esr = 6種類 Firefox 89+ = 6種類 入ってます。___種類分けしている組み合わせは、01~06 それぞれの組み合わせ.txtに書いたので見て下さい。__________2021/8/11__Firefox92の変更でconfig.jsとuserChrome.jsの更新が必要になったので、92になったらalice0775さんのGitHubからダウンロードして更新してください。alice0775さんのGitHubへのリンク → https://github.com/alice0775/userChrome.js/tree/master/92

    こうあるので
    たぶんこれが原因かとおもうのですが
    リンク先にいったのですが
    これをどうやってダウンロードするのかがわからなくて

    アドバイスいただければとおもいます
    よろしくお願いします

    • bunji_bunji_ より:

      >のりのりさん

      92に更新されたんですね。まだ私のは更新されていないので気が付いていませんでした。
      ご質問のダウンロードのしかたですが、
      「userChrome.js」と書いてあるところにカーソルを合わせて、右クリックして「名前を付けてリンク先を保存」を選び
      名前はそのままでダウンロードします。
      できたファイルはuserChrome.js.htmlとなっていると思うので、最後の.htmlを削ってください。(警告が出ますが無視で)

      「install_folder」をクリックすると、「config.js」が表示されるので上記と同様にダウンロードすればできると思います。
      試してみてください。

      • のりのり より:

        html  の件わかりました
        ファイル名拡張子 にチェックですね


        できて
        再起動したのですがかわらずです
        ネット見てるとこれでうまくいくはずなんですけどね

        bunji_様が 92 うまくいくか
        試した後またおしえてください
        よろしくおねがいします

        • bunji_bunji_ より:

          >のりのりさん

          先ほど記事をアップしました。この方法で私はうまく行ったので
          のりのりさんも試してみてください。もし、うまく行かない場合は教えてください。
          よろしくお願いします。

  10. のりのり より:

    こんばんは
    お返事ありがとうございます

    「userChrome.js」と書いてあるところにカーソルを合わせて、右クリックして「名前を付けてリンク先を保存」を選び
    名前はそのままでダウンロードします。

    ここまでできて
    できたのですが できたのが添付画像で

    userChrome.js.htmlとなっていると思うので、最後の.htmlを削ってください

    とありますが
    どこをどうやってけずればいいのか
    アドバイスお願いします

    • bunji_bunji_ より:

      >のりのりさん

      ごめんなさい。この方法ではダウンロードできないので
      今記事を書いています。今しばらくお待ちください。

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