Firefox66で多段タブ&タブバーを下に メニューバーもOK タブの移動もできるヨ

Firefox
Alexas_FotosによるPixabayからの画像

※2019年5月18日更新しました。
更新前の記事でメニューバー問題があったのですが、その解決は

こちらの記事を御覧ください。
今回の記事の内容だけでメニューバーは解決されると思います。
Firefoxが知らない間に、66にバージョンアップされていて
また多段タブ表示ができなくなっていたので、解決法を探しましたので記録しておきます。
下記の方法で私は多段タブ&タブバーを下に表示することができましたが
環境が違う他の方が全て同じ方法でできるとは限りませんので、ご了承ください。
以下の画像は新しいものと古いものが混じっていますが、大筋に問題はないはずですので
細かいことは気にしないようにお願いします。(間違いがありましたらお知らせいただけると嬉しいです)

スポンサーリンク

準備その1 MultiRowTabLiteforFx.uc.jsを用意

こちらにアクセス

2019-05-18_11h21_41

一番上の「多段タブ.zip」をクリック
(順番が変わっているかもしれませんので、内容を参考にしてください。)
※2019年5月18日ファイル変更(ダウンロードがパスワード規制でできなくなっていたため)

2019-05-18_11h29_24

次のページで、ダウンロードをクリックして保存します。

2019-03-23_14h23_04
2019-03-23_14h23_59

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

2019-05-18_11h30_59

解凍してできた多段タブフォルダ内の「Firefox 66」フォルダを開きます。

2019-05-18_11h35_21

フォルダ名と下のテキストファイルの名前がリンクしているので、好きなタイプを選びます。
(私は05を選びました。)

2019-05-18_11h49_52

05のフォルダを開いたところ。このMultiRowTabLiteforFx.uc.jsを使います。

準備その2 userChrome.cssを用意

2019-05-18_11h35_21

先程ダウンロードした「多段タブ.zip」の「Firefox 66」フォルダーにあるuserChrome.cssを使います。

準備その3 userChrome.xmlを用意

こちらのHPこちらのページの「つくったもの置き場」というリンクから
「chrome.zip」をダウンロードします。

2019-03-23_14h48_28

ダウンロードしたchrome.zipを解凍します。

2019-03-23_14h49_43

解凍してできた、chromeフォルダー中のuserChrome.xmlを使います。

フォルダーにファイルをコピーします。

ファイルの準備が整ったので、上記の3ファイルをFirefoxのフォルダにコピーします。

2019-03-23_15h23_55

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

2019-03-23_14h33_31

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

2019-03-23_14h35_41

開いたフォルダーの中に「Chrome」というフォルダーがあれば、それを開きます。
なければChromeという名前のフォルダーを作成します。
Chromeフォルダーの中身は空にしておきます。
(問題が起こったときに戻せるように、中に入っていたファイルを削除するのではなく
どこかに保存しておいたほうが無難です)

2019-03-23_15h02_27

準備した、3つのファイルをChromeフォルダに入れます。

2019-05-18_11h42_39

Firefoxを再起動して、多段タブ&タブバーがアドレスバーの下に来ていれば成功です。

タブのサイズ固定

タブのサイズを固定するには
<横幅の場合>

tabs tab[fadein]:not([pinned]) {
min-width: 100px !important;/* 最小値 */
max-width: 100px !important;/* 最大値 */
}

<縦幅の場合>

tabs tab[fadein]:not([pinned]) {
min-height: 10px !important;/* 最小値  */
max-height: 10px !important;/* 最大値  */
}

をuserChrome.cssに追記して、数字を変更すれば固定できます。

2019-03-28_18h38_42

こんな感じです。縦横の一方だけ固定したい場合は、固定したい方だけ記載すれば問題ありません。

非アクティブタブにマウスを載せた時に閉じるボタンを表示する

個人的にこれがないと不便なので。上記と同様に、「userChrome.css」に

/* Showing close button on tabs */
.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }

を追加します。

