X



userChrome.css・userContent.cssスレ Part8
■ このスレッドは過去ログ倉庫に格納されています
0001名無しさん@お腹いっぱい。
垢版 |
2017/12/14(木) 00:29:24.23ID:XdBerJGV0
●前スレ
userChrome.css・userContent.cssスレ Part7
http://egg.5ch.net/test/read.cgi/software/1510394098/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager
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
https://greasyfork.org/scripts/35880

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

●関連サイト
userstyles.org
https://userstyles.org/

MDN - CSS
https://developer.mozilla.org/ja/docs/Web/CSS

とほほのスタイルシート入門
http://www.tohoho-web.com/css/
0231229
垢版 |
2018/01/25(木) 11:53:50.82ID:sI9c8Lyb0
>>230
ありがとう。勉強になった。
それを読む限りの理解だけれど,Firefox側の考えとしては,
「タブの領域は一つのブラウザの中で一つだけである。
その領域の中に個々のタブが入っている。
だからタブの領域はIDとして,個々のタブはクラスとして指定するように」
ということなのかな?

Web畑の人間じゃないのでCSS哲学はあまり分からないのだけれど,
今回の改変は良い方向だと思ったわ。
0233名無しさん@お腹いっぱい。
垢版 |
2018/01/25(木) 19:52:06.69ID:nprBWPYm0
58にしたら#TabsToolbarと#nav-barの間にボーダーが入っちゃたんだけど
border : none !important; とかやっても消えないし
どうやったら消えるんだ
0234名無しさん@お腹いっぱい。
垢版 |
2018/01/25(木) 22:45:57.72ID:nprBWPYm0
>>233
自己解決
borderじゃなくてbox-shadowのラインだった
#nav-bar { box-shadow : none !important; }
ついでにタブ幅の設定が上手くいかないのも
:root { --tab-min-width : 150px !important; } /* 初期値書き換え */
で強制的に書き換えちゃった
0236名無しさん@お腹いっぱい。
垢版 |
2018/01/26(金) 15:02:47.07ID:TT4EiBZW0
URLボックスと検索ボックス周りのうっすらな影って消せますか?
0239名無しさん@お腹いっぱい。
垢版 |
2018/01/27(土) 02:01:09.10ID:BbN1eWpB0
>>238
一覧よりもブラウザーツールボックス使った方が良いよ
疑似セレクタで挙動が変わったりもするし
バージョンアップで割と変更もあるから
0242名無しさん@お腹いっぱい。
垢版 |
2018/01/27(土) 12:16:55.50ID:1uWmytg00
#TabsToolbar .titlebar-placeholder{ display:none !important; }
にしてたんだけどプライベートブラウジングとかタブ一覧(∨)のiconが右端にいくから調べてたら
タブバーの最期にも同じくプレースホルダーがあったのね
ってことで、クラスに[type="pre-tabs"] 追加で直ったわっしょい
0243名無しさん@お腹いっぱい。
垢版 |
2018/01/28(日) 00:23:45.72ID:o78iA2H50
userstyles.orgのスタイルの更新をRSSフィードで知れるようにはできないものかなあ
あと、Dark〜とかBlack〜みたいなサイトを黒くするだけどスタイルの多さには辟易する
0244名無しさん@お腹いっぱい。
垢版 |
2018/01/28(日) 13:43:03.73ID:FIUqMGlL0
タブの文字列を上に3pxあげたいのですが以下で効かないのですがなんででしょう…?
.tab-text {padding-bottom 3px !important; }
.tab-throbber, .tab-icon-image {padding-left 3px !important; }
0245名無しさん@お腹いっぱい。
垢版 |
2018/01/28(日) 15:46:08.63ID:lrqvwFUT0
>>244
めちゃくちゃだからです
0247名無しさん@お腹いっぱい。
垢版 |
2018/01/28(日) 19:55:57.65ID:wpcyCPfj0
margin 外側の余白
border 境界線
padding 内側の余白

