userChrome.css・userContent.cssスレ Part15

!extend:checked:vvvvv:1000:512
次スレを立てる方は↑を二行重ねて書いてください

●前スレ
userChrome.css・userContent.cssスレ Part14
https://egg.5ch.net/test/read.cgi/software/1710362871/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager (レガシーアドオン・要Classic Add-ons Archive)
https://addons.mozilla.org/ja/firefox/addon/user-style-manager/

●スクリプト
userChromeJS/UserCSSLoader at master ・ Griever/userChromeJS
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader
UserCSSManager (要userChromeES)
https://greasyfork.org/scripts/35880

●CSS（ユーザースタイルを記入するべきファイル）
userChrome.css（UI） / userContent.css（Web Site）

●関連サイト
Userstyles.org
https://userstyles.org/
CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS
とほほのスタイルシート入門
http://www.tohoho-web.com/css/

---

VIPQ2_EXTDAT: checked:vvvvv:1000:512:: EXT was configured

ネスト記法のような難しいことは知らないです

>>67
有難うございます
ただ、content: urlの中を書き換えて試してみましたがschemeは反映されませんでした。

>>70
同じものですが、このままコピペしてみてください

.bookmark-item:is([scheme="https"],[scheme="http"]) image,
.bookmark-item:is([scheme="https"],[scheme="http"]) > :is(.menu-icon,.menu-iconic-icon) {
content: url("chrome://browser/skin/places/folder-smart.svg") !important;
}

.bookmark-item[scheme="javascript"] image,
.bookmark-item[scheme="javascript"] > :is(.menu-icon,.menu-iconic-icon) {
content: url("chrome://global/skin/dirListing/folder.png") !important;
}

>>68
ChatGPTに聞いてみたら分かった

.bookmark-item:is([scheme="https"], [scheme="http"]) { image, > :is(.menu-icon, .menu-iconic-icon) {
content: url("chrome://browser/skin/places/folder-smart.svg") !important;
fill: #69c !important;
}
}
.bookmark-item[scheme="javascript"] { image, > :is(.menu-icon, .menu-iconic-icon) {
content: url("chrome://global/skin/dirListing/folder.png") !important;
}
}

>>72
自分もChatGPTに聞いてみることは試していました
アイコンの相対パスや絶タパス、あと擬似要素方式の例やDOM 構造変更にも比較的強く、表示の成功率が高いという
↓これなども、でも駄目でした

.bookmark-item[href^="https://";] .toolbarbutton-icon {
display: none !important;
}

.bookmark-item[href^="https://";]::before {
content: "";
display: inline-block;
width: var(--my-favicon-size);
height: var(--my-favicon-size);
background-image: url("chrome/icons/https-icon.png");
background-size: contain;
background-repeat: no-repeat;
margin-inline-end: 4px;
vertical-align: middle;
}

>>73
うちではちゃんと動作してるけど
以下も加えてスクリーンショットしたから確認してよ
https://i.imgur.com/ZYkBaQj.png

.bookmark-item[scheme="about"] image,
.bookmark-item[scheme="about"] > :is(.menu-icon,.menu-iconic-icon) {
content: url("chrome://global/skin/icons/developer.svg") !important;
fill: red !important;
}
.bookmark-item[scheme="moz-extension"] image,
.bookmark-item[scheme="moz-extension"] > :is(.menu-icon,.menu-iconic-icon) {
content: url("chrome://mozapps/skin/extensions/extension.svg") !important;
fill: Purple !important;
}

Sidebarmodokiを更新したらAutoCloseBookMarkFolderが効かなくなったな。
以前のバージョンに戻したらAutoCloseBookMarkFolderも復活した。

>>74
スクショ確認しました。
ちなみに74さんはuser.jsに
user_pref("browser.chrome.site_icons", false);
これでサイトのファビコンを取得しないようにしいますか？

>>76
browser.chrome.site_icon = false　はしてないです
設定したけどサイトアイコンそのままでした

>>61の無効になったcssをuserChrome.cssに書かれたままだと悪さするみたいだ
残したままにしていませんか

urlの記述が誤っていたんじゃないかな元のcssでもいけた

:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="https"] image,
.bookmark-item[scheme="https"] > :is(.menu-icon,.menu-iconic-icon),
.bookmark-item[scheme="http"] image,
.bookmark-item[scheme="http"] > :is(.menu-icon,.menu-iconic-icon) {
background: url("chrome://browser/skin/downloads/downloads.svg") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}
:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="javascript"] image,
.bookmark-item[scheme="javascript"] > :is(.menu-icon,.menu-iconic-icon) {
background: url("chrome://mozapps/skin/extensions/extension.svg") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}