コメント

  1. cachaca より:

    bunjiさんはブログ書くのに何を使ってるんですか?まさかスマホ?この記事を見ると、ウィンドウズを使ってるようですが、移動するのにPC機器が結構重いでしょう。
    それともうシプカですか?ウチは8月にルーマニアへ行こうと思ってます。

  2. bunji_ より:

    >cachacaさん
    ウインドウズのパソコンです。OSはまだwindows8.1ですが。
    画面は12インチで重量は1.2kgぐらいなので、そんなに重くないですよ。
    仕事してたときはもうちょっと重いパソコンを毎日持ち歩いていたので、
    慣れたのかもしれません。これ以上軽いのは画面が小さいか高いかなので
    このあたりで妥協ですね。軽くもないですが。
    スマホのみはちょっと心もとないので、やはりPCが必要ですね。
    今年は日本に5月末まで居る予定です。
    ルーマニアに行かれるんですね。ルーマニアはブカレストしか行ったことがないので
    また行ってみたいとは思っているのですが。隣国だと近すぎて逆に行かないんですよね。
    cachacaさんはブカレスト以外も行かれるんですか?

  3. cachaca より:

    この冬はずっと日本なんですか? もう移動するのは飽きたとか?(笑) 
    12インチと言うと、私が持っていたASUSと ACERと同じです。本体に電源とか加えると2kgは超えますよね。
    マイクロソフトのSurfaceは軽くてそれほど高価ではないですが、キーボードと画面を離しては使えないんですよ。普通の人には問題ないと思いますが、私のような目の問題があると使いにくいです。
    ブカレストは旧市街がほとんど残ってないのでパスです。

  4. nuke より:

    参考にして多段化できました。記事を書いてくださりありがとうございます!作ってくださった方にも感謝です。

  5. zapper より:

    以前からfirefoxの設定で何度も参考にさせていただいておりましたが、
    今回も本当に助かりました!!!
    ありがとうございます。
    もうwindowsの復元までしたりして自分でも色々やったのですが、こちらの方法で一発でほぼ以前通り、
    我慢していたタブの移動等もできるようになり感謝感激です。
    今回の66環境で、メニューバー、タブ、アドレスバー(というのでしょうか?)の高さの変更についてもまたアップしていただけたら幸いです。

  6. bunji_ より:

    >cachacaさん
    日本でちょっとやることがあって、今年はいつもより長く日本に居る予定なんです。
    最近はACアダプターも小さいので、2キロまでは行かないと思いますが
    やはり軽いほうが良いですよね。
    Surfaceは昔はProでないとソフト(アプリ)を入れるのが不便だったんですが
    今調べてみたら、goでもSモードを解除すると色々入れられるように変わったみたいで、
    これなら便利ですね。でも、画面が小さめかもしれません。確か10インチが中心だった気が。
    キーボードと画面を離して使いたい場合は、ブルートゥース対応のキーボードを使うのが
    良いかもしれませんね。
    ブカレストには行かれないんですね。他の都市には行ったことがないので
    cachacaさんのブログで見るのを楽しみにしています。

  7. bunji_ より:

    >nukeさん
    参考になったようで良かったです。
    私は勝手に紹介しただけなので、作ってくださったかたに感謝感謝です。

  8. bunji_ より:

    >zapperさん
    参考になったようで嬉しいです。
    >今回の66環境で、メニューバー、タブ、アドレスバー(というのでしょうか?)
    >の高さの変更
    高さというのは、長さのことでしょうか?位置(順番)のことでしょうか?
    詳しく教えていただけると嬉しいです。

  9. zapper より:

    ありがとうございます。
    高さ、天地(上下)方向の幅です。
    66以前も.cssファイルを書くことで設定していました。
    多段は便利なのですが、そのことによる表示面積の減少を少しでも少なくしたいためです。
    私の環境では「タブの横幅固定.txt」にある.cssへの追加は、横幅固定も、今までやっていた設定もうまく反映されないようで、.js に追加しないとダメなのかなあ?といった感じです。
    私は「01」デフォルトで高さ以外はドンピシャで失敗しても戻せばいいだけなので色々やってはいるのですが。。。

  10. zapper より:

    .css 追記によるタブ横幅の固定は反映されました。
    高さについてもやってみようと思います。

  11. bunji_ より:

    >zapperさん
    もう必要ないかもしれませんが、追記してみました。
    参考になれば幸いです。

  12. zapper より:

    またまたありがとうございます。
    フォルダ内の幅のテキストと以前の高さ設定のテキストを合わせる形で、ちゃんとやったつもりでしたが、出来ておりませんでした。
    ですが、bunji_ さんのテキストをコピペで一発。
    どこか些細なとこが間違っていたのでしょうね。
    メニューバーについては手こずっています。
    どうも「閉じる、最大化、最小化」とかのボタンの影響のようです。
    そういえば思い当たる事があり、以前はボタンは多少はみだしてもメニューバーのみを低く出来ましたが、最近(65?)のアップデートではみ出しが無くなり、ボタンの図案が乱れてしまい高さを多少高くしていました。
    今回のアップデートでその辺の仕様がまた変わったのかな?といった感じです。
    とりあえず現在はボタンの高さを低くするでメニューバー上下幅はせまくなった
    >ボタンの絵柄が全く見えない状態です。
    多くのタブを開いて多段になった時と違って、メニューバーは一列なので数ピクセル高くたっていいのですが、低くなったタブとのバランスが悪くて見た目が嫌なんですよねえ。
    完璧にやろうとすると「ボタンの余白」とかになってきそうなのでボチボチやっていこうと思います。

  13. bunji_ より:

    >zapperさん
    お役に立ったようで良かったです。
    メニューバーの方はやったことがないので、すみません。
    もしわかったら追記しますね。多分できないと思うので期待しないでくださいね。
    もし、zapperさんができたら教えてくださると嬉しいです。

  14. zapper より:

    そうなんです。
    少しは情報を上げたいと思い頑張ったんですが、ボタンの絵柄が見えないようではお教えするレベルではないと思い控えました。
    従来の.cssテキストで極端に高くしたりすると、FF立ち上がりの瞬間だけ反映されすぐに元に戻るようになったりします。
    自由な設定を排除する方向なんですかねー。
    私、リサーチは何とか頑張れるんですが超文系でして自分自身でどうにか出来そうではありません。
    他力本願ですがわかりましたら上げたいと思います。

  15. bunji_ より:

    >zapperさん
    もし、できたら教えてください。よろしくおねがいします。

  16. zapper より:

    何とかできたのでご報告します。
    しかし本当に超文系人間が切った貼ったでやった事なのでもっとスマートなやり方があるのかもしれません。
    色々やっていたはずみで、一度.js を削除したことがあったのですが、
    その時ボタンの図柄の下が切れれるだけ、消滅、乱れたりしないでメニューバーが狭くなりました。
    で、それまで.cssでは何をやってもダメだったので.js も編集しないとダメか(それ以前にもやろうとして断念していた)?組み合わせの問題か?と思いました。
    .css には
    toolbarbutton.titlebar-button {
    vertical-align: bottom !important;
    height: 18px !important;
    }
    を追記。ボタン絵柄が消えたり潰れたりしていました。
    その状態で「tpad109」というエディタ?でjs を開き、多段タブ項目最下段の
    .titlebar-buttonbox>.titlebar-button {
    padding: 10px 17px !important;
    の10を4に変更(適当です)しましたところ、×等のボタンが小さく、メニューバー上下も狭くなりました。
    多分、上記18pxとかの数字は適当である程度小さくしたらそれ以上反映されないようで実際はもう少しありそうです。
    それ以上は、「ファイル、編集」等の文字フォントサイズの影響になるのか?
    一応フォントサイズは
    menubar * {
    font-size: 14pt !important;
    }
    とかで変更できそうです。
    本当に素人作業でお恥ずかしいのですが、古い情報でメニューバーの高さを低くってのは多くあったので、
    やろうとする人は多い?と思いご報告した次第です。

  17. zapper より:

    js>padding項目を削除(importantのみでも?)。
    cssに
    toolbarbutton.titlebar-button {
    padding: 4px 17px !important;
    追記でもいけそうですね。
    cssで何やってもダメのはこれか。。。

  18. bunji_ より:

    >zapperさん
    ありがとうございます。やはり.jsもいじらないとだめなんですね。
    できる人には色々カスタマイズできて良いんでしょうが、
    詳しくない人には難しいですよね。。。

  19. smarrimento より:

    Quantumになってタブバーの位置が変わり困っていましたところ、この記事を見付け無事タブバーを下へ下げる事が出来ました。
    有難うございます、助かりました。
    しかし今度はメニューバーがタブバーの上へくっ付いたようになってしまいました・・・
    メニューバーの位置はこれまで通り一番上(タイトルバーの下)に置きたいのですが、変更は可能でしょうか?

  20. bunji_ より:

    >smarrimentoさん
    お役に立ったようで良かったです。
    メニューバーの件ですが、私も気になっているのですが
    ちょっと時間がなくてやっていません。
    解決できたら記事にしたいと思いますのでよろしくおねがいします。

  21. ありがとう! より:

    こんにちは。
    66以降多段タブにできなくなり困っていましたが、こちらの記事で無事できるようになりました。
    しかもタブをドラッグで動かせるようになるなんて感動してます!
    現状メニューバーがタブバーの上に来てしまい、それが唯一以前と違うところで少し困っています。前と同じようにメニューバーをタイトルバーの直下に置くことはできますでしょうか?

  22. bunji_ より:

    >ありがとう!さん
    お役に立ててよかったです。タブバーの件はちょっと時間がないので
    時間ができて上手く行ったら記事にしたいと思いますのでよろしくおねがいします。

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