userChrome.css・userContent.cssスレ Part15

2025/08/23(土) 20:23:07.49

!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

2025/08/23(土) 20:23:40.59

●CSS有効化

userChrome.css / userContent.css を使う場合
about:config もしくは user.js で「toolkit.legacyUserProfileCustomizations.stylesheets」を「true」に設定

●自力で調べるには

Browser Toolbox
https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
https://web.archive.org/web/20220328185954/https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox
Select an element
https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/select_an_element/index.html
セレクタやプロパティなどはどうやって調べるの（例）
https://egg.5ch.net/test/read.cgi/software/1650551086/43

2025/08/23(土) 20:39:30.41

Browser Toolboxの使い方知るには自分で覚えないといけないんだよね

2025/08/28(木) 12:37:40.40

アクティブタブの背景色、非アクティブタブの背景色、非アクティブタブにマウスオーバーした時の背景色を
それぞれ指定したいのですが、記述を教えて下さい。。
テーマで変えてもしっくりくるものが無かったので、自分で色指定したいです。
　

2025/08/28(木) 13:59:17.27

自己対応完了

2025/09/01(月) 03:29:59.05

Yahooメールの本文の部分のフォントサイズを変更したいのですが、
どう変更したらいいでしょうか？
Googleメールみたいに、単にtextarea { font-size: 15px !important;}等と書いても適応されません

2025/09/01(月) 06:15:13.90

>>6
ちゃんと「調査」した？
本文で右クリック→「調査」

2025/09/01(月) 15:18:02.91

な、ガイジage厨だろ👆

2025/09/02(火) 19:24:17.14

uBlock OriginのYouTubeクルクル不具合
Distill Web Monitorのhttps://code.google.com/archive/で利用できない不具合
はよ直してほしい

2025/09/05(金) 22:07:13.62

タブのミュートアイコンを消す方法を教えてください。
ググった方法だと効果なかったので

2025/09/06(土) 06:44:03.56

ググった方法書かないと何がダメだったかわからんだろ

2025/09/06(土) 12:05:04.61

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) {
pointer-events: none !important;
}

と

.tabbrowser-tab[soundplaying]:not([pinned]) .tab-icon-image,
.tabbrowser-tab[soundplaying]:not([pinned]) .tab-throbber {
opacity: 0 !important;
}

.tabbrowser-tab[muted] .tab-icon-image,
.tabbrowser-tab[muted] .tab-throbber {
opacity: 1 !important;
}

.tab-icon-overlay[muted] {
list-style-image: none !important;
background-color: transparent !important;
}

と

browser.tabs.showAudioPlayingIconをfalse

これらはいずれも効果なしです。

2025/09/06(土) 12:50:47.50

>>10
.tab-audio-button { display: none !important; }

2025/09/06(土) 13:17:01.08

>>13
ありがとうございます。
消えました。

2025/09/06(土) 18:54:54.45

.urlbarViewを展開した時に一番下に表示される領域を消したいんですが消し方を教えてください

2025/09/08(月) 08:12:18.86

スタートメニューの履歴内「最近閉じたタブ」を非表示にするにはuserChrome.cssにどう書けばいいでしょうか？

2025/09/08(月) 09:31:28.10

言葉では伝わらない

2025/09/08(月) 18:47:18.94

>>16

#tm-content-undoCloseTab {
display: none !important;
}

2025/09/12(金) 22:08:39.44

urlバーにリロードボタン表示させる方法教えてください
ツールバーのカスタマイズからは見つかりませんでした
昔アイコンを表示させたり消したりしたような気がするんですがuserchrorme.cssにもそれらしいこと書いてないし
about:configでの設定等も教えて下さい

2025/09/12(金) 22:40:12.35

CSSではまともに移動できないからアドオン
Reload in address bar

2025/09/13(土) 06:32:56.04

ツールバーに区切りを配置したいけどなんで消しちゃったんだろ