前方一致とネスト記法を学ぶといい

ネスト記法やってみました

:root {--my-favicon-size: 16px !important;
}
.bookmark-item { &:is([scheme="https"], [scheme="http"]) { image, > :is(.menu-icon, .menu-iconic-icon) {
background: url("chrome://browser/skin/downloads/downloads.svg") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}
}
}

タブのピン留めの無効方法を教えてください。

>>78
お手数かけてすみません。現状のuserChrome.cssをバックアップとってから一旦空白78さんのというか61で私が示した記述を少し変えた
↓これだけuserChrome.cssに記述して起動時キャッシュ削除の再起動で効きました。なのでバックアップのuserChrome.cssから新たなuserChrome.cssに一つづつまた追加していこうかなと思っています

:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="https"] image,
.bookmark-item[scheme="https"] > :is(.menu-icon,.menu-iconic-icon),
.bookmark-item[scheme="http"] image,
.bookmark-item[scheme="http"] > :is(.menu-icon,.menu-iconic-icon) {
background: url("text-x-item.png") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}
:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="javascript"] image,
.bookmark-item[scheme="javascript"] > :is(.menu-icon,.menu-iconic-icon) {
background: url("js.png") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}
:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="file"] image,
.bookmark-item[scheme="file"] > :is(.menu-icon,.menu-iconic-icon) {
background: url("globe-2x-light.png") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}

一応途切れてしまった部分
↓
:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="moz-extension"] image,
.bookmark-item[scheme="moz-extension"] > :is(.menu-icon,.menu-iconic-icon) {
background: url("globe-2x-light.png") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}
:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="about"] image,
.bookmark-item[scheme="about"] > :is(.menu-icon,.menu-iconic-icon) {
background: url("globe-2x-light.png") center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}

>>81
あっちこっちのスレッドにabout:configを変更する
方法が出ているだろーが

>>84
Firefoxのタブのピン留め機能を無効にするための直接的な about:config 設定は存在しません
とAIも言ってる

拡張にShare on Twitterというのがありまして
https://addons.mozilla.org/ja/firefox/addon/tweetright/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

WebページのコンテキストメニューにShare Selection on Twitter、Share Page on Twitter、Share Link on Twitter、Share on Twitterというのが出て通常自分はタブメニューのShare Page on TwitterしかつかわないのでWebページにあるコンテキストメニューは

menuitem[label="Share Selection on Twitter"], menuitem[label="Share Page on Twitter"], menuitem[label="Share Link on Twitter"], menuitem[label="Share on Twitter"]
{
display: none !important;
}

このようにして出ないようにしていたのですが、つい最近このCSSが効かなくなってしまいまいました
記述の仕方が悪いのでしょうか。

>>85
ゴメン タブをタスクバーに追加の事かと勘違いした。

>>86
このままでうちでは効いたよ

>>88
ご確認ありがとうございます
変だなと思ってこの部分に@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";);を付け足して
userChrome.chunk.cssとして
userChrome.cssに
@import 'userChrome.chunk.css';でよびだしたら効きました

な、ガイジage厨だろ👆

アドレスバー内にある「タブをタスクバーに追加します」ボタン（サイトをウェブアプリ化する）を非表示にしたい

>>91
about:config

browser.taskbarTabs.enabled

false へ変更

で解決した

タブのピン留めを無効化したいです。

はい次の患者さんどうぞ

Palemoonの"ブックマークツールバーの項目"の横に拡張機能のアイコンやダウンロードボタンを配置すると"ブックマークツールバーの項目"の右側にスペースができてしまいます。
ブラウザツールボックスで確認するとtoolbaritem id="personal-bookmarks" flex="1" title="ブックマーク" removable="true"となっておりflex="0にすると改善されますが、
userchrome.cssへ記述するも反映されず困っておりご教示願います。

基地外スレチage厨スルー推奨

>>95ですが自己解決しました。

な、ｶﾞｲｼﾞスレチage厨だろ👆

e958-iZeJ

Stylusで、自作のスタイルが効かなくなる（が、Stylusのアイコンには
適用されているように数字が出る）時があるのでなぜかと思っていたら
解決法がようやく判った

