Mozilla Firefox 多段タブスレ Part.3 (956ﾚｽ)
Mozilla Firefox 多段タブスレ Part.3 http://egg.5ch.net/test/read.cgi/software/1710673850/
上
下
前次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
抽出解除
ﾚｽ栞
あぼーん
ﾘﾛｰﾄﾞ規制
です｡10分ほどで解除するので､
他のﾌﾞﾗｳｻﾞ
へ避難してください｡
872: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 11:49:01.96 ID:8f1dKc9uH >>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; } } http://egg.5ch.net/test/read.cgi/software/1710673850/872
873: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 12:12:32.61 ID:8f1dKc9uH タブの高さを調整したい方は、上記のルールを追加することで、現在の MultiTabRows@Merci.chao.uc.js バージョン 3.1 でも正常に動作するはずです 不具合が発生した方は、ぜひご報告ください http://egg.5ch.net/test/read.cgi/software/1710673850/873
875: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 16:58:38.97 ID:R8dnqpmrH >>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; } http://egg.5ch.net/test/read.cgi/software/1710673850/875
876: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 17:01:01.13 ID:R8dnqpmrH >>874 総括すると、このような感じ：https://tadaup.jp/8NRWj8SA6.png :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); } } http://egg.5ch.net/test/read.cgi/software/1710673850/876
877: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 17:32:18.01 ID:R8dnqpmrH 修正： :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の影 */ } http://egg.5ch.net/test/read.cgi/software/1710673850/877
880: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 19:22:55.49 ID:R8dnqpmrH >>878 >タブを背景色で削るんじゃなくてタブの色を端に足せばいいんですよね。 スクショの中に box-shadow の設定があるって気づいてなかったから、ただ真似してみただけで、特におすすめってわけじゃないです。 実際、どっちのやり方も少し瑕疵があるので： https://tadaup.jp/8pXsA4dJl.png どっちが気になるかは、まあ人それぞれって感じですね。 もしかしたら完璧な方法もあるかもだけど、ざっと試した感じでは見つかりませんでした。 あと、「Page Title in URL Bar」（URLバーにページタイトルを表示）もぜひ試してみてくださいね： https://github.com/Merci-chao/userChrome.js/blob/main/README.jp.md#page-title-in-url-bar （＃の部分も含めてね） スクリプトのダンロード： https://raw.githubusercontent.com/Merci-chao/userChrome.js/refs/heads/main/PageTitle%40Merci.chao.uc.js ページタイトルが表示されつつ、UIもコンパクトにできるので、そういうのが好きな人にはけっこういいかも。 http://egg.5ch.net/test/read.cgi/software/1710673850/880
881: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 19:32:01.41 ID:R8dnqpmrH >>879 > あれ？ 修正来てた 「修正」って言っちゃったけど、そういう意味の修正じゃなくて、>>876 の勝手な真似に対する修正ってことです http://egg.5ch.net/test/read.cgi/software/1710673850/881
883: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 21:57:51.32 ID:R8dnqpmrH >>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); http://egg.5ch.net/test/read.cgi/software/1710673850/883
886: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/05(火) 10:43:12.17 ID:z3uOHEGnH >>885 今回報告されている不具合は、ほとんどが userChrome.css に書き込まれたスタイルが原因で起きているのです。 これは、10年以上前からレガシー拡張の開発者や利用者の間で繰り返し、悩ましい問題のひとつです。 昔、自分の拡張に関する不具合報告のほとんどが、他の拡張との相性問題が原因でした。 毎回のように「一度ほかの拡張を全部オフにして、問題が消えるかチェックしてみてください。 そのあとで一つずつオンにして、どれが原因なのか探っていきましょう」っていう流れで、 報告してくださった方にお願いしてました。 スタイルやスクリプトを DIY で魔改造している方の多くは、見た目がちゃんと変わって目的を達成できれば OK というスタンスで、 その内容が内部的な依存関係にどう影響するかまではあまり考えないことが多いですし、 他の方が書いたコードとの完全な互換性まではなかなか想定できません。 こういった事情も、レガシー拡張が最終的に廃止された理由のひとつだったと思います。 一方で、特に chrome フォルダに何も改造を加えていない方（フォルダ中身が空）にとっては、 スクリプト自体にバグさえなければ、基本的に問題なく動くはずです。 そんな背景もあるので、紹介記事では、あえて導入ステップの前に注意点を長めに丁寧に書いています： https://github.com/Merci-chao/userChrome.js/blob/main/README.jp.md 「Firefox に最適化されたレイアウト計算を多く含むため、タブやタブバー関連の旧式拡張（例：Tab Mix Plus）、スクリプト、CSSスタイルによって不具合が発生する可能性があります。スクリプト適用前後にそれらを確認するか、tabsUnderControlButtons を無効にしてください。」 http://egg.5ch.net/test/read.cgi/software/1710673850/886
887: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/05(火) 10:57:46.44 ID:z3uOHEGnH これは「誰のせいか」という話ではなく、むしろ、誰もが自由にあらゆることを操作できる（魔改造）ようになると、他人の自由（別の魔改造）と衝突しやすくなるということです 「不可能を可能に変える」ために自由を最大限に活用しつつ、他人に一切の影響を及ぼさないようにする ―― これは非常に奥深い課題ですね http://egg.5ch.net/test/read.cgi/software/1710673850/887
888: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/05(火) 11:18:14.24 ID:z3uOHEGnH >>884 以下のコードをスクリプトにすると、タブバーでダブルクリックとミドルクリックした時に新しいタブが開くのを防止できるはず： gBrowser.tabContainer.addEventListener("click", function(e) { if (e.target == this.arrowScrollbox && e.button == 1) event.stopPropagation(); }, true); gBrowser.tabContainer.addEventListener("dblclick", function(e) { if (e.target == this.arrowScrollbox && e.button == 0 && !this._blockDblClick) event.stopPropagation(); }, true); http://egg.5ch.net/test/read.cgi/software/1710673850/888
ﾒﾓ帳
(0/65535文字)
上
下
前次
1-
新
書
関
写
板
覧
索
設
栞
歴
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
AAｻﾑﾈｲﾙ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.044s