2025/09/13(土) 08:51:07.17

ツールバーにタイトルつけられるようにしてほしい

2025/09/13(土) 12:29:29.04

間違えた　ブックマークの区切りに文字を入れられるようにしてほしい

2025/09/13(土) 12:52:40.38

userChrome.cssに記述する
@charset "utf-8";

*[label="目的とするセパレーターの直前のメニュー(メニューアイテム)のラベル名"]+menuseparator:after
{
content: "セパレーターに付加したい文字列";
margin-top: -0.5em;
margin-bottom: -0.5em;
}

2025/09/14(日) 07:32:36.41

/* URLバー内の★（ブックマーク）アイコンの色を変更 */
#star-button ,#editBookmarkPanelStarIcon {
fill: #A7C9FC !important;
}

ダークモードだと？ブックマークしてるサイトの★があまりに判別しにくいので
以前どこかでもらった、↑で色を変更したのですが
これを指定すると、ブックマークしてない通常のサイトの☆が↑の色で縁取りされるようになってしまいました。
この非ブックマークの☆は元のまま、もしくは色変更するにはどうすればいいでしょうか？

2025/09/14(日) 07:45:42.50

↑ダークモードだけに、いっそのこと縁取りの色、白FFFFFFにするのも手ですね・・

2025/09/14(日) 08:04:48.48

>>25
/* ブックマーク済 */
#star-button[starred]

/* 未ブックマーク */
#star-button:not([starred])

#editBookmarkPanelStarIcon は今はもう存在しないよ

2025/09/14(日) 08:14:22.37

>>27
早々にありがとうございます。バッチリできましたー

警備員[Lv.1][新警] (ﾜｯﾁｮｲ cf15-XVQY) · 2025/09/14(日) 08:56:45.70

明るいテーマと暗いテーマの色を変えることもできる

/* ブックマーク済 */
#star-button[starred] {
fill: light-dark(var(--toolbarbutton-icon-fill-attention), #A7C9FC) !important;
}

/* 未ブックマーク */
#star-button:not([starred]) {
fill: light-dark(black, #fff) !important;
}

**donguri!** (ﾜｯﾁｮｲ cfc8-mPtt) · 2025/09/15(月) 14:50:51.96

二つ教えてください。
いつからかわかりませんが、次の二つが効かなくなっていました。
どのように記述すればいいでしょうか

●ピン留めしたタブとピン留めしてないタブの間にある隙間をなくす
.tabbrowser-tab[first-visible-unpinned-tab="true"] {margin-left: 0px !important;}

●マウスオーバーでタブに閉じるボタンを表示（これがないと常時表示）
.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }

2025/09/15(月) 15:54:00.83

自分の環境だと
ピン留めタブと通常タブの間
#pinned-tabs-container {margin-inline-end : 0px !important;}

マウスオーバーでタブに閉じるボタンを表示は同じ記述のものできいてる

2025/09/15(月) 16:46:53.43

>>30
/* タブにマウスオーバーで閉じるボタンを表示 */
.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }

2025/09/15(月) 18:50:24.76

>>31
ありがとう　治りました。
>>32
ありがとう　残念ながら変わらずでした。

2025/09/15(月) 19:00:09.39

連投すみません。
タブの閉じるボタンを消す記述がおかしくなってました。
お騒がせしました。

2025/09/16(火) 12:32:00.60

ブックマークフォルダのアイコンの色を昔の黄色いのにしてたんですけどフォルダの中のフォルダの色が白くなってしまってどこ修正したらいいんでしょう

2025/09/16(火) 17:05:43.87

143にアップデートしたら>>35さんと同じ状況になりました

怒られたので改行しています

