userChrome.css・userContent.cssスレ Part11
■ このスレッドは過去ログ倉庫に格納されています
!extend:checked:vvvvv:1000:512
次スレを立てる方は↑を二行重ねて書いてください
●※前スレ
userChrome.css・userContent.cssスレ Part10
http://egg.5ch.net/test/read.cgi/software/1571968384/l50
●拡張機能
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 教えて欲しいのですが、
全ての設定ファイルを削除してアプリを起動するとプロファイルフォルダー内に
xxx.default（times.jsonだけしか無い）
zzz.default-release（沢山のファイルが入っている）
と2つのフォルダがありました。
設定ファイルを削除するまでは前者の-releaseの付いてないフォルダだけでした。
userChrome.cssを使う場合zzz.default-release以下にchromeを作らないとだめないようですが、なぜxxx.defaultだけでなくzzz.default-releaseと2つのフォルダが出来てるのでしょうか？
1つにする方法（削除前の状態と同じ）はあるのでしょうか？ タイトルバーの色をWindows10以外の設定で色付けできませんかね？
Firefoxのみ黒色にしたいもんで
https://i.imgur.com/7AsuMH4.png >>558
1つにするだけなら、about:profilesを開いて、
「これは使用中のプロファイルです。削除できません。」って表示されてない方の削除ボタン押せばいいよ
もしここに1つしかプロファイル表示されなかったらエクスプローラから直接フォルダ削除していいよ
フォルダ名自体を元に戻したいなら、少し上の階層にあるprofiles.iniをいじらないといけないけど説明めんどい
てかuserChrome.css関係ないな
>>559
:is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
color: white !important;
background-color: black !important;
}
アクティブ時以外も黒くしたい場合は:not(:-moz-window-inactive)はずしてね >>560
レスありがとう。
確認してやってみます。 >>560
タイトルバーのカラー変更試みてましたがダメでした･･･ >>558
>なぜxxx.defaultだけでなくzzz.default-releaseと2つのフォルダが出来てるのでしょうか？
「すべての設定ファイルを削除」したことでそれまでのプロファイルを認識できない状態になり、
新しいプロファイルが自動的に生成されたものと思われます。
新しいプロファイルははデフォルトで default-release という名前が付けられるようになっ
ています。
>1つにする方法（削除前の状態と同じ）はあるのでしょうか？
古いプロファイルの xxx.default を削除すれば zzz.default-release だけのひとつになります。
プロファイルマネージャーからおこなうか、profiles.ini を編集すればよい。
大きなお世話：
「全ての設定ファイルを削除して」とあるが具体的にどのファイルを削除したんだ？
仕様やしくみも理解していないのにむやみにファイルを削除しないことだ。
userChrome.css は関係ない話だ。
質問する場所をよく考えろ。 >>563
「新しいプロファイルははデフォルトで」
を
「新しいプロファイルはデフォルトで」
に訂正します。 >>562
559見たらタイトルバーとタブバー分離してるんか、そりゃFxでやろうとしても無理だわ、よく確認してなくてすまんな
ただウインドウごとにタイトルバーの色変えるフリーソフトがあった気がする…10で動くかは分からないけど… いや勢いでできないって言っちゃったけど、独立タイトルバーよく扱い分からないから確かなことは言えんわ
まあ普通に考えてOSの範疇だと思うし、実際ブラウザツールボックスからもいじれないから無理な可能性が高いかな >>563
~/Library/Application Support/Firefox
~/Library/Caches/Firefox
~/Library/Preferences/org.mozilla.firefox.plist
~/Library/Saved¥ Application State/org.mozilla.firefox.savedState
以上が削除したファイルです。 >>566
丁寧にありがとうございます
少し方向性を変えて探ってみます。 >>557
調べたらjsでは使えるみたいだけど
cssエンジンにはまだ実装されてないね せっかくユーザーCSSでタブの標示を調節してあったのに
Faviconの高さ位置がおかしくなってしまった
タブの間もなんだかすきっぱになったし 使っている OS によって CSS の表示が異なる事ってありますか？
使っている Firefox は、同じ 91.0 で、OS が Win10 と Win8.1 です
適用している CSS は、以下のものです
/*ブックマークアイテムの高さを変える*/
.bookmark-item,
.bookmark-item > menupopup,
.bookmark-item > menupopup > menuitem {
padding-block: 0.1em !important;
}
Win10 では上記の CSS で丁度良いのですが、Win8.1 で同じように適用しても
アイテムの間隔があまり縮まりません。試しに 0.0em としてみても、Win10で
適用した時と違い、アイテムの間隔に隙間があります
同じ CSS を使ってWin10 と Win8.1 で同じようにする方法があれば教えて下さい
よろしくお願いします >>576
> 使っている OS によって CSS の表示が異なる事ってありますか？
.titlebar-button 絡みで #navigator-toolbox 周りに
osやテーマの違いでズレが生じたことはあるが
それ以外はどうだろな…
差異が生じるとすればフォント周りか？
単位を"em"じゃなく"px"で試してみて プルダウンメニューのアイテムの間隔はOSによって違ってますね
悩みの種です
2ではブックマークツールバーのプルダウンメニューが違ったものになるので
コンテキストメニューに対するcssの設定では、ブックマークツールバーのプルダウンメニューが同じようにならないばかりか、
設定の想わぬ副作用が出てきます、なんで実装を方式を変えたのでしょうね
設定の迷妄が更に広がります >>576
user_pref("browser.display.windows.non_native_menus", 0); // native (Win7/8.1)
user_pref("browser.display.windows.non_native_menus", 1); // non-native (Win10) 選択されてないタブの文字色って変えられませんか？
黒にしたい
何でシロナの >>580
ピンク色
.tabbrowser-tab:not([visuallyselected=true]) {color: pink !important;} >>577-579
レス有難うございます
教えて頂いた方法を試してみましたが、特に変わりはありませんでした
再度色々と試してみた所、>>576 の CSS が機能していないのを確認しました
CSS の記述を変更してFirefoxを再起動しても、表示が変わらず CSS が
機能していない事を確認しました
もちろん toolkit.legacyUserProfileCustomizations.stylesheets はEnableにしています
どこが悪いのか見当がつかず、迷宮入りとなりそうです… もしどうしてもwin10とwin8.1で同じプロファイル使いたいのなら、
userChrome.jsでUA判定して読み込むCSS分けるって方法はあるけど…そこまでする必要があるかは分からない
てかそもそも8.1の方で効くCSSがある訳でもないのか Protonにしたら
Youtubeのタブにスピーカーが標示されてうざい
about:configからの設定は反映されないし
いい方法ないですか >>584
>>579はwin10上と同じメニュー表示しにたかったら
browser.display.windows.non_native_menusを1にするって意味だぞ
OSネイティブ表示のまま高さ変えたいなら
appearance: none !important;
付けれ ブックマークツールバーでタブをピン止めすると、右のタブと間に大きな隙間が出来てしまって格好悪い
何とかならかな ブックマークツールバーでタブをピン止めする
わからん ワロタ、間違えた
タブバーでタブを右クリックしてピン止めした場合の症状です >>587
補足有難うございます
教えて頂いた事を試してみたところ、CSS への記述のみで問題は解決しませんでした
結果としては browser.display.windows.non_native_menusを1 にして試してみたところ
ブックマークアイテムの高さを CSS で調節する事が可能になりました
OS が違うと設定を変えないといけない場合がある事がわかりました
レスを頂いたみなさん、有難うございました アドレスバーと検索バーがアクティブ時は背景白色になるけど
非アクティブ時は灰色っぽいのが気に入らないんで非アクティブ時も白にするにはどうしたら良い？ >>594
ならないんだけど以前に何かいじってるとか？ >>594
自分はテーマをLightで使ってて枠の境目が見づらいから虫眼鏡の背景色は残してる
searchbar *|input,textarea {background-color:#FFFFFF!important;}
虫眼鏡の背景も白にするなら
searchbar{background-color:#FFFFFF!important;}
CSS初心者がやってることなので間違いがあるかも
ヒントにでもなれば OS側でアプリの色の設定がライトでFirefox側のテーマがシステムテーマの場合と
Firefox側のテーマがLightの場合は灰色になるはずだけど アプリの色設定はライト、FirefoxのテーマはNord Polar Night https://addons.mozilla.org/en-US/firefox/addon/nord-polar-night-theme/ 使ってるけど、
91にしたらURLバーからフォーカスが外れた時も背景色が変わらず白っぽい色のままになったので（検索バーでは起こらない）
toolbar#nav-bar #urlbar:not([focused="true"]) > #urlbar-background,
toolbar#nav-bar #urlbar > #urlbar-input-container {
background: #2E3440 !important;
}
これで色変えた >>596
検索バーは出来たありがとう
アドレスバーはurlbarで出来るのかと思ったけど出来なかった >>599
盾、鍵マークまで部分まで
#urlbar-input-container{background-color:#FFFFFF!important;}
盾、鍵マークの背景色は残す
#urlbar-input{background-color:#FFFFFF!important;}
CSS初心者がやってることなので弊害が出るかも >>601
うちでは両方変わってるんだけどな
初心者にはこれ以上は無理だわ Twitterのフォローのボタンを黒から青に戻すやつをお願いします cssでそれなりに昔のスタイルを温存した環境作れたのだが
browser.proton.enabled true だと
アクティブタブの上辺の線の描画とアクティブタブの背景色の設定がうまく行かない
ブックマークメニューのアイテム名が冗長になり視認性が落ちるのでアイコン復活のcssを使いしたのだが
アクティブタブの上辺の線の描画は、browser.proton.enabled false だとうまく行くのだけど
そうすると復活させたアイコン描画の無効になってしまう
弄繰り回して、アクティブタブの上辺の線の描画とアクティブタブの背景色の設定がうまくいくcssには漕ぎ付けたのだが
ハンバーガーメニューで、アイコンの項目名の間にスペースがなくなって見づらくなった
他にタブをピン止めするとその右に空白が出来て見栄えがよくない
とりあえず、整合性のある見栄えのcssを整えた
それに、アクティブタブの上辺の線の描画のcssを付け加えると
一番左のタブがアクティブになったとき上辺の線が線が見えなくなるという瑕疵がつきまとう、トホホ >>604
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-2yi16.r-1qi8awa.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr{background:#0af !important;} >>606,607
ありがとうございます！
元に戻ったー 非アクティブタブをマウスオーバーして上部に線を出したり
文字色を変えたりタブの色を変えたり出来るようになったんだけど
アクティブタブだと出来ない
どうやればいいんでしょうか？ その辺がうまく行かないな
今は妥協案として、アクティブタブの背景色を非アクティブタブより明るくし
マウスオーバーしたタブはその中間の明るさ背景色にしてマウスオーバー感が出るようにしている
だが、アクティブタブが一番左にあるとタブの上の線が描画されないので困ってる
タブを少しドラッグすると上辺の線が見えるのだが
また、アクティブタブの背景色も変えたいのだが、それも従来設定では効かなくなった >>610
.tabbrowser-tab[selected]:hover .tab-background {
box-shadow : 0 0 0 calc(var(--tab-min-height) * 0.5) [変えたい色] inset !important;
}
すごく邪道なやり方だけど >>612
ありがとうございます！
.tabbrowser-tab[selected]:hover を使ったら全部できたよ
/* アクティブタブ背景色(マウスオーバー) */
.tabbrowser-tab[selected]:hover .tab-background[selected] {background-color: white !important;}
/* アクティブタブ文字色(マウスオーバー) */
.tabbrowser-tab[selected]:hover .tab-text {color: blue !important;}
/* アクティブタブ上部の線(マウスオーバー) */
.tabbrowser-tab[selected]:hover .tab-background {border-block-start-color: deeppink !important;} タブのミュートボタンと複数のタブを閉じるの左のタブをすべて閉じるを消せませんかね >>615
タブのミュートボタン
.tab-icon-overlay { display:none !important; }
.tab-icon-sound { display:none !important; }
自分はタブのミュートボタンを使っていますが
YouTube、TVerで確認したら上記ので消えました
左のタブをすべて閉じる
#context_closeTabsToTheStart{display: none !important;}
CSS初心者がやってることなので弊害が出るかも 上記のでは駄目でした
自分の使ってるCSSと併用すると消えるのですが
.tab-icon-image:not([pinned]){opacity: 1 !important}
.tab-icon-overlay { display:none !important; }
.tab-icon-sound { display:none !important; }
でどうでしょうか >>618
自分の使っているCSSをすべて消して
試してみたけど両方消えてるんですよね
CSSいじり始めたばかりですが難しいです
お力になれず残念 モード違ってていろいろ違ってるかもしれんよ
お願いするときはモードも示せよ https://github.com/black7375/Firefox-UI-Fix
これ通知ウィンドウなんで透過させてんだろ
見にくくてしょうがないしfixになってない foxage2ch使っててサイドバーのフォントを変えたいんだけど
userChrome.cssにどう書き込んだらいいかな？
/*サイドバー*/
.sidebar-placesTreechildren {
font-family: 'BIZ UDPゴシック' !important;
font-weight: bold;
color: #595959 !important;
font-size: 14px !important;
}
で変わらなかった URLバーと検索バー境目が分り難いからちょっと濃いめのグレーにふち取りしたいんだけど、URLバーと検索バーのふちに色を付けることって可能？ >>623
拡張機能のサイドバーの中身はuserContent.css
調べるには about:debugging → この Firefox → 拡張機能 → [調査] ボタン
使い方はブラウザーツールボックスと同じ
まずフレーム選択ボタンで調査対象をサイドバーの中身にする
https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox#targeting_a_document >>624
分かり難いと思ったことないけどテーマによるのかな
こんなんでどう
#urlbar:not(:focus-within),
#searchbar:not(:focus-within) {
border: solid 1px #494d50 !important;
border-radius: var(--toolbarbutton-border-radius) !important;
} >>625
ありがとうございます
少し触ってみたのですがブラウザツールボックスも弄ったことがないので、フレーム選択ボタンがどれなのか分かりませんでした
https://i.imgur.com/D7kdIrX.png
の赤枠の部分がフレーム選択ボタンかと思いますが、以下の画面にそれっぽいボタンは見当たりませんでした
https://i.imgur.com/nyEtJlT.png >>626
有り難うございます
色だけ変更して理想的な見た目になりました >>627
存在していないものは選べないよ
調べたいサイドバーを開いた状態でないと サイドバーを開いてみたのですが、ボタンが表示されないみたいです
https://i.imgur.com/3k8z3iv.png >>630
ごめんわかんない
てっきりFoxAge5chだと思ってた、FoxAge2chなのね
Firefox 91で動くFoxAge2chってどこにあるの
AMOには無いしググっても見つけられなかったんだけど FoxAge5chってあるのか！そっちを知らなかった >>633
ども
WebExtensionとしてインストールするけどXULアドオンちっくな…どういう仕組みなんだろこれ
ともかく、ブラウザーツールボックスで調査できました
userChrome.css に書いてください:
@-moz-document url("chrome://foxage2ch/content/foxage2ch.xhtml") {
#mainTree,
#subTree {
font-family: 'BIZ UDPゴシック' !important;
font-weight: bold !important;
color: #595959 !important;
font-size: 14px !important;
}
} わざわざ調べてくださり有り難うございます
無事フォントを変更する事が出来ました Lepton を使っている方に質問があります
「Proton UI」を維持しつつ、タブやメニューを以前のスタイルっぽくしてくれる Firefox 用テーマ「Lepton」 ? GIGA！無料通信
https://www.gigafree.org/firefox/lepton/
Lepton を適用すると、履歴 → すべての履歴を表示 で表示される
ブラウジングライブラリー内の、管理 などのメニュー表示が、こちらでは
半透明になってしまうのですが、これはおま環でしょうか？
Lepton の適用を止めるとメニューの半透明化は直るので、Lepton の
不具合かと思うのですが、皆さんの所ではどうでしょうか？
宜しくお願いします チョンの作ったやつなんか使うなよ
気色悪いな もう 最新のLeptonだと、そもそも、履歴(S)とブックマークとブックマーク(B)が他とが違ってきている
だから、即刻、前のバージョンに戻した
元々の設定を表示するように戻したのかもしれないけど、何らかの取り残しが生じたようだ
メニューの仕立てには問題があった
91だと、メニューの背景色や区切り線に関するcssに副作用が出てこないのでそれを使っているけど
履歴(S)とブックマークとブックマーク(B)のプルダウンメニューと他では、はっきりした色の違いが出た
それなのに、僅か幾つかで元々の反転色か残る
反転色の違いは、管理のプルダウンメニューと同じになる
Leptonはプルダウンメニューのアイコン表示に便利だが
若干バグが含まれていて、不思議な現象が生じる
その副作用を取り除くことはなかなか困難 >>637
何も役に立つもの生産できないネトウヨが嫉妬するなよ
気持ち悪いなもう メニューに関しては、92から次の段階の迷走が始まる
そこでの問題をLeptopでは対応できてない
Leptonを導入するにも、ユーザーがそれまでに作った環境の放棄に値するほどでもない
つまり、おま環言われても相容れなければ意味は薄い
というのは、1/10程度の記述でアイコン以外の必要なことが実現できていたのだから
メニュー表示に関することで問題があるのは事実だ
メニューにアイコン付加するための最小限の副作用の起きないバージョンが望まれる >>640
レス有難うございます
おま環が分かっただけでも収穫です
使っているのは black7375 で最新だと思います
報告ってやっぱり英語ですよね？う〜むｗ 教えてください！
91の行間は改善したんですが
メニューバーのブックマーク等の背景色をグレーにするには
下記のCSSにどのように追記すれば良いですか？
/* ブックマークアイテムの高さを変える */
.bookmark-item,
.bookmark-item > menupopup,
.bookmark-item > menupopup > menuitem {
padding-block: 0.15em !important;
}
/* タブの間隔を狭くする */
.tab-background {
margin-bottom: 0 !important;
border-radius: 0 !important;
fabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
} 91までだね、92以降はブックマークツールバーのフォルダーのプルダウンメニューは別の施策が必要
/* コンテキストメニューの色の変更 */
menupopup {
-moz-appearance: none !important;
background-color: gray !important;
} >>645
「メニューバーのブックマーク等」がどの部分を
指してるか分からないがサイドバーじゃくツールバーなら
#toolbar-menubar,
#PersonalToolbar,
#TabsToolbar,
#nav-bar
{background-color: #ff0000 !important;}
あっちのスレでした質問を取り消して
スレを移動したこと書き込んだほうがいいぞ >>646
ありがとうございます
追記しましたがグレーになりませんでした
バージョンは最新の91.0.2です それぞれの環境、テーマなどの違いがあるから
>>647でも、試してみたけど、逆に、そちらではだめだったwww >>647
あっちはクローズしてきました <(_ _)>
https://i.imgur.com/S2BHMGl.png
改悪前は画像の色だったんですが黒っぽくなってしまいました ワロタ、>>647は自分のcssだと、記述場所を変えて、全部または部分で
メニューバーの色を変えるのに使えるにゃwww 見つけたのは
.menupopup-arrowscrollbox {background-color: grey !important;}
メニューの大部分に有効になってしまうが >>652
自分のは変化無しです
具体的に教えてください！ >>653
やってみましたが変化無しです
テーマの影響でしょうか？
Black Shine使ってますが改悪前はグレーでした >>654
申し訳ない
それは全然見当違いの場所に適用するやつです
>>653さんのやつでいけるみたいです >>655
テーマ Black Shine 入れて確認してみたけど下記のでいけますね
.menupopup-arrowscrollbox{
background-color:#ff0000!important;
}
カラーコードを調べて自分の好きなカラーを選んでで
「#ff0000」を書き換えてみても変化ありませんか？ ■ このスレッドは過去ログ倉庫に格納されています