スタイルマネージャでは有効になっているにもかかわらず、
当該のページでStylusのアイコンをクリックした時に表示される
スタイル名の左にあるチェックマークが外れていた
そこにチェックマークを付けるとスタイルも効いて、
スタイルマネージャでの有効状態とも連動するようになった

有効状態と実際の挙動が食い違うのは不具合か

Firefox 145.0
右クリックメニューの「選択部分へのリンクをコピー」と「追跡を除去した選択部分へのリンクをコピー」
を非表示にするにはどう書いたらいいでしょうか？

menuitem[label="選択部分へのリンクをコピー"],
menuitem[label="追跡を除去した選択部分へのリンクをコピー"] {
display: none !important;
}

>>102
ありがとうございます
今までの要素を非表示にするのとやり方が変わったんですかね？

145で
/* 右クリックメニューの行間を狭くする */
menupopup > menuitem, menupopup > menu {
padding-block: 0.2em 0.5em !important;
}
/* ハンバーガーメニューとオーバーフローメニューの行間を狭くする */
.subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
padding: 2px 8px !important;
}
/* 再生中のタブを色付け */
.tabbrowser-tab:is([soundplaying], [muted]) .tab-background {
background-color: #f00 !important;
}

このあたりが動かなくなってます。どのように修正すればよいのでしょうか

https://www.nikkei.com/local/kansai/
このページの左上の「記事・株価を検索」欄の背景色の変えかたを教えて

.searchForm_s1pi6qv2 {
background-color: pink;
}

>>106
ありがとう

145からだと思うんですけど、ブックマークのコンテキストメニューの左端に広い余白ができるようになってます
これを小さくして他のコンテキストメニューを同じくらいの幅にするにはどうしたらいいでしょうか？

俺のは普通やな

うちも普通

試しに新しいプロファイルを作り、ブックマークだけインポートして設定は一切弄っていない状態でブックマークを右クリックしたら
やはりメニューの左端に他のコンテキストメニューとは違う広さの余白ができます
なぜうちだけ…

うちもコンテキストメニュー左側の余白は全部いっしょだな

Firefoxそのものをいったんアンインストールしてプロファイルとかの残骸も削除してから再インストールしても直る保証はないですよね？

その画像見ないと何ともいえない

もしかして もしかすると、
「ブックマークツールバー」上のコンテキストメニューのことジャマイカ

そうなら browser.toolbars.bookmarks.showOtherBookmarks を false にしてみては?

>>115
そうです、ツールバー上のブックマークのコンテキストメニューです
言われた通り、browser.toolbars.bookmarks.showOtherBookmarksをfalseにしたらその左端の余白が無くなって他のコンテキストメニューと同じ間隔になりました
ジャマイカの人ありがとう！

最後の一文が滑ったな

https://imgur.com/a/ATBjbtz
この拡張機能ボタンを消す方法ないでしょうか？

>>119
これで消えてます
#unified-extensions-button{ display: none !important; }

ｶﾞｲｼﾞage厨に触るなよ
基地外が感染るぞ

>>120
消せました
ありがとうございました

ガイジage厨に触るからこうなる

左右の矢印ボタンを非表示にする方法を教えてください。

戻る進むでいいのかな

#back-button, #forward-button { display: none !important; }

ありがとうございます。

>>125
横からだけどありがとう カスタマイズじゃ移動できなくて困ってた
ツールバーが広くなった分他のアイコン並べられる

マウスジェスチャーなどで戻る進むもできるけど
ボタン長押しとコンテキストメニューから
戻る進むの履歴が出てきて便利なんだけどね

>>129
初めて見たので何か時間かかりそう　導入から勉強して来ます

さあさあ、教えたがりの子はいないかな？
いい餌食が待ってますぜ
https://forums.mozillazine.jp/viewtopic.php?t=23814

AIに質問した方がいいよ
リアルの人と異なり何時間でも親身に考えてくれる

もういいよ！

Geminiに作ってもらった
cssでは難しいらしい

// 2026年版・確実に動くViolentmonkey用コード Gemini

perplexityに聞いて答えを得たらしい

致命的なバグあるよ

>>135
その人、E氏に

もういいよ！
パスワード入れても同じこと。
二段認証を解除するのに、なんでこんなことになるのか・・・
現在、AIブラウザに乗り換え中。

なんて捨て台詞吐いたから相手にされてないみたい
なんか似てるから >>133 は本人かも
つか番号振って何したいんだろう