/* FF88までのブックマークフォルダ黄色(#FFCC00) */
.bookmark-item[container], treechildren::-moz-tree-image(title, container) {
list-style-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZml
sbD0iI0ZGQ0MwMCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGg
gZD0iTTE0LjUgM0g2LjkxNGEuNS41IDAgMCAxLS4zNTQtLjE0Nkw1LjE0NiAxLjQzOUExLjQ5MSAxLjQ5MSAwIDAgMCA0LjA4NiAxSDEuNUExLjUgMS41IDAgMCA
wIDAgMi41djExQTEuNSAxLjUgMCAwIDAgMS41IDE1aDEzYTEuNSAxLjUgMCAwIDAgMS41LTEuNXYtOUExLjUgMS41IDAgMCAwIDE0LjUgM3ptLjUgMTAuNWEuNS4
1IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWNmgxNHpNMSA1VjIuNWEuNS41IDAgMCAxIC41LS41aDIuNTg2YS41LjUgMCAwIDEgLjM1NC4xNDZsMS4
0MTQgMS40MTVBMS40OTEgMS40OTEgMCAwIDAgNi45MTQgNEgxNC41YS41LjUgMCAwIDEgLjUuNVY1eiIvPg0KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCA
xLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWNmgxNHoiIGZpbGwtb3BhY2l0eT0iLjIiLz4NCiAgPHBhdGggZD0iTTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWg
yLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiIGZpbGw
tb3BhY2l0eT0iLjEiLz4NCiAgPHBhdGggZD0iTTE1IDEzLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjEzaDE0eiIgZmlsbC1vcGFjaXR
5PSIuMDUiLz4NCjwvc3ZnPg==') !important;
}

警備員[Lv.6][新] (ﾜｯﾁｮｲ cf15-XVQY) · 2025/09/17(水) 11:12:08.30

これを追加
画像データ省略してあります

.bookmark-item[container] > :is(.menu-icon, .toolbarbutton-icon) {
content: url('data:image/svg+xml;base64,xxxxxxxxxxx') !important;
}

2025/09/17(水) 14:22:14.66

>>37
ありがとうございます

2025/09/17(水) 15:36:34.78

>>37
ありがとうございます

ただ、サイドバー → ブックマークのアイコンに色が付かなくなってしまいました

警備員[Lv.8][新] (ﾜｯﾁｮｲ cf15-XVQY) · 2025/09/17(水) 15:43:52.64

>>36のcssも使うのでこれに追記します

2025/09/17(水) 16:22:05.59

>>40
何度もすみません
出来ましたありがとうございました

2025/09/17(水) 16:26:38.34

URLバーが白系統の色にできないんですけどこれであってますよね？
黒とか灰にはできたのですが

#urlbar {
background-color: #ffffff !important;
}

2025/09/17(水) 16:52:11.19

>>42
これはどうですか

#urlbar-background{
background-color: #FFFFFF !important;}

2025/09/17(水) 16:53:51.62

>>43
効いてませんでした
すみません

2025/09/17(水) 17:09:34.64

>>43
自分も気になって作業してたとこですが