間に境界線があると考えればわかるんじゃない
0248名無しさん@お腹いっぱい。
垢版 |
2018/01/28(日) 21:09:56.69ID:UJzZaxgo0
Firefox Developer Edition 59.0b4、なんか時偶 userContent.css が有効にならないときがあるな。
同じページを閉じて、終了・再起動・再読み込みすると直る。
Firefox 無印、Firefox 準安定板、Firefox 最新不安定版ではそんなことはない。
userContent.css を編集したあと、ブラウザを再起動すればきちんと変更を受けている。
0250名無しさん@お腹いっぱい。
垢版 |
2018/01/30(火) 08:22:08.71ID:Q2NaRZyk0
コンテクストメニューの
← → ↻ ☆
っていう項目の高さを他の項目に合わせて、かつアイコンを画像じゃなくて上記の文字そのものにしたい。
ヒントをください……
0251250
垢版 |
2018/01/30(火) 10:22:47.06ID:Q2NaRZyk0
#contentAreaContextMenu #context-navigation .menuitem-iconic
{
height: 26px !important;
list-style-image: none !important;
}
↑これで高さはいけた (「26px」っていう固定値にしてるのが嫌だけど、Firefoxが持ってるCSS変数に--menuitem-min-heightみたいな値がないので仕方無く)
けど、↓これで「戻る」メニュー項目が「←」にならない……。::before疑似要素のcontent属性に「←」を定めれば目的は達成できるんだけど、
位置ずれるし、なんか折角文字が指定できる属性が用意されてるのにできないってのも引っ掛る。
#contentAreaContextMenu #context-navigation #context-back
{
list-style-type: "←" !important;
}
0253名無しさん@お腹いっぱい。
垢版 |
2018/01/30(火) 11:53:29.13ID:JMlqQ8wN0
>>250
#context-navigation > .menuitem-iconic {
font-size: 16px;
}
#context-navigation > .menuitem-iconic > .menu-iconic-left {
min-width: 0 !important;
}
#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
#context-back:before {
content: "←";
}
#context-forward:before {
content: "→";
}
#context-reload:before {
content: "↻";
}
#context-stop:before {
content: "×";
}
#context-bookmarkpage:before {
content: "☆";
}
0254名無しさん@お腹いっぱい。
垢版 |
2018/01/30(火) 12:11:06.39ID:JMlqQ8wN0
>>253
表記が冗長だったはずかしい

#context-navigation > .menuitem-iconic {
font-size: 16px;
}
#context-navigation > .menuitem-iconic > .menu-iconic-left {
display: none;
}
#context-back:before {
content: "←";
}
#context-forward:before {
content: "→";
}
#context-reload:before {
content: "↻";
}
#context-stop:before {
content: "×";
}
#context-bookmarkpage:before {
content: "☆";
}
0255名無しさん@お腹いっぱい。
垢版 |
2018/01/30(火) 13:31:30.93ID:7BNhPTVg0
質問です。

Googleの画像検索をしてると「リダイレクトの警告」というがいつも出てきます
普通の検索では出ないのに画像検索 "だけ" 出てくるのです。

ネットで調べてスパムを疑って念入りに調べたり
Cookie(あるいは履歴)や一時ファイルなどをすべて削除したり
いろいろ調べて手は尽くしましたがダメでした。
最終的には「Google search link fix」というアドオンを使い表示させなく出来ましたが
userChromeでもこれと同じことが出来る方法を
誰か知ってるのであれば教えてほしいと思い投稿しました。

暇な時でいいのでヨロシクお願いします。 <(_ _)>
0256名無しさん@お腹いっぱい。
垢版 |
2018/01/30(火) 13:41:42.96ID:6Co0TQjG0
google.co.jpのクッキーをブロックしてるとリダイレクトの警告出るよ
なんらかのアドオンがブロックしてるんじゃない?
とりあえずセーフモードでも警告出るか試してみるとかね
0258名無しさん@お腹いっぱい。
垢版 |
2018/01/30(火) 22:25:38.64ID:7BNhPTVg0
>>256
クッキーはブロックしてないのですが
セーフモードにすると問題なく画像検索できるのでアドがいたずらしてる可能性が高いかも…
もう少しあがいてみます。
ヒントありがとうございました。

