Mozilla Firefox 多段タブスレ Part.3 (883ﾚｽ)
上下前次1-新
ﾘﾛｰﾄﾞ規制です｡10分ほどで解除するので､他のﾌﾞﾗｳｻﾞへ避難してください｡
1(1): (ﾜｯﾁｮｲ 7ed7-kR6J) 2024/03/17(日)20:10 ID:yvdT8G1H0(1/2) AAS
!extend:checked:vvvvv:1000:512
!extend:checked:vvvvv:1000:512
↑次スレ建てるときは三行になるようにコピペしてください
■Mozilla Firefox
外部ﾘﾝｸ:www.mozilla.org
■Mozilla Firefox リリースノート
外部ﾘﾝｸ:www.mozilla.org
■Firefox サポート
外部ﾘﾝｸ:support.mozilla.org
-----
多段タブを実現するuserChrome.js、userChrome.css等を扱う専用スレです
相互互助にお使いください
Mozilla Firefox Part394
2chｽﾚ:software
Firefox userChrome.js greasemonkeyスクリプトｽﾚ44
2chｽﾚ:software
userChrome.css・userContent.cssスレ Part14
2chｽﾚ:software
Mozilla Firefox 拡張機能スレッド Part124
2chｽﾚ:software
前スレ
Mozilla Firefox 多段タブスレ Part.2
2chｽﾚ:software VIPQ2_EXTDAT: checked:vvvvv:1000:512:: EXT was configured
757: (ﾜｯﾁｮｲ 4b3c-TsVb) 05/29(木)09:36 ID:5MoMQMmi0(1/2) AAS
>>756
マウスでタブ一覧の最後尾へ一度だけ移動することができるが、
それ以外の特定の場所へマウスで移動させることが出来ない。
758: (ﾜｯﾁｮｲ 4b3c-TsVb) 05/29(木)09:52 ID:5MoMQMmi0(2/2) AAS
Izheilさんのだと初めの数回はドラッグ・アンド・ドロップできるけど
繰り返しているとできなくなる。
759: (ﾆｸｸｴ cf30-JT63) 05/29(木)16:01 ID:zERKz/qW0NIKU(1) AAS
>>756
確か次の更新（いつかはわからん）が最後の無料バージョンな気がする
そしてその次の更新時に有料（サブスクリプション）への案内が表示されるんだったか
760: (ﾜｯﾁｮｲ 8bca-ZZSa) 06/09(月)17:15 ID:EVolHDsh0(1) AAS
139.0.1 64bit OK
761: (ﾜｯﾁｮｲ 792e-ZZSa) 06/13(金)14:15 ID:t2K+y4q10(1) AAS
139.0.4
多段が消えたぁ〜
762: (ﾜｯﾁｮｲ 13ea-7lEX) 06/13(金)15:00 ID:/cSHFHgv0(1) AAS
消えてないから多段改造のver古いの使ってたんかな？
763: (ﾜｯﾁｮｲ c10f-Zs9Y) 06/13(金)20:13 ID:1zEvn8jB0(1/2) AAS
うちも大丈夫でした。多段タブ138+です
764: (ﾜｯﾁｮｲ c10f-Zs9Y) 06/13(金)20:15 ID:1zEvn8jB0(2/2) AAS
Firefox Nightly 141.0aの方もOKでした
765(1): (ﾜｯﾁｮｲW 2bac-TJw7) 06/13(金)21:25 ID:q0x5HIWd0(1/2) AAS
Firefox139でfx136用のdoNotSelectTab_fx60.uc.jsとろだの多段タブ138+併用して問題ない人いる？
うちだと非アクティブタブを移動するとアクティブタブが移動しちゃう
それぞれ単体なら大丈夫そう
766(1): (ﾜｯﾁｮｲ 51cf-Zs9Y) 06/13(金)22:31 ID:qJ2xmDgs0(1) AAS
>>765
MultiRowTabLiteforFx.uc.js
// @compatibility Firefox138+
// @version 2025/04/07 12:00
の
650行目
let selectedTabs = gBrowser.selectedTabs;
を
let selectedTabs = gBrowser.selectedTabs.length > 1 ? gBrowser.selectedTabs : [draggedTab];
に置き換えればおk
767: (ﾜｯﾁｮｲW 2bac-TJw7) 06/13(金)23:35 ID:q0x5HIWd0(2/2) AAS
>>766
こんな即日で解決策を…ありがとう…
768: (ﾜｯﾁｮｲ 73ce-gi55) 06/14(土)13:50 ID:Fo4i5QVq0(1) AAS
成仏しろよ
769: (ﾜｯﾁｮｲ ad73-cVjo) 06/25(水)08:27 ID:xz9/0fXZ0(1) AAS
Version 140.0
New
垂直タブ： 重要なウィンドウにすばやくアクセスできるように、ピン留めしたタブの数を増やしたり、
減らしたりできるようになりました。仕切りをドラッグするだけで、ピン留めしたタブのセクションのサイズを変更できます。
カスタム検索エンジン： Firefoxはさらに多くの検索エンジンを追加できるようになりました。
カスタム検索エンジンを追加するには、サポートされているウェブサイトの検索フィールドを右クリックして「検索エンジンを追加」を選択するか、
「設定」>「検索」>「追加」（検索ショートカットテーブルの下）で検索URLを手動で入力します。
Firefox拡張機能： 拡張機能のショートカットを削除するオプションでツールバーをカスタマイズし、
ブラウザをよりコントロールできるようになります。ボタンを非表示にしても、Firefoxメニューの拡張機能メニューをクリックすれば、
いつでも拡張機能パネルにアクセスできます。
タブ（または選択した複数のタブ）を右クリックし、「タブのアンロード」を選択することで、タブをアンロードできるようになりました。
これにより、Firefox のメモリと CPU の使用量を削減し、パフォーマンスを高速化できます。
全ページ翻訳では、現在のビューに近いコンテンツのみを優先的に翻訳するようになり、速度と応答性が向上しました。
ビュー外のコンテンツは、スクロールしない限りスキップされるため、不要なリソースの使用が抑えられます。
Firefoxのアラビア語ビルドには、Firefoxスペルチェッカー用のアラビア語辞書が内蔵されています。
イタリア、ポーランド、オーストリアのユーザーに対して、住所の自動入力が可能になりました。
Fixed Various security fixes.
Changed
ポケットのツールバーアイコンとニュータブ上のポケットの統合は、サービス停止のアナウンスにより削除されました。
770: (ｽｯｯﾌﾟT Sd43-cVjo) 06/26(木)21:22 ID:n5H/zgxfd(1) AAS
140.0 64bit 大丈夫に思える。
771(2): (ﾜｯﾁｮｲ e331-wuNm) 06/27(金)01:19 ID:5zKIzgyJ0(1) AAS
140.0.1 64bit
やっぱりタブ移動で1番後ろに持っていくと1つ手前になっちゃう
直し方ある？
772(1): (ﾜｯﾁｮｲ 95da-cVjo) 06/28(土)01:26 ID:VOL3wb/l0(1/2) AAS
>>771
同じ事象が発生
トラブルシューティングモードで起動したらちゃんとタブ移動出来るから、色々やっているけど時間かかりそう
なんかちょっとした事だと思うんだけど
773: (ﾜｯﾁｮｲ 6dee-wuNm) 06/28(土)03:18 ID:QM2uU3Ko0(1) AAS
>>771
Move Tab Hotkeysで強引に1番後ろに持っていく方法はどう？
ショートカットキーも使える
774(1): (JP 0H4b-cVjo) 06/28(土)06:31 ID:l2xlTUVJH(1/4) AAS
>>772
多段タブ 138+ の MultiRowTabLiteforFx.uc.js の下記部分をコメントアウトするとタブのドラッグ移動は正常になるみたい
でもどう修正すればいいのかはわかんない(*
775(3): (JP 0H4b-cVjo) 06/28(土)06:32 ID:l2xlTUVJH(2/4) AAS
>>774
書込み消えちゃった・・・
if (selectedTabs[selectedTabs.length - 1] == null){
newIndex = lastKnownIndex;
} else if (newIndex > selectedTabs[selectedTabs.length - 1]._tPos + 1)
newIndex--;
else if (newIndex >= selectedTabs[0]._tPos)
newIndex = -1;
776: (ﾜｯﾁｮｲ 2393-hhgN) 06/28(土)07:15 ID:+RWS3qDi0(1) AAS
タブ移動は最後というか縦（段が変わる）移動すると指定した位置の一つ前になっちゃう
775をやってみたけど今のトコ良さげ
777: (ｽｯｯﾌﾟT Sd43-cVjo) 06/28(土)09:09 ID:YELrRFb0d(1) AAS
140.0.2 64bit ｵｹ
778(1): (JP 0H4b-cVjo) 06/28(土)10:53 ID:l2xlTUVJH(3/4) AAS
>>775
構文的にはコメントアウトするよりも
} else if (newIndex > selectedTabs[selectedTabs.length - 1]._tPos + 1)
を _tPos + 2
} else if (newIndex > selectedTabs[selectedTabs.length - 1]._tPos + 2)
にするほうがましかもしれない。わかんないけど
779(1): (JP 0H4b-cVjo) 06/28(土)12:08 ID:l2xlTUVJH(4/4) AAS
>>778
+ 2 くらいじゃ、あまり変化なかった。+ 10 とか + 100 とかにしないと駄目だった。
ごめん
780(1): (ﾜｯﾁｮｲ 95da-cVjo) 06/28(土)16:09 ID:VOL3wb/l0(2/2) AAS
>>779
乙です
色々やったけど、ギブアップ
開いているタブの数・・・・？結局コメントアウトしました
781(1): (ﾆｸｸｴ Sabb-j8BE) 06/29(日)15:41 ID:2PFOX+ZwaNIKU(1) AAS
これコメントアウトってのは該当部分を削除すればいいんですか？
782(1): (ﾆｸｸｴ 0H8e-/xla) 06/29(日)18:15 ID:o+Zuo9wVHNIKU(1) AAS
>>780
乙乙です
SHIFTキーやCTRLキーで一度に複数のタブを選択して移動させた場合の処理を調整してるみたい
FireFoxの仕様が変更されてなくてもよくなったのかな
以前のFireFoxと多段タブで挙動の違いを検証するのがいいんだけど、他の方に任せます
>>781
削除でもok
コメントアウトは
if (selectedTabs[selectedTabs.length - 1] == null){
newIndex = lastKnownIndex;
} // else if (newIndex > selectedTabs[selectedTabs.length - 1]._tPos + 1)
// newIndex--;
// else if (newIndex >= selectedTabs[0]._tPos)
// newIndex = -1;
のように // スラッシュスラッシュ半角スペースを追加すると、それ以降の行は実行されない
if (selectedTabs[selectedTabs.length - 1] == null){
newIndex = lastKnownIndex;
} /* else if (newIndex > selectedTabs[selectedTabs.length - 1]._tPos + 1)
newIndex--;
else if (newIndex >= selectedTabs[0]._tPos)
newIndex = -1; */
のように /* */ で囲んだ範囲は実行されなくなる、みたいなかんじ
783: (ｱｳｱｳｳｰ Sabb-j8BE) 06/30(月)15:46 ID:iGOBmVvpa(1) AAS
>>782
丁寧にありがとうございます
削除で問題なくタブ移動出来るようになりました
784(1): (ﾜｯﾁｮｲ 36d9-iM28) 07/01(火)17:38 ID:xjfQtAJE0(1) AAS
すみません、以下のURLにて以前公開されていた115esr用の「多段タブ.zip」を所持している方はいらっしゃいませんか？
外部ﾘﾝｸ:u6.getuploader.com
2年前のバージョンであるせいか、WebArchiveでは公開を確認できたものの、現時点で非公開になっているようで…。
せめて製作者の方(おそらく毎バージョン同じ方だとは思いますが)さえ分かれば再アップロード等の依頼もできるのですが…。
外部ﾘﾝｸ:web.archive.org
785: 07/01(火)18:17 AAS
２０２３／０２／０７にダウンロードしたやつしかなかった。
786: (ﾜｯﾁｮｲ 22f8-Kuvb) 07/02(水)14:30 ID:t1lIeHkU0(1) AAS
これか
多段タブFirefox115esr.zip
787: (ﾜｯﾁｮｲ 3688-iM28) 07/03(木)18:30 ID:WdNgKv4c0(1) AAS
度々申し訳ないです、>>784を投稿した者です。
どうやら前述のアップローダーの大本であるGitHubの更新履歴から、過去分の各ファイルを落として適宜入れ替えてみたところ、
多少の試行錯誤の後、何とか無事に115esr版に適用できたため、自己解決に至りました。
お騒がせしました。
788: (ﾜｯﾁｮｲ 1f21-kwQ5) 07/10(木)17:46 ID:sy5eJrJT0(1/2) AAS
なんかyoutube再生するタブだけ幅が縮まる
なんか変わったか、おま環か？
789: (ﾜｯﾁｮｲ 1f21-kwQ5) 07/10(木)18:32 ID:sy5eJrJT0(2/2) AAS
タブの高さを戻したら直った
低すぎると崩れるようだ
790: (ﾜｯﾁｮｲ 1fb6-kwQ5) 07/11(金)17:47 ID:ScprvBTL0(1) AAS
ChatGPTのOpenAI製ブラウザまもなく登場、Google Safari Firefoxがやばい
791: (ﾜｯﾁｮｲ 8a34-KXiH) 07/15(火)21:15 ID:59igLOCd0(1) AAS
メディアタブの再生マークアイコンやスピーカーアイコン
以前はファビコンの位置に出てたけど138？くらいからファビコンの横に表示されるようになって
アイコン分タブ幅が広がるからレイアウトがくずれる
792: (ﾜｯﾁｮｲ f17e-vsEz) 07/16(水)23:41 ID:ovAWUmzv0(1) AAS
138.0.3から140.0.4 64bitにしたらタブの移動が出来なくなって
>>775のみて書き換えしたらタブ移動は出来る様になったけどタブの縦幅が大きくなって
タブのドラッグ移動してる時は元々の縦幅になるけどドラッグ移動してる時の縦幅にするのは何処イジればいいのだろうか
793: 792 (ﾜｯﾁｮｲ f17e-vsEz) 07/17(木)23:03 ID:sTRDHz7E0(1) AAS
スマソ
自分の環境では>>775のでは多段タブが出来なくなってた
でも138+のでタブ移動は出来るけど右にタブ移動させる時は2つ分ドラッグ移動させて1つ移動出来る感じになった
逆は無問題
これでも運用出来るので様子見しまつ
794: (ﾜｯﾁｮｲ c803-NZlk) 07/17(木)23:08 ID:NSVCwPVv0(1) AAS
userChrome.cssの多段タブのところに/* Test for Firefox > 66 */って記述があるやつなら
そこ以下を削除すれば行けないかね
795: (ﾜｯﾁｮｲ f17e-vsEz) 07/18(金)22:29 ID:ohpCvV9B0(1) AAS
そこにはその記述はないけど多段ブックマークツールバー化してるからそれが関係してるのかも
多段ブックマークの方もドラッグ移動は出来るけどターゲット先に多段タブ同様に青い縦線のカーソル出るけど一番上段のみの稼働で
2段目以降のブックマークを移動させたい時も上段のみカーソル出てきて意味無いから目測でやってる
796(1): Merci chao (JP 0H0b-Bd2j) [mercichao@gmail.com] 07/21(月)18:26 ID:txZsoK39H(1) AAS
Multi Tab Rows（多段タプ）3.0
スクリーンショット：
画像ﾘﾝｸ[png]:raw.githubusercontent.com
紹介やダウンロード（英語）：
外部ﾘﾝｸ:github.com
注目ポイント：
＊タブグループのサポート：タブグループに完全対応し、よりスムーズな操作のために動作を細かく調整します。
＊タブアニメーションの強化：さまざまなタブ操作に対して、滑らかな遷移アニメーションを追加します。
＊スペース利用の最適化：ウィンドウのコントロールボタン下など、利用可能なUI領域を最大限に活用します。
＊スムーズなタブドラッグアニメーション：複数行モードでもアニメーション付きでタブのドラッグが可能です。
＊ピン留めされたタブのグリッドレイアウト：タブバーがスクロールされる際、ピン留めされたタブはコンパクトなグリッドとして固定表示され、大量のピン留めタブ管理に最適です。
＊Firefoxと自然に統合：まるでネイティブ機能のように、Firefoxの動作と完全に連携しながら複数行タブをサポートします。
（日本人じゃないですので、以上はAIで翻訳しました。）
797: 07/22(火)08:29 AAS
インストール方法すら、全く分からん…
798: Merci chao (JP 0H0b-Bd2j) [mercichao@gmail.com] 07/22(火)10:23 ID:YsV5vU97H(1/4) AAS
このファイルを：
外部ﾘﾝｸ[js]:github.com
chrome フォルダーに配置して、完了
他のスクリプトと全く同じインストール方
オンライン翻訳サービスやAIがいっぱいあるので、英語紹介ページでも簡単なことさ
799: Merci chao (JP 0H0b-Bd2j) [mercichao@gmail.com] 07/22(火)10:33 ID:YsV5vU97H(2/4) AAS
まぁ、無料シェアなものなので、ゴリ押しはしません
また一択を教えたいだけです
使うかどうかはご自由にどうぞ
800: Merci chao (JP 0H0b-Bd2j) [mercichao@gmail.com] 07/22(火)10:46 ID:YsV5vU97H(3/4) AAS
ファイルの直接ダンロードはこっち：
外部ﾘﾝｸ[js]:github.com
他の多段タプやTab Mix Plusとの互換性がないのでご注意
801: Merci chao (JP 0H0b-Bd2j) [mercichao@gmail.com] 07/22(火)10:54 ID:YsV5vU97H(4/4) AAS
一択 <- もう一つの選択
クソ日本語でごめん
802: (ﾜｯﾁｮｲ df69-k2hJ) 07/22(火)23:11 ID:5vsU+2jp0(1) AAS
141.0にしたけどピン留めしたタブがあると変になるな
803: (ﾜｯﾁｮｲ dff8-thF/) 07/23(水)00:11 ID:Tca5fcG50(1) AAS
タブグループ使うと関係ないタブの移動がおかしくなるのつらたん
804: (ﾜｯﾁｮｲ 47e4-k2hJ) 07/23(水)03:07 ID:VTUTtXkm0(1/2) AAS
FF141.0でロダの多段タブ
MultiRowTabLiteforFx.uc.js （2025/06/30 16:58:41)
ですが、２段め以降のタブの左のパディングだがマージンがかなり広くなってしまいます。
つまり１段目と２段め以降の左端が揃わない感じです。
805: 804 (ﾜｯﾁｮｲ 47e4-k2hJ) 07/23(水)03:16 ID:VTUTtXkm0(2/2) AAS
ちなみに普段開けているタブ（１段め左端）の３〜４つはピン留めしています。
806: (ｱｳｱｳｳｰ Sa2b-9deY) 07/23(水)08:58 ID:11+DTopba(1) AAS
タブのピン留めを全解除してタブの横幅の最小値を25に 前まではピン留めしていなかったタブまで隙間を埋めるように新しいタブで埋め尽くす 横幅の25は人によって違うと思うので絶対では無いです
これで一応見た目だけはピン留めしてるような感じにはなったけど当然使い勝手は色々悪いです
誰か偉い人の修正を気長に待たなきゃ
807: (ﾜｯﾁｮｲ 5f00-v3jg) 07/23(水)11:00 ID:mzDi7V0U0(1/2) AAS
カスタマイズの邪魔でしかないから更新は切ってる
808: (ﾜｯﾁｮｲ 67a7-nVDU) 07/23(水)15:36 ID:8UyKo4XI0(1) AAS
昔みたいにマージンきっちりとかタブ移動で何の問題もないとかは無理になりつつあるのか・・・・・
こゅちがわが右往左往させレめんどくさくなったもんだ
809: (ﾜｯﾁｮｲ df31-k2hJ) 07/23(水)17:18 ID:QRM0hdd10(1) AAS
タブ移動も更におかしな挙動になったな
810(1): (JP 0H0b-C9u2) 07/23(水)19:06 ID:ftxfEMTEH(1) AAS
>>796
ヤバ、これすごい！
ほんとに助かった、あざす
811(1): 07/23(水)20:14 AAS
>>810
chrome に入れるだけで、後は何もしなくていいの？
812: (JP 0H0b-C9u2) 07/23(水)21:01 ID:nvbCpCTdH(1) AAS
>>811
MultiRowTabLiteforFx.uc.js を MultiTabRows@Merci.chao.uc.js に置き換えて、Firefoxを再起動するだけでOK
813(1): 07/23(水)21:37 AAS
表示されるタブは４段なのに、タブ部分の高さが８段分になってしまった…
下４段分は、空白…
814: (ﾜｯﾁｮｲ 5f36-v3jg) 07/23(水)21:50 ID:mzDi7V0U0(2/2) AAS
草
815(1): (ﾜｯﾁｮｲ df87-k2hJ) 07/24(木)05:25 ID:OPqfpt640(1/2) AAS
MultiTabRows@Merci.chao.uc.js
114行目で段数替えられる
816(1): (JP 0H0b-k2hJ) 07/24(木)10:54 ID:NeI7ZsJCH(1) AAS
>>815
about:config で userChromeJS.multiTabRows@Merci.chao を検索して、maxTabRows をいじれば段数変えられる
設定系は↓にまとまってる：
外部ﾘﾝｸ[js]:github.com
タブまわりの userChrome.css 設定は不具合出る可能性けっこう高いから気をつけたほうがいいぞ
817: 07/24(木)13:59 AAS
タブ表示部分領域の高さは何処で変更するの？
818: (ﾜｯﾁｮｲ df50-k2hJ) 07/24(木)18:14 ID:OPqfpt640(2/2) AAS
>>816
色々できるのね ありがとう
819: 804 (ﾜｯﾁｮｲ 471b-k2hJ) 07/25(金)02:11 ID:eHW7gukK0(1/2) AAS
ピン留めのあり・なし、でこんな感じです
画像ﾘﾝｸ[jpg]:blog-imgs-162.fc2.com
820: (ﾜｯﾁｮｲ 5fd9-v3jg) 07/25(金)02:20 ID:1wRLXzb+0(1) AAS
わははは
821: (ﾜｯﾁｮｲ 07a7-nVDU) 07/25(金)14:51 ID:w+kyJKpE0(1) AAS
半年前にもこう言う風になったな
昔と違って色々いじってどうにかしたけどホント手間かかる
822: 804 (ﾜｯﾁｮｲ 477f-k2hJ) [asge] 07/25(金)15:41 ID:eHW7gukK0(2/2) AAS
これでも使えないことはないとは思ったものの、PC PLAZAさんのMultiRowTabLiteforFx.uc.js
入れてCSSを数箇所弄ってピンありでも大丈夫なようにはなりました
ただ、ロダのがフィクスされたら入れ替える予定だけど
823: (ﾜｯﾁｮｲ df31-k2hJ) 07/25(金)22:13 ID:eHafg8uW0(1/2) AAS
ピン留めありの2段目以降の無駄スペースは直せたけどタブ間の間隔の広さが直せん
どこいじればいいのよ
824: 823 (ﾜｯﾁｮｲ df31-k2hJ) 07/25(金)22:20 ID:eHafg8uW0(2/2) AAS
なおったー
画像ﾘﾝｸ[png]:tadaup.jp
825: (FAX! 276e-7F+n) 07/26(土)07:34 ID:rNItoEjP0FOX(1) AAS
段々タブからサイドバー表示にして暮してるけど・・・・慣れてきた
826: (FAX! 47d3-k2hJ) 07/26(土)10:44 ID:K9W4/ZfL0FOX(1) AAS
MultiRowTabLiteforFxってもともとはAliceさんが作ってたみたいね
でも10年近く前にやめてるのか・・・
827: (ﾜｯﾁｮｲ 9779-/90x) 07/27(日)23:23 ID:q9VLijIq0(1) AAS
おそらく多段タブよりサイドバーのツリータブ系の拡張のほうがポピュラーなのかもね
自分も多段があれ？という時の為にSideberyを一応入れてるし（無効状態
何も入れずツーツバーのタブ一覧やタブグループで、という人も多いかもしれないけどどうなのかな
828: (ﾜｯﾁｮｲ a3df-/90x) 07/29(火)08:59 ID:do0wQ7Ba0(1) AAS
userchrome.cssを編集しようとしたらファイルが開けなくなってしまいました
userchrome.jsも
5月に触った時は問題なかったのですが
どなたかお助けいただけませんか？
829: (ﾜｯﾁｮｲ ca31-/90x) 07/29(火)11:28 ID:373Vv71c0(1) AAS
以前タブ間の間に擬似的にスペースを入れてましたがCSSの仕様変更に影響を受けにくいように区切り線を入れるように変更してみました。
背景色でタブを削るより見栄えが若干ですが良くなると思います。
/* UI密度コンパクト用 タブ間に区切り線を入れる */
/* タブの右端に縦の区切り線を追加（最後のタブには表示しない） */
.tab-background:not(:last-child)::after {
content: ''; /* 視覚的な線を描くための空要素 */
position: absolute; /* 親要素 .tab-background を基準に絶対位置指定 */
top: 0; /* 上端から開始 */
right: 0; /* 右端に配置（区切り線の位置） */
width: 1px; /* 線の太さ：1px */
height: 100%; /* タブの高さ全体に伸ばす */
background-color: #d2d2d2; /* 区切り線の色（タブバーと同色推奨） */
}
/* 多段タブ用 タブの下に区切り線を入れる */
/* タブの下端に横の区切り線を追加（すべてのタブに適用） */
.tab-background::before {
content: ''; /* 視覚的な線を描くための空要素 */
position: absolute; /* 親要素 .tab-background を基準に絶対位置指定 */
bottom: 0; /* 下端に配置（横線の位置） */
left: 0; /* 左端から開始 */
width: 100%; /* タブの幅全体に線を伸ばす */
height: 1px; /* 線の太さ：1px */
background-color: #d2d2d2; /* 区切り線の色（タブバーと同色推奨） */
}
/* 区切り線を正しく描画するため、タブ背景に相対位置を指定 */
.tab-background {
position: relative; /* ::before / ::after の絶対位置指定の基準にする */
}
830: (ﾆｸｸｴ ca31-/90x) 07/29(火)12:35 ID:373Vv71c0NIKU(1/2) AAS
ホバー時に下段と区切れなかったので一部修正しました。
/* 多段タブ用：下端に区切り線を追加する */
/* 各タブの下端に1pxの区切り線を描画する */
.tabbrowser-tab::after {
content: ''; /* 線を描画するための空要素 */
position: absolute; /* タブ要素を基準に絶対位置指定 */
bottom: 0; /* 線の位置をタブの下端に固定 */
left: 0; /* 線の開始位置を左端に設定 */
width: 100%; /* 線の長さをタブの横幅に合わせる */
height: 1px; /* 線の太さ：1px */
background-color: #d2d2d2; /* 線の色（タブバーと同色推奨） */
pointer-events: none; /* クリックなどの操作に干渉しないよう無効化 */
}
831: (ﾆｸｸｴ ca31-/90x) 07/29(火)15:07 ID:373Vv71c0NIKU(2/2) AAS
MultiRowTabLiteforFx.uc.jsで変更したくない人向けCSS
/* === タブの高さを変更 === */
/* デフォルト29px コンパクト */
:root[uidensity="compact"] #TabsToolbar:not([collapsed="true"]) {
--tab-min-height: 25px!important;
}
/* デフォルト36px 通常 */
:root[uidensity="normal"] #TabsToolbar:not([collapsed="true"]),
:root:not([uidensity]) #TabsToolbar:not([collapsed="true"]) {
--tab-min-height: 36px!important;
}
/* デフォルト41px タッチ */
:root[uidensity="touch"] #TabsToolbar:not([collapsed="true"]) {
--tab-min-height: 41px!important;
}
832: Merci chao (JP 0He7-/90x) [mercichao@gmail.com] 07/30(水)16:57 ID:RWtAL5GhH(1) AAS
MultiTabRows@Merci.chao.uc.js の日本語版紹介パージは開設しました：
外部ﾘﾝｸ[md]:github.com
833: (ﾜｯﾁｮｲ ca31-/90x) 07/31(木)17:12 ID:B+pQFEca0(1) AAS
MultiRowTabLiteforFx.uc.jsが終焉ぽいのでtrue/falseの設定CSSに置き換えたわ
ついでにコンパクトUIから通常密度に変えてCSSでコンパクト化+多段タブにやっと融合できた
そろそろMultiTabRows@Merci.chao.uc.jsへ移行するかな
834: (ﾜｯﾁｮｲ 4a40-/90x) 07/31(木)20:24 ID:+g6n8jKd0(1) AAS
MultiTabRows@Merci.chao.uc.jsのタブの最下段って
CSSでタブの幅を短く出来ないのかな？Floorpと一緒で妙に長いんだよね
揃ってないのが気になって移行しづらい
835(1): (ﾜｯﾁｮｲ 97aa-/90x) 08/01(金)07:27 ID:ESYdCMq20(1/2) AAS
確かに MultiTabRows@Merci.chao.uc.js は about:configやuser.js の browser.tabs.tabMinWidth
でタブ幅指定しても最下段はその値にならないね
なので自分はgithubの
Quantum-Nox-Firefox-Dark-Full-Theme/Multirow and other functions/Multirow tabs/
の MultiRowTabLiteforFx.uc.js を今は使っている
836(2): (ﾜｯﾁｮｲ a3aa-/90x) 08/01(金)09:00 ID:03t8rjRH0(1) AAS
MultiRowTabLiteforFx.uc.js 141+暫定版が1番良さそう
MultiTabRows@Merci.chao.uc.jsの以降止めた
CSSが言うこと聞かないとこ多くてしんどい
タブ周りのスタイルが複雑に多段に絡んでるから自由度がない
837(1): (ﾜｯﾁｮｲ 976e-/90x) 08/01(金)14:11 ID:ESYdCMq20(2/2) AAS
>>836
MultiRowTabLiteforFx.uc.js 141+暫定版 ってアメブロから以降した人の？
838: (ﾜｯﾁｮｲ ca31-/90x) 08/01(金)14:43 ID:RMqp+ncj0(1) AAS
>>837
そうです
839: (ﾜｯﾁｮｲ fa22-zh1S) 08/01(金)16:14 ID:h/e/CQmF0(1) AAS
ダウンローダーしか信じない
来るまで更新しない
840(2): Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/01(金)21:13 ID:QwVcaA1jH(1/2) AAS
>>835
MultiTabRows@Merci.chao.uc.js は近日中に最大幅設定と、ほかの新機能新機能dvii ibpp が追加される予定です。どうぞご期待ください。
>>836
もし私の創作物を気に入ってくれたのなら、困っていることを教えてください。できることであれば、お手伝いしますね。
タブのサイズや間隔を制御するためのいくつかのパラメータを、下の「高度な調整」セクションに列挙しています：
外部ﾘﾝｸ[md]:github.com高度な調整
841: Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/01(金)21:16 ID:QwVcaA1jH(2/2) AAS
「タブの最大幅設定と、ほかの新機能が追加される予定です」でした m(_ _)m
842(1): 08/02(土)07:36 AAS
>>840
> もし私の創作物を気に入ってくれたのなら、困っていることを教えてください。できることであれば、お手伝いしますね。
>>813 を…
843(3): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)12:56 ID:ZtSNSulB0(1/7) AAS
>>840 ありがとう なんとか綺麗に出来た
なんか色々干渉しまくってた
サイズ調整してるCSS全部捨ててから導入するのが良きです
MultiTabRows@Merci.chao.uc
画像ﾘﾝｸ[jpg]:tadaup.jp
/* ピン留めタブの右側の余白 */
.tabbrowser-tab[pinned] {
margin-right: 0px !important;
}
気づいたけどタブ移動のバグがないね
移動中のインジケーターが表示されないけど
844: Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)12:57 ID:gkqAaoohH(1/7) AAS
>>842
chrome フォルダー内の他の .css および .js ファイルをすべて一時的に移動し、Firefox を再起動して問題が解消されるか確認してください
もし解消された場合は、該当する CSSルールやスクリプトを削除してください
CSS でタブの最小幅を変更している場合は、代わりに about:config の browser.tabs.tabMinWidth を使用してください
ダメだったら、スクショ付きで俺のGitHubに報告してね：
外部ﾘﾝｸ:github.com
詳しく書いてもらわないと、対応できませんよ
845(1): Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)13:18 ID:gkqAaoohH(2/7) AAS
>>843
ピン留めタブの右側の余白については、about:config で「userChromeJS.multiTabRows@Merci.chao.gapAfterPinned」を検索し、0 に設定してみてください
この余白は設計上の意図された挙動なので、こちらの設定で調整するのが無難です
開発者としては、userChrome.css の予測不能な魔改造にはちょっと大変ですね。。。
userChrome.css との衝突による不具合等、ご迷惑をおかけしてしまったら申し訳ありません m(_ _)m
846: Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)13:36 ID:gkqAaoohH(3/7) AAS
>>843
> 移動中のインジケーターが表示されないけど
そのインジケーターは、元々「存在しない」ものです。本来の Firefox では、タブをドラッグするとカーソルに追従して移動します。
インジケーターは、別ウィンドウへの移動や、Ctrlキーを押しながらタブを複製する操作時にのみ表示されるものです。
今までの多段スクリプトや Tab Mix Plus さえ、多段モードで本格のドラッグ＆ドロップは実装できないので、仕方なくインジケーターを表示になっています。
847(1): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)13:36 ID:ZtSNSulB0(2/7) AAS
>>845
ありがとう
タブの右側の余白だけ何で記載がなかったのか気になってたけどそういうことなのですね
about:configで0設定しました。問題無く余白が消えました。
848: Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)13:44 ID:gkqAaoohH(4/7) AAS
>>843
「追従しなく、インジケーターが表示して移動」のオプション機能が、次の次のバージョンで追加される予定です（別の原因で追加するのですが）
849(1): Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)13:49 ID:gkqAaoohH(5/7) AAS
>>847
設定がますます増えてきたので、設定リストはちょっと乱雑になっちゃってごめんね (〃´-`〃)
850(1): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)18:17 ID:ZtSNSulB0(3/7) AAS
>>849
タブ間の垂直間隔でアクティブタブ(ピン留め含む)が効いていません
仕様なのかわかりませんが対応できたらお願いします。
tabbrowser-tabs {
--tab-block-margin: 1px;
}
851: (ﾜｯﾁｮｲ ca31-/90x) [850] 08/02(土)18:53 ID:ZtSNSulB0(4/7) AAS
すみませんbox-shadowで対応しました
/* アクティブタブの背景色 */
.tab-background:is([selected], [multiselected]) {
background-color: #94a3b3 !important;
box-shadow: 0 1px 0 #94a3b3 inset !important;
}
852(2): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)19:16 ID:ZtSNSulB0(5/7) AAS
MultiTabRows@Merci.chao.uc
バーの順番を入れ替えている場合
タブを削除していくとタブの無いタブバーが1段残ったままになります。
画像ﾘﾝｸ[png]:tadaup.jp
#toolbar-menubar { order: 1; } /* メニューバー */
#nav-bar { order: 2; } /* ナビゲーションツールバー */
#TabsToolbar { order: 3; } /* タブバー */
#PersonalToolbar { order: 4; } /* ブックマークツールバー */
853(1): Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)21:29 ID:gkqAaoohH(6/7) AAS
>>850
#tabbrowser-tabs ですね
最初のハッシュコードが抜けてるせいかも
>>852
userChrome.css をメールで送っていただければ、こちらで確認できますので、よろしくお願いします
mercichao@gmail.com
github でもオッケーです
外部ﾘﾝｸ:github.com
854(1): 08/02(土)22:36 AAS
これ、タブの幅を少し広げるには、何処を変更すればいいですか？
段数は３段がよかったので「maxTabRows: 3,」にしたのですが、
幅の変更がよく分からない…(汗)
855: 08/02(土)22:42 AAS
>>854
あ、解決しました。
browser.tabs.tabMinWidth を書き換えたら、リアルタイムで変化して、
適切な幅が分かり易くていいですね。
856: Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)22:46 ID:gkqAaoohH(7/7) AAS
>>852
バージョン 3.1 が公開されました：
外部ﾘﾝｸ[js]:github.com
Firefox を次回起動したときに、アップデート通知が表示されるかもしれません（※通知機能を無効にしていない場合）
今のところ通知は英語ですが、日本語メッセージは v3.1 に含まれています
変更履歴：
- 追加 autoCollapse と関連オプション: ホバーしていないときにタブを1行に折りたたむ。Firefox 115 では layout.css.has-selector.enabled を有効にする必要があります。（実験的）
- 追加 tabsAtBottom：タブバーを下部に配置（1: ナビゲーションツールバーの下、2: ブックマークツールバーの下）。Firefox 115 では未対応。
- 追加 hideDragPreview：タブやグループをドラッグ中にプレビューを非表示。値の例：0（常に表示）、1（グループのみ）、2（タブのみ）、3（両方）。
- 追加 animationDuration：アニメーションの長さ（ミリ秒、0〜1000）。※長すぎるとパフォーマンスに影響します。
- 追加 tabMaxWidth：タブの最大幅を指定。最小幅は browser.tabs.tabMinWidth を使ってください。
- 追加 hideScrollButtonsWhenDragging：ドラッグ時にスクロールボタンを非表示にする設定。
- タブグループからタブ全体をドラッグする際、ドロップするまではグループを維持。
- Firefox 142 に対応。
- タブを上下端にドラッグしてスクロールする際の不具合を修正。
- compactControlButtons は Windows 11 では常に利用可能。
- 一部テーマでの表示崩れを修正。
- その他、軽微なバグ修正。
新しく追加された tabsAtBottom オプションで、タブバーの表示順を変更できるようになりました
userChrome.css に関連する設定を使っている場合は、一度削除して、問題が解消するか確認してみてください
それと、タイトルバーを使っているようですね。もしよければ、以前のレガシー拡張をベースにした別スクリプト「Page Title in URL Bar」も試してみてください：
外部ﾘﾝｸ[js]:github.com
ページタイトルと URL の両方がアドレスバーに表示されます
このような感じになります：
画像ﾘﾝｸ[png]:tadaup.jp
857: (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)22:47 ID:ZtSNSulB0(6/7) AAS
>>853 ありがとうございます
原因違ったようです
ツールバーの順番は関係なかったです
原因はこれでした--tab-min-height: 25px;
デフォルトの36pxだと問題無く消えます。
Firefoxの密度設定は通常に設定しています
#tabbrowser-tabs {
/* タブのコンテンツの高さ：
* コンパクト-29px、通常-36px、タッチ-41px；
* 24px 未満には設定しないこと。また、ピクセル単位の整数値を使うことで表示の不具合を防ぎます。*/
--tab-min-height: 25px;
}
一応CSS送りました。見ていただけると助かります。
858(1): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)23:51 ID:ZtSNSulB0(7/7) AAS
もしかしたら1段目のタブバー自体の高さが残ってるのかも
タブがある状態で導入したから気づかなかったけど
でも#tabbrowser-tabsで高さを変更すればバーもタブも高さは変わるはずでは？
859(1): Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)00:55 ID:lhru72SWH(1/4) AAS
>>858
userChrome_Tab.css にタブの幅を設定していたルール：
/* タブの横幅 */
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 125px !important; /* 最小値 デフォルト 76px */
max-width: 165px !important; /* 最大値 デフォルト 225px */
}
これらは上記の新バーションの設定「userChromeJS.multiTabRows@Merci.chao.tabMaxWidth」と「browser.tabs.tabMinWidth」で指定してください
ざっと見れば、これは一番怪しいです
あとでちゃんと調べてみるね
そして、userChrome_Toolbar.css にあるこれらの記述を削除し、新しい設定「userChromeJS.multiTabRows@Merci.chao.tabsAtBottom」を 1 に変更してね
#toolbar-menubar { order: 1; } /* メニューバー */
#nav-bar { order: 2; } /* ナビゲーションツールバー */
#TabsToolbar { order: 3; } /* タブバー */
#PersonalToolbar { order: 4; } /* ブックマークツールバー */
860(2): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)02:55 ID:Y4DZOhir0(1/4) AAS
>>859 ありがとうございます
これだけ残して検証しました
#tabbrowser-tabs {
--tab-min-height: 25px;
}
タブの高さは変わるけど1段目のタブバーの高さが固定されたままになりませんか？
861: (ﾜｯﾁｮｲ 0ba7-4ObG) 08/03(日)05:23 ID:3zkFSrrp0(1) AAS
この手のものは急いで導入しないで修正されるまで待たんと時間ばかり持ってかれるが
飛びつきさんがいるおかげで修正が早まることになるから飛びつきさんはありがたいと思うことにしてる
862: (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)07:01 ID:Y4DZOhir0(2/4) AAS
AIに見てもらったらどうやら
MultiTabRows@Merci.chao.uc.jsとMultiRowTabLiteforFx.uc.jsは折返しの仕様が違うことが原因ぽい
MultiTabRows@Merci.chao.uc.jsは見た目は折り返してるけど、タブバーの高さは固定されたままなので整合性が取れない
MultiRowTabLiteforFx.uc.jsは タブが多段になるとタブバーの高さも動的に変わるので整合性が高い
と言われた。修正可能か聞いたけど駄目っぽい
よくわからんけどMultiRowTabLiteforFx.uc.jsは2段目以降のバーは、実は1段目のバーの高さが折り返し分伸るだけで別に段数が増えるわけではない？
MultiTabRows@Merci.chao.uc.jsはタブ自体は折り返しているがバーが固定さてたまま折り返しの分伸びないってことっぽい？
なのでデフォルトの高さより低くすると1段しか無い時にタブだけ低くなってデフォルト分のバーの高さが残る
で、この残ってるのが2段めが消えないように見えると⋯
863: (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)08:03 ID:Y4DZOhir0(3/4) AAS
やっと出来たー
なんとかタブバーの高さを段数に応じて折り返し可能にしてみたけど一時的な回避策です
環境次第ではおかしくなるかもです
水平間隔、垂直間隔は1px, タブのコンテンツの高さ25px用です。
/* 暫定折り返し対応策 */
#tabbrowser-tabs {
display: flex !important; /* 横並び＋折り返し */
flex-wrap: wrap !important; /* 複数行に対応 */
height: auto !important;
min-height: var(--tab-min-height) !important;
--tab-overflow-clip-margin: 1px;
--tab-inline-padding: 1px;
--tab-min-height: 25px;
--tab-block-margin: 1px;
}
js内でなんとかしてほしい
864(1): (ｽｯﾌﾟﾌﾟT Sd9b-d7oq) 08/03(日)08:35 ID:AR96PkUsd(1/2) AAS
MultiRowTabLiteforFx.uc.js を編集しようとしたら，
「〜というファイルを開けません
読み込みアクセス権がありません」と出るようになってしまった。
解決方法を教えてください。
865: (ﾜｯﾁｮｲ a37b-B3Cu) 08/03(日)10:16 ID:rMwK8ju20(1) AAS
まずはAIに聞こう
866(1): (ﾜｯﾁｮｲW 139f-//aw) 08/03(日)10:35 ID:32zEt/4x0(1) AAS
>>864
エスパーだけど、最近の関連スレでの類似書き込みを見るにESETあたり使ってるんじゃねーの
867: (ｽｯﾌﾟﾌﾟT Sd9b-d7oq) 08/03(日)10:48 ID:AR96PkUsd(2/2) AAS
>>866
ESETが原因でした。
ありがとうございました。
いくつかの設定をOFFにしていったけど，あっちをOFFにして，あっちをONにして…とやってたら，どの設定が原因かわからなくなった…
868(1): Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)11:32 ID:lhru72SWH(2/4) AAS
>>860
やっと原因が分かりました
これって、前に話してた件ですよね？
画像ﾘﾝｸ[jpg]:tadaup.jp
原因は、Firefoxの組み込みスタイルルールにより、`#tabbrowser-tabs` に `min-height` が適用されており、そのルールでは `--tab-min-height` という変数に 36px が設定されているためです：
画像ﾘﾝｸ[jpg]:tadaup.jp
一方で、`userChrome_Tab.css` では 25px に設定していて、上書きもされていないのに…
画像ﾘﾝｸ[jpg]:tadaup.jp
実は、`--tabstrip-min-height` が `:root` で定義、計算されているせいでした：
画像ﾘﾝｸ[jpg]:tadaup.jp
なので、`:root` に `--tab-min-height` を指定してあげることで、`--tabstrip-min-height` にも反映されるようになります：
画像ﾘﾝｸ[jpg]:tadaup.jp
Firefoxの組み込みスタイルの方が優先度が高いみたいなので、`!important` を付けるのは必要そうです
これで余白もちゃんと消えました：
画像ﾘﾝｸ[jpg]:tadaup.jp
`--tab-min-height` の挙動をちゃんと確認してなかったのは自分のミスでした…。
あと、`userChrome_Tab.css` にある `min-width` や `max-width` の指定も忘れずに削除してくださいね
タブが動いたりアニメーションする時に、わずかに揺れるような現象があります。これは、`--tab-min-height` を 25px に設定した場合に、他のスタイルルールの影響でタブの最終的な高さが小数点付きになってしまうためです。 おそらく視覚的なグリッチ（表示上の不具合）であり、次のバージョンで修正を試みる予定です。
869: Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)11:37 ID:lhru72SWH(3/4) AAS
>>860
--tab-block-margin も同じようにしてね
870(1): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)12:31 ID:Y4DZOhir0(4/4) AAS
>>868
ありがとうございます。お疲れ様です。
問題なく動作するようになりました。
:root {
--tab-min-height: 25px !important;
--tab-inline-padding: 1px !important;
--tab-overflow-clip-margin: 1px !important;
--tab-block-margin: 1px !important;
--tab-inline-padding: 8px !important;
}
クリーンな状態で導入しなかったせいで混乱したけど
たぶんタブに色を付けてなかったら気づかなかったと思う
871: Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)12:33 ID:lhru72SWH(4/4) AAS
タブの高さによって、より複雑な依頼されているようです
特にドラッグ＆ドロップ処理では、正確な高さ判定が求められます。終的な高さが小数点付きになってしまうと不具合が発生するのを観察しました
当面は、なるべく Firefox のデフォルトスタイルを使用することをおすすめします
872: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)11:49 ID:8f1dKc9uH(1/2) AAS
>>870
タブの高さ関連ルール：
:root {
/* タブ間の垂直間隔 */
--tab-block-margin: 1px !important;
/*
タブのコンテンツの高さ：コンパクト-29px、通常-36px、タッチ-41px；
24px 未満には設定しないこと。また、ピクセル単位の整数値を使うことで表示の不具合を防ぎます
*/
--tab-min-height: 36px !important;
/*
このルールが必要になる条件：(--tab-min-height) + (--tab-block-margin) * 2 < 33px
なぜ 33px か？.tab-label-container のデフォルト高さは2.7em、フォントサイズが12pxの場合は最大で約33px
タブは .tab-label-container より高くする必要があります
例：
- --tab-min-height = 29px
- --tab-block-margin = 1px
→ 合計：29 + 1×2 = 31px
31px < 33px となるため、レイアウト崩れを防ぐためにこのルールが必要です
*/
.tab-label-container {
height: auto !important;
}
}
873: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)12:12 ID:8f1dKc9uH(2/2) AAS
タブの高さを調整したい方は、上記のルールを追加することで、現在の MultiTabRows@Merci.chao.uc.js バージョン 3.1 でも正常に動作するはずです
不具合が発生した方は、ぜひご報告ください
874(2): 870 (ﾜｯﾁｮｲ 6b31-B3Cu) 08/04(月)15:31 ID:626kAffw0(1/4) AAS
タブの垂直間隔と水平間隔を見た目上1pxしたいが1pxで指定すると実際は2pxになります
なので0.5pxで指定すると見た目上1pxになるが、アイコンと文字よりタブが下方向にずれたように見えます
環境によっては下のバーにタブが少し重なりますし、他にも色々と表示の乱れが出ますね。
対策として垂直間隔と水平間隔の余白を無くし、タブの右端と下端に背景色で'box-shadow'を使い擬似的に垂直間隔と水平間隔の余白を1pxに見えるようにしました。
多段タブや他の表示には影響は無いと思いますがどうでしょうか？
画像ﾘﾝｸ[png]:tadaup.jp
/* タブ高さ・余白を調整する */
:root {
--tab-min-height: 25px !important;
--tab-block-margin: 0px !important;
--tab-inline-padding: 6px !important;
}
/* 通常タブの水平間隔の余白を無くす */
.tabbrowser-tab {
display: inline-block !important;
margin-inline: 0 !important;
}
/* ピン留めタブの水平間隔を無くす */
.tabbrowser-tab[pinned] {
padding-inline: 0 !important;
}
875: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)16:58 ID:R8dnqpmrH(1/6) AAS
>>874
> タブの垂直間隔と水平間隔を見た目上1pxしたいが1pxで指定すると実際は2pxになります
上記の inline-padding や block-margin は、padding-left・right や margin-top・bottom を一括で設定する、Firefox の組み込みパラメータです。
そのため 1px を指定すると、実際には 2px の余白が追加されてしまいます
また、小数点指定は環境によって表示の乱れなど様々な問題を引き起こすため、0.5px などの指定は避けた方が無難です
なお、box-shadow は要素のサイズやレイアウトに影響を与えないため、安心して使用できます
ただし、以下のルールでは組み込みパラメータを使用せず、margin や padding を直接指定するため、レイアウトが乱れる可能性があります：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
.tabbrowser-tab {
/*
デフォルトは flex なので、inline-block は全然別のレイアウト設定です
inline-block と flex の違いや動作原理を理解していない場合は、使用しないでください
*/
display: inline-block !important;
/* タブ間の水平間隔は :root の --tab-overflow-clip-margin で指定してください */
margin-inline: 0 !important;
}
/* ピン留めタブの水平間隔は .tab-content[pinned] の padding-inline で指定してください */
.tabbrowser-tab[pinned] {
padding-inline: 0 !important;
}
876(3): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)17:01 ID:R8dnqpmrH(2/6) AAS
>>874
総括すると、このような感じ：画像ﾘﾝｸ[png]:tadaup.jp
:root {
--tab-overflow-clip-margin: 1px !important; /* タブ間の水平間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-inline-padding: 6px !important; /* タブの左右の余白 */
--tab-block-margin: 1px !important; /* タブ間の垂直間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-min-height: 25px !important;
}
.tab-label-container {
height: auto !important;
}
.tab-content[pinned] {
padding-inline: 5px !important; /* ピン留めされたタブの左右余白 */
}
/* 以下はスクリーンショットの真似 */
.tab-background {
--background: rgb(180, 180, 180);
background: var(--background) !important;
box-shadow: 1px 1px var(--background) !important;
border-radius: 2px !important;
&[selected] {
--background: rgb(148, 163, 179);
}
}
877(1): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)17:32 ID:R8dnqpmrH(3/6) AAS
修正：
:root {
--tab-overflow-clip-margin: 0px !important; /* タブ間の水平間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-inline-padding: 6px !important; /* タブの左右の余白 */
--tab-block-margin: 0px !important; /* タブ間の垂直間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-min-height: 25px !important;
}
.tab-label-container {
height: auto !important;
}
.tab-content[pinned] {
padding-inline: 5px !important; /* ピン留めされたタブの左右余白 */
}
/* Active Tab BG */
.tab-background:is([selected], [multiselected]) {
background-color: #94a3b3 !important;
box-shadow:
inset 0 -1px 0 0 #d2d2d2, /* 下端に1pxの影 */
inset 1px 0 0 0 #d2d2d2 !important; /* 右端に1pxの影 */
}
/* Inactive Tab BG */
.tab-background:not([selected], [multiselected]) {
background-color: #a5a5a5 !important;
box-shadow:
inset 0 -1px 0 0 #d2d2d2, /* 下端に1pxの影 */
inset 1px 0 0 0 #d2d2d2 !important; /* 右端に1pxの影 */
}
878(1): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/04(月)18:04 ID:626kAffw0(2/4) AAS
>>876
ありがとうございます。
そうですよね。タブを背景色で削るんじゃなくてタブの色を端に足せばいいんですよね。
コンパクトにすることに夢中だったせいか気づかなかった。
おかげで綺麗に修正できました
879(1): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/04(月)18:43 ID:626kAffw0(3/4) AAS
あれ？ 修正来てた
まぁいいか
余白をゼロにしてから背景色でタブを削るなら修正された>>877の記述で
余白をゼロにぜずタブの色で足して詰めるなら>>876の記述で
ってことでいいのかな？
880(1): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)19:22 ID:R8dnqpmrH(4/6) AAS
>>878
>タブを背景色で削るんじゃなくてタブの色を端に足せばいいんですよね。
スクショの中に box-shadow の設定があるって気づいてなかったから、ただ真似してみただけで、特におすすめってわけじゃないです。
実際、どっちのやり方も少し瑕疵があるので：
画像ﾘﾝｸ[png]:tadaup.jp
どっちが気になるかは、まあ人それぞれって感じですね。
もしかしたら完璧な方法もあるかもだけど、ざっと試した感じでは見つかりませんでした。
あと、「Page Title in URL Bar」（URLバーにページタイトルを表示）もぜひ試してみてくださいね：
外部ﾘﾝｸ[md]:github.com （＃の部分も含めてね）
スクリプトのダンロード：
外部ﾘﾝｸ[js]:raw.githubusercontent.com
ページタイトルが表示されつつ、UIもコンパクトにできるので、そういうのが好きな人にはけっこういいかも。
881: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)19:32 ID:R8dnqpmrH(5/6) AAS
>>879
> あれ？ 修正来てた
「修正」って言っちゃったけど、そういう意味の修正じゃなくて、>>876 の勝手な真似に対する修正ってことです
882(1): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/04(月)20:38 ID:626kAffw0(4/4) AAS
>>880
細かい比較画像ありがとうございます
タブの角がなんとなく違うなと思って気になっていました
拡大して比較して見ると結構違いますね
Page Title in URL Barは入れてみましたが私の環境では馴染めなかったです。ごめんなさい。
タイトルバーに他のプログラムのトリガーを入れてるので、それらがタブバーで発動しちゃうので無理でした
あと、やっぱりウィンドウを掴めるところは広いほうが良いです。
でもフルスクリーンモードの時はURLバーとタイトルが融合出来たら欲しいかもですね。
または、タイトルバーが自動で隠れてマウスオンで表示してくれるギミックがあるならそういう時に欲しいです。
883: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)21:57 ID:R8dnqpmrH(6/6) AAS
>>882
> または、タイトルバーが自動で隠れてマウスオンで表示してくれるギミックがあるならそういう時に欲しいです。
まぁ。。。 これではどうですか？
chrome に適当に JS ファイルを作って、以下のコードを貼り付けて再起動してみてください。
なぜ +2 なのかはもう忘れました、十年以上前の拡張機能のロジークからなので。
とりあえず適当に書いただけなので、バグがあるかもしれません。www
///////////////////////////////
let $ = s => document.querySelector(s);
let p = v => Services.prefs.setIntPref("browser.tabs.inTitlebar", v);
let t = $("#fullscr-toggler");
let b = $("#browser");
let d = document.documentElement;
let e = (n, e, a, c) => n.addEventListener(e, e => e.target == n && a(e), c);
t.style.setProperty("display", "block", "important");
e(t, "mouseenter", e => p(0));
e(b, "mouseenter", e => p(1));
e(d, "mouseleave", e => e.clientY < (outerWidth - d.clientWidth) / 2 + 2 && p(0), 1);
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.041s