背景色
.urlbar-background {background-color:#FFFFFF!important;}

枠をつける
.urlbar-background {border-color: #696969 !important;}

2025/09/17(水) 18:05:35.24

>>45
ありがとうございます、白にできました

2025/09/17(水) 18:15:09.76

な、ガイジage厨だろ👆

2025/09/17(水) 21:16:13.08

タブをタスクバーに追加を無効にする方法を教えてください。

2025/09/17(水) 21:22:16.08

自己解決しました。

2025/09/17(水) 22:47:44.62

about:configにそれっぽい項目が見あたらないのでuserChrome.cssで

/* アドレスバー内の「タブをタスクバーに追加」を消す */
hbox#taskbar-tabs-button { display: none !important; }

2025/09/17(水) 23:00:47.41

browser.taskbarTabs.enabled

2025/09/17(水) 23:16:59.57

>>51
ありがとう

2025/09/18(木) 04:20:41.23

>>51
よこからありがとう

2025/09/19(金) 13:38:09.88

https://i.imgur.com/f2BdHRz.png

ダウンロードしてる時の↑このアイコンの
進捗部分の色って変更できますでしょうか？

警備員[Lv.7][新芽] (ﾜｯﾁｮｲ cf15-XVQY) · 2025/09/19(金) 14:13:11.69

/* Changing Download Progress Bar Color */
#downloads-indicator-progress-inner {
--toolbarbutton-icon-fill-attention: #f00 !important;
}

2025/09/19(金) 15:30:42.03

>>55
https://i.imgur.com/pSN4V39.png

ありがとうございますーできましたバッチリです。

2025/09/19(金) 23:25:57.24

143.0.1
#urlbar-background

なんか挙動がおかしくなった

2025/09/19(金) 23:48:37.62

#urlbar .urlbar-background
これで直った

いちいち意味のわからん修正入れるのやめてほしいわ

2025/09/20(土) 10:40:38.23

[container] も効かなくなったな

Firefox 143.0.0

.bookmark-item[container] {
list-style-image: url(data:image/png;base64,...your icon...) !important;
}

Firefox 143.0.1移行　
UI構造が二層化されてるので二重で指定

.bookmark-item[container="true"] {　/* 真偽値を追加 */
list-style-image: url(data:image/png;base64,...your icon...) !important;
--bookmark-item-icon: url(data:image/png;base64,...your icon...) !important;　/* これを追加 */
}

2025/09/20(土) 13:02:41.99

143.0.1
ファイルをダウンロードした後の「↓」アイコンと、それをクリックして現れるメニューの「ダウンロードを完了しました」の文字の色を
青から黒に変えるにはどうしたらいいですか？

2025/09/22(月) 08:04:51.46

以前、この過去のスレッドでファビコンを取得していない条件でアイテムが地球儀アイコンの場合をscheme別に変える方法ご教示していただきました
ですが143にしたら効かなくなってしまいまいした

:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="https"] image, .bookmark-item[scheme="http"] image{
background: url(data:image/png;base64,...your icon...)) 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{
background: url(data:image/png;base64,...your icon...)) center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}

ちなみにschemeに拘らなければ下記の記述で大丈夫なのですが

.bookmark-item:not([container]):not([livemark]):not([query]) > .toolbarbutton-icon,
.bookmark-item:not([container]):not([livemark]):not([query]) > .menu-icon{
background: url(data:image/png;base64,...your icon...)) !important;
background-size: 16px !important;
width: 0px !important;
padding-left: 16px !important;
}

2025/09/22(月) 11:16:46.03

>>60
#downloads-button {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
fill: blue !important;
}
#downloadsSummaryDetails, .downloadDetails {
color: red !important;
opacity: .6 !important;
}

2025/09/22(月) 17:34:49.16

>>61
schemeに従い、httpsとhttpのサイトアイコンを変えることはできるけど、
ファビコンを取得したサイトアイコンのあるhttpsとhttpを除き、
ファビコンの無いhttpsとhttpのみ地球儀アイコン変えるのは難しくないですか。

2025/09/22(月) 19:17:19.47

googleやyahoo等の検索ボックスの右クリックメニュー
「AIチャットポットに尋ねる」を非表示にするにはどう書けばいいでしょうか？

64 (ﾜｯﾁｮｲ ae30-wBym) · 2025/09/22(月) 19:55:44.25

すいません、ググったらすぐ見つかりました
#context-ask-chat { display: none !important; }で消えてくれました

2025/09/22(月) 21:05:37.68

>>62
ファビコンはuser.jsに
user_pref("browser.chrome.site_icons", false);
これで取得しないようにしいます。
また
↓これもFF142までは問題なく動作していたのですよね
:root {--my-favicon-size: 16px;}
.bookmark-item[scheme="javascript"] image{
background: url(data:image/png;base64,...your icon...)) center/var(--my-favicon-size) no-repeat !important;
padding-left: var(--my-favicon-size) !important;
}