>>257
removeRedirect4Googleは入れてないです。
でも、知っておけば今後何かで役に立つかもです
教えてくれてありがとうございました。
0259名無しさん@お腹いっぱい。
垢版 |
2018/01/30(火) 23:30:08.31ID:7BNhPTVg0
悪さしてたアドが判明

Searchonymous

コイツでした (;´Д`A

みなさん、いろいろいろいろお世話おかけしました。
ありがとうございました <(_ _)>
0260名無しさん@お腹いっぱい。
垢版 |
2018/02/01(木) 01:33:42.45ID:XvsOZiVN0
userContent.cssに、
@-moz-document
domain("mevius.5ch.net"),
domain("egg.5ch.net"),
domain("mao.5ch.net")
{
.message
{
font-family: "IPA モナー Pゴシック", "IPAMonaPGothic", sans-serif !important;
font-size: 12pt !important;
line-height: 14pt !important;
letter-spacing: normal !important;
}
}
とやってAA表示が綺麗になるようCSSを書いているのですが、フォントが適用されません。サイト側の既定のフォントのままです。
about:preferenceの「Webページが指定したフォントを優先する」は関係ないようです。どなたか手助けを……
なお、上記CSS自体はcolor: red;を追記して反映されたことから文法としては正しいようです。
0261名無しさん@お腹いっぱい。
垢版 |
2018/02/01(木) 02:30:37.94ID:6tNyTeRs0
>>260
StylishModokiで適当なフォント名を指定して試したら効いた
なのでfont-family名の指定に問題があると思われる
フォントがインストールされてるかとか、フォント名が正しいかとか
0263名無しさん@お腹いっぱい。
垢版 |
2018/02/01(木) 17:51:07.48ID:XvsOZiVN0
>>261さま、>>262さま、ありがとうございます。

>>261
> StylishModokiで適当なフォント名を指定して試したら効いた
そうですか……
Debian GNU/Linux を使っているのですが、
$ fc-list | grep "IPAMonaPGothic"
がきちんとパス名を返して正常終了しますし、GUIエディタ等のフォント選択画面にも
「IPA モナー Pゴシック」が表示されていて、選択するとその字形になるので
システム自体はフォントを認識していると思います。
>>262
はい、テキストエンコードはBOM無しのUTF-8です。

アドオンを無効にしたりしてみたんですが、やはりフォントの形状だけ適用されませんね……
なぜだ……
0265名無しさん@お腹いっぱい。
垢版 |
2018/02/01(木) 20:17:08.90ID:xw5Yh3o80
>>263
@-moz-document domain("egg.5ch.net") {
.message {font-family: "IPA モナー Pゴシック" !important;}
}
Win7だけどダウンロード、インストールしてFirefox再起動したら上で行けた
0267名無しさん@お腹いっぱい。
垢版 |
2018/02/02(金) 10:59:29.08ID:fKqRjxli0
タブがアクティブになると少し高くなるのですが
高くさせない方法ありますか?
0268名無しさん@お腹いっぱい。
垢版 |
2018/02/02(金) 11:48:57.45ID:fKqRjxli0
解決しました
0269名無しさん@お腹いっぱい。
垢版 |
2018/02/02(金) 11:59:33.26ID:7hpjo1+D0
アクティブタブで思い出したが現在のタブって
#tabbrowser-tabs .tabbrowser-tab[selected="true"]
じゃなくて
.tab-background[selected="true"],
.tab-line[selected="true"]
でないと指定できないんだよね。
これ、リモートデバッガ (?; S-C-A-iで開くやつ) で見ても分からなくて、
ググったら同じような質問のフォーラムがヒットしたからいいものの、
普通に詰むところだったわ。
0270名無しさん@お腹いっぱい。
垢版 |
2018/02/02(金) 12:51:55.68ID:W+iUKBJx0
>>269
え?#tabbrowser-tabs .tabbrowser-tab[selected="true"]でできてるけど
ラインとかはその子要素で指定されてるからその指定がいるだけで
0271名無しさん@お腹いっぱい。
垢版 |
2018/02/02(金) 13:10:47.89ID:VTPvVAty0
>>263
セレクターを
.message,
.message > *
にしてみたらどうだろう

たぶん userContent.css のどこかに
* { font-family: sans-serif !important }
こういうのを書いていて、
div.message の子要素の span.escaped に一致したこっちが優先されているんじゃないかな

対象要素をコンテキストメニューの「要素を調査(Q)」で開けば
どのスタイルシート由来のどの宣言が適用されているか確認できるよ
https://i.imgur.com/reBo3Lt.png
他が優先されて効果のなくなっている宣言には、打ち消し線が付く
実際に使用されているフォントの確認は「フォント」タブ
0272名無しさん@お腹いっぱい。
垢版 |
2018/02/02(金) 18:55:06.20ID:uL/5CfQf0
ツリー型タブが表示されている時はタブバーを隠し、
ブックマークサイドバーが出るなどしてツリー型タブが非表示の時はタブバーを表示するというようなことは可能でしょうか?
0273名無しさん@お腹いっぱい。
垢版 |
2018/02/03(土) 18:43:23.48ID:bjnb/3u40
FirefoxPortable57の時URL窓と検索窓の高さが変わるCSSを使ってたのですが
FirefoxPortable58を新しく入れてそのCSSを書くと同じように高さが変わるのですが
このページをブックマークに追加します、Pocketに保存、ページ操作のアイコンが小さくなってしまいます
なんとかならないでしょうか もしくは他の書き方があったらお願いします
#urlbar,
.searchbar-textbox {
font-size:13px;
min-height: 19px !important;
max-height: 19px !important;
}
0274名無しさん@お腹いっぱい。
垢版 |
2018/02/03(土) 22:37:26.40ID:Pyx8C9cA0
タブの右クリックメニューに「左側のタブをすべて閉じる」を追加するcssがあったら教えてください。
0275名無しさん@お腹いっぱい。
垢版 |
2018/02/03(土) 23:22:13.08ID:Fqk5q/Ll0
>>274
cssだけでは無理なので
closeTabsFromTheBeginning@zbinlin.uc.js
というuserChrome.js用スクリプトに頼るか
またはESRに移行して該当機能のあるレガシーアドオンに頼るか
0278名無しさん@お腹いっぱい。
垢版 |
2018/02/04(日) 04:01:22.05ID:XvN3PBx50
>>275
closeTabsFromTheBeginning@zbinlin.uc.js
でできました。
調べたところ,日本語表記の「左側のタブをすべて閉じる」に変更することもできました。
ありがとうございました。

>>276
紹介,ありがとうございました。
0279名無しさん@お腹いっぱい。
垢版 |
2018/02/05(月) 13:10:53.92ID:G5e+1RH90
ブックマークボタン押して一番下に出てくる全てのブックマークを表示ってのを消したいんだけどどうすればいいの?
下のやつだと上に出る奴しか消せなかった・・・

#BMB_bookmarksPopup #BMB_bookmarksShowAllTop,
0281名無しさん@お腹いっぱい。
垢版 |
2018/02/05(月) 23:40:38.41ID:NfYxF0SF0
ツリー型タブを色々イジってマウスオーバーでサイドバーを展開するようにしているんだけど
ピン留タブが拡大縮小サイズに合わせて整列する動きをするので他のタブが動いて使いづらいのでタブが追従して動がないようにしたいんだけど方法はあるのかな?
0282名無しさん@お腹いっぱい。
垢版 |
2018/02/11(日) 12:36:03.50ID:1vJDRHqs0
Firefox57のブックマークを元の色に戻す
https://00.bulog.jp/archives/228

win10の58では黄色になるのですがlinux mint mateの58だと
フォルダが表示されずスペースが空いてしまいます
おま環ですかね、ubuntu系の方々いかがでしょうか?
0284282
垢版 |
2018/02/11(日) 12:48:15.86ID:1vJDRHqs0
>>283
レス速っ ありがとう
後でやってみるね
0285284
垢版 |
2018/02/11(日) 14:27:18.26ID:1vJDRHqs0
>>283
やってみた。 おま環だわ、きっと。
/* 金色 */ だけはうまくいったけどあとはダメ。
下部のabout:configもダメ。
ただ...これやると他のcss設定が効かなくなる。ぱっと見で
/* サイドバーヘッダースリム化 */
/* サイドバーサーチ部スリム化 */
/* URLバー内の青色星アイコンをグレイ色に変更 */ など。

win10はフォルダの色だけちゃんと反映されたのでwinで使わせてもらいます。
あの黄色いiconよりいいね。mintはグレーで我慢します。
0286名無しさん@お腹いっぱい。
垢版 |
2018/02/11(日) 14:56:11.22ID:USxmi3o80
>>282
/***ブックマークメニューとブックマークツールバーのフォルダアイコンを以前の黄色に戻す***/
/* ブックマークメニュー */
@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul) {
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open) {
list-style-image: url("chrome://global/skin/icons/folder-item.png")!important;
-moz-image-region: rect(0px, 32px, 16px, 16px)!important
}
}
/* ブックマークツールバー */
.bookmark-item > .toolbarbutton-icon,
menu.bookmark-item:not([query]):not([label="ブックマークツールバー"]):not([label="他のブックマーク"]) {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}
0287282
垢版 |
2018/02/11(日) 16:00:38.91ID:1vJDRHqs0
>>286
どーもありがとう
mintだとやっぱり消える
これもwin10だといいんだけどね
0295名無しさん@お腹いっぱい。
垢版 |
2018/02/12(月) 00:09:47.51ID:OUKARyWT0
    ____
 ____(^o^)____ < 退化、トッホッホ
 | レ{ V }し |
 |\⌒⌒⌒ \
 \| ⌒⌒⌒⌒|
    ̄ ̄ ̄ ̄
0297282
垢版 |
2018/02/12(月) 10:29:28.28ID:dJzz/NUf0
>>296
おはよう
色付いたよぉ!
全体的にカラフルになった。
このuserChrome.cssに今までの記述を張り付けてみたけど
だいたい反映されるみたいだね。
どーもありがとう!!
0298名無しさん@お腹いっぱい。
垢版 |
2018/02/12(月) 14:40:16.94ID:WFtlJtNM0
>>297
>全体的にカラフルになった。
この userChrome.css の90行目付近で
  /* @import url(./css/buttons/icons_colorized.css); /**/
さらに、77行目付近で
  /* @import url(./css/buttons/buttons_on_navbar_classic_appearance.css); /**/

とか、340行目付近の
  @import url(./css/generalui/bookmark_icons_colorized.css); /**/
この行以外を、バッサリ削除とか


>このuserChrome.cssに今までの記述を張り付けてみたけど
好きずきだけど、作者的には userChrome.css の最後で
  /* Create a new file "my_userChrome.css" and add own/custom code to it. ...****/
  @import url(./my_userChrome.css); /**/
を推奨している?

ウチの "my_userChrome.css"
/* タブタイトルのボカシをキャンセル */
@import url(./css/tabs/tab_titles_remove_blur.css); /**/
/* タブ内の余白を調整 */
.tab-content { padding: 0 3px 0 7px !important; }
.tab-content:not([pinned]):hover { padding: 0 9px 0 7px !important; }
.tab-icon-image:not([pinned]) { margin-inline-end: 2px !important; }
0299297
垢版 |
2018/02/12(月) 15:24:58.01ID:dJzz/NUf0
>>298
おぉ どーもありがとう。
css解らないんで助かったよぉ

三時のお茶です
つ旦
0301名無しさん@お腹いっぱい。
垢版 |
2018/02/15(木) 20:15:46.12ID:8RsS0xA80
初心者な質問ですみません
このスレのuserChrome.css・userContent.cssは,みなさんfirefoxをカスタマイズしているのでしょうか?
最近firefoxからChromeに乗り換えたのですが,ChromeのStylusでスレ上のcssを利用してUIをカスタマイズすることは可能でしょうか?
0304名無しさん@お腹いっぱい。
垢版 |
2018/02/19(月) 20:44:51.01ID:CiZED/yK0
需要はほとんどないかもしれませんが

/*** タブタイトルと同じようにアクティブタブをぼかす ***/
#TabsToolbar .tabbrowser-tab[selected="true"] .tab-background {
mask-image: linear-gradient(to left, transparent, black 1em)!important;
}
0307305
垢版 |
2018/02/21(水) 02:15:43.28ID:4BVTpkjK0
>>306
ありがとうございます
おかげさまで邪魔なのは消えました
あと名残の薄い四角い囲み線が残ってるので
それもスッキリ消せないか試行錯誤してみます
0310名無しさん@お腹いっぱい。
垢版 |
2018/02/21(水) 06:15:40.59ID:XL6GL0Ea0
ちょっと聞くけどuserChrome.cssとかuserContent.cssをChromeフォルダにぶっこんで使えばStylishとか使わなくても動くって事なの?
0312名無しさん@お腹いっぱい。
垢版 |
2018/02/21(水) 11:41:49.19ID:B479HYcQ0
>>310
アドオン入れたほうが管理、編集効率が飛躍的に上がるけど無くてもいける
俺はXP時代の軽量化重視の癖が抜けなくて未だにアドオンなしで使ってるわ
0318名無しさん@お腹いっぱい。
垢版 |
2018/02/24(土) 14:49:07.84ID:iyHyXqIw0
58.0.2を使っています。

userChrome.cssに
http://mozilla-remix.seesaa.net/article/111361523.html
を記述し,検索バーの履歴をクリックで表示させる▼を表示させていましたが,いつからか表示されなくなりました。
https://babooshka-innerjourneys.blogspot.jp/2012/06/firefox_26.html
に変えてみましたが,やはり▼が表示されません。
何か,仕様が変わったのでしょうか?
0319名無しさん@お腹いっぱい。
垢版 |
2018/02/24(土) 14:51:23.87ID:iyHyXqIw0
追記
もちろん,検索バーにフォーカスを移動し,↓を押下すれば検索履歴は表示されますし,選択もできます。
キーボードでの↓押下をマウスでのワンクリックで済ませたいのです。
0322名無しさん@お腹いっぱい。
垢版 |
2018/02/24(土) 17:35:33.69ID:RMhTlU5L0
このアドオンで日時を表示するところの背景を透過したいのですが、
アドオン自体のCSSを変更しても適用されないようです。
userChrome.cssかuserContent.cssに記述しなければいけないでしょうか。

FoxClocks
https://addons.mozilla.org/ja/firefox/addon/foxclocks/
0323名無しさん@お腹いっぱい。
垢版 |
2018/02/24(土) 19:20:00.39ID:iyHyXqIw0
>>321
レス,ありがとうございます。
ご紹介いただいたものは,以前試してみましたが,私の環境では▼が表示されませんでした。
このたび,改めてダウンロードしてみましたが,中身も同じで,やはり▼は表示されませんでした。
userChrome.cssから,>>318の記述は削除してあります。
0325名無しさん@お腹いっぱい。
垢版 |
2018/02/24(土) 19:22:38.43ID:iyHyXqIw0
>>323
申し訳ありません。動きました。
▼が表示されるのではなく,左端の虫眼鏡をダブルクリックするんですね。
もっと調べてから書き込むべきでした。ありがとうございました。
■ このスレッドは過去ログ倉庫に格納されています

ニューススポーツなんでも実況