フォーラムはいい人ですけどお堅い人たちしかいませんからね

もういいよ！
アクセス禁止になりそう

https://forums.mozillazine.jp/viewtopic.php?t=23821

これ>>131と同じ内容なんだが、質問したのもAIに聞いたのも忘れて本人がもう一度投稿してる？

ﾜｯﾁｮｲ ec04-wX2E は本人ぽいね

そうなると
・相手にされてないから名前変えて投稿した
・別人だがここを見て愉快犯的に質問してみた
・たまたま似たような質問した人がいた

どれだろうね？

・脳に異常があるので言動がおかしい

perplexityに聞いて得た答えはバグありで使えないからでしょう

>>140
思いつきで2つの記事のURLを示してGeminiに
良く似てるけど同一人物の投稿である可能性を分析してと聞いてみた
すると案の定こちらの質問に寄り添ったハルシネーションだらけのデタラメ回答を返してきた
・書いてないUser Agentを捏造
・なぜかThunderbirdの質問になっている
・登場してないモデレータや常連回答者とのやりとりを捏造
・スクリーンショットとかブラウザのツールバーのカスタマイズってなんのこと？
など…
細かくプロンプトを重ねないと盛大にデタラメもりもりだよ

そういう質問はAIもこころよく思わないんじゃないかな

もういいよ！
E氏より前からの登録ユーザーなのね
であればあそこは同一人物の人格使い分けに厳しいの見てると思う
最近管理人は忙しくて放置してるのかも

AIに聞いたほうが早いよ
拡張機能のスクリプトで作ってとお願いすれば5分で完成

もう「もういいよ！」を名乗るべき

「何から始めますか？ 」

もういいよ！

もういいよ！

リリースノートのバージョン番号が微妙に揃っていない
微妙に気になるのでCSSで直した

https://pastebin.com/1TfBUhey
適用前 https://i.imgur.com/OaxLfSw.png
適用後 https://i.imgur.com/eECFlHZ.png

な、ガイジage厨だろ👆

ウインドウアクティブ時のタイトルバーの背景色をOSのテーマ色にしたいんですけど
どうすればいいですか？

すいません
取り下げます

多分150になってからだと思うけど、UI要素に対して backdrop-filter を適用できなくなった
例えば userChrome.css で

#statuspanel-label {
backdrop-filter: blur(20px) !important;
}

としても、リンクにマウスオーバーした時左下に出るあれにブラーがかからなくなった
backdrop-filter 自体が使えなくなってるわけじゃなく、Stylusで使う分には普通に使える

>>156
そのセレクタで、backdrop−filter 以外のスタイルは適用される？

backdrop-filterはUI要素で機能しないんだけど
#statuspanel-labelには効いてたのかな

独り言今日はcolor-scheme: light !important;を覚えた

>>157
backdrop-filter 以外は適用されてる
具体的には

#statuspanel-label {
background-color: light-dark(rgba(255, 255, 255, .7), rgba(32, 32, 32, .6)) !important;
backdrop-filter: blur(60px) brightness(90%) saturate(200%) !important;
}

で、背景色は変わるけどブラーその他がかからない

Firefox 151に更新したところ、

.urlbar-background {
background-color:#FFFFFF!important;
border-color: #B7B7B7 !important;
border-radius: 0px !important;
}

が効かなくなりました。

150まではURLバー全体を白化できていたのですが、151ではグレーのままです。
.urlbar-input-box だとアドレス入力部分だけは白くなるのですが、URLバー左側の検索アイコン周辺などはグレーのままで、border-radius も効きません。
どう直せばよいでしょうか？

そのままの文章をチャッピーに聞いたら答えてくれそうだけどな

>>161
うちはこれで効いてるが
#urlbar .urlbar-background{background-color:#FFFFFF!important;}

>>161
@namespace〜 書いてたりしない？

>>164
これが原因でした。
かなり昔に書いたままずっと残っていました。

消したところ、こちら >>163 のCSSで正常に動作しました。

初歩的な見落としで申し訳ありません。
教えていただきありがとうございました。

thx うちも残ってた

な、ガイジage厨だろ👆

/* タブの上部のライン */
.tab-background[multiselected],
.tab-background[selected] {
background: linear-gradient(to bottom, #0A84FF 2px, var(--toolbar-bgcolor) 0px) !important;
outline: none !important;
}
これが152.0で効かなくなった。助けてください