userChrome.css・userContent.cssスレ Part8

1名無しさん@お腹いっぱい。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/

624名無しさん@お腹いっぱい。2018/07/04(水) 19:51:45.42ID:ubzSaWBf0
>>623
あまり代わり映えしないので下記にします。
#TabsToolbar { margin-left: -38px !important; min-height: 30px !important; height: 30px !important;}
.tabbrowser-tab:not([pinned]) {
min-height: 30px !important;
max-height: 30px !important;
}

625名無しさん@お腹いっぱい。2018/07/05(木) 11:37:28.06ID:+sw8viMa0
52ESRでCTR使っててそろそろWEに移行を考えているんだけど、
このスレではCTRの作者が作っているCustom CSS tweaks for Firefox Quantumは使わないの?
https://github.com/Aris-t2/CustomCSSforFx

626名無しさん@お腹いっぱい。2018/07/05(木) 13:21:09.53ID:MfuMPwKw0
>>625 半年以上前から既出、css素材として何度も出てる。
もともとCTRは「糞みたいなAustralis UIを何とかしたい!」のが主原動力だから
Quantum以降はそのまま導入する意味がほとんど無い。

627名無しさん@お腹いっぱい。2018/07/05(木) 22:42:07.26ID:W/MXy2kf0
ブックマークのファビコンを>>429のfolder-item.pngの左上みたいは白いファイルアイコンにしたいのですが、どう記述すればいいですか?

628名無しさん@お腹いっぱい。2018/07/05(木) 23:23:32.20ID:+sw8viMa0
>>626
>>1のテンプレに無かったから皆CSSをゴリゴリ書いているのかと思った
UIを変更したいだけでStylish、Stylusは不要なので、とりあえずこれをベースに色々やってみます
しかし57以降のUIはさらに酷いね…

629名無しさん@お腹いっぱい。2018/07/06(金) 21:24:58.00ID:pmzbjsvK0
そういやテンプレからstylishを削るときがきたのか…

630名無しさん@お腹いっぱい。2018/07/06(金) 22:36:40.01ID:BmH98Fz50
代わりに基本のブラウザーツールボックスを入れよう

MDN - 開発ツール ブラウザーツールボックス
https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox

631名無しさん@お腹いっぱい。2018/07/07(土) 02:25:43.42ID:6yut92tv0
win7でFirefox61.0.1 64bit版を使っています。
61にしたら、サイドバーで出てくるブックマークの行間が広くなってしまったので狭くしたいのと、
ブックマークを検索、とでる検索枠を消したいのと、その上にある★ブックマーク という文字を消したいので、
userChrome.cssに書くcssを教えていただけますでしょうか。
行間は下記を書いているのですが反映されないのです。
treechildren.sidebar-placesTreechildren::-moz-tree-row{
height:1.2em !important;
border-width:1px !important;}

632名無しさん@お腹いっぱい。2018/07/07(土) 03:46:14.76ID:RSN+5Mlp0
StylishからStylusに移行しようと思ってUser Style Extractorで変換したんだけど、なぜかインポートできないUI弄り関係のスタイルがいくつかある
もうよくわからん

633名無しさん@お腹いっぱい。2018/07/07(土) 06:33:59.34ID:7J76nv+D0
StylusはちょろめのフォークでUIは弄れないんじゃないの?
旧バージョンのStylishを手に入れるかCTRのカスタムCSSコードで対応かな?

634名無しさん@お腹いっぱい。2018/07/07(土) 06:36:28.89ID:rgZOsBac0
>>631
/* トップのバーを外す */
#sidebar-header { visibility: collapse !important;}
/* サイドバーの検索バーを消す */
#bookmarksPanel > hbox,
#history-panel > hbox {
display: none !important;
}

635名無しさん@お腹いっぱい。2018/07/07(土) 09:27:31.28ID:0uzuqG2i0
>>631
/* サイドバーヘッダーのアイコンとタイトルとドロップマーカーを非表示 */
/*#sidebar-title {
display: none !important;}
#sidebar-switcher-target {
padding: 2px 0px !important;}
#sidebar-switcher-bookmarks > .toolbarbutton-icon,
#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon,
#sidebar-switcher-history > .toolbarbutton-icon,
#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon,
#sidebar-switcher-tabs > .toolbarbutton-icon,
#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
list-style-image: none !important;
width: 0px !important;}
#sidebar-switcher-arrow {
list-style-image: none !important;
width: 0px !important;}

636名無しさん@お腹いっぱい。2018/07/07(土) 13:43:41.98ID:0uzuqG2i0
>>631のcssでブラウジングライブラリーの行間狭くなっていると思うんだけど
/* サイドバーの行間を狭くする */
treechildren.sidebar-placesTreechildren::-moz-tree-row{
height:1.4em !important;
border-width:1px !important;
}

637名無しさん@お腹いっぱい。2018/07/07(土) 15:04:54.07ID:4V1KsYDq0
Firefox56か54ぐらいの間で止めて古いまま使ってます
スタイリッシュも一度あげたんですがカラフルアイコンになってからなんか使いづらくて旧バーションを使ってます
で、なんかブロックとかポリシーとか個人情報とか出てきたんですが
旧アイコンのものも情報収集されてるのでしょうか?

638名無しさん@お腹いっぱい。2018/07/07(土) 15:35:21.02ID:0uzuqG2i0
>>631
/* ブックマークサイドバーのブックマークの間隔を減らす */
@-moz-document url(chrome://browser/content/places/bookmarksSidebar.xul) {
treechildren::-moz-tree-row{
height: 0 !important;
border-width: 1px !important;
}
}
/* サイドバーの履歴の間隔を減らす */
@-moz-document url(chrome://browser/content/places/historySidebar.xul) {
treechildren::-moz-tree-row{
height: 0 !important;
border-width: 1px !important;
}
}

639名無しさん@お腹いっぱい。2018/07/07(土) 17:21:02.71ID:KOZpuFFk0
ステータスパネルの表示非表示をラグなしにする方法ないでしょうか?
フェードインフェードアウトを無くすことはできたのですが表示非表示間隔を調整する方法が分かりません。

Stutas-4 everでできたようにカーソルをリンクに乗せたらステータスをパっと表示、リンクからカーソルを外したらスっと消えるようにしたいです。

640名無しさん@お腹いっぱい。2018/07/07(土) 17:29:39.23ID:GFSEA+aS0
Web版のTwitterのタイムラインやトップページの上にあるglobal-nav-inner部分の
アイコンの並びを変えるのと付け加えるのはどうすればいいのでしょうか?
リスト ホーム 通知 メッセージにしたいです
モメントはli.momentsで消してます

641名無しさん@お腹いっぱい。2018/07/07(土) 20:57:34.92ID:RSN+5Mlp0
>>633
なるほど…
みんなuserChrome.cssに直接書くようになったのかな

642名無しさん@お腹いっぱい。2018/07/07(土) 21:17:40.59ID:kDClE/vq0
>>641
>>630のスタイルエディター機能を使っている

643名無しさん@お腹いっぱい。2018/07/07(土) 21:30:23.22ID:rgZOsBac0
>>641
UserCSSLoader.uc.js使ってる。

644名無しさん@お腹いっぱい。2018/07/07(土) 21:38:30.79ID:7J76nv+D0
>>641
UIを弄る程度ならCTRの設定からコードを直接書き込めるようになってる
http://imgs.link/twbaHQ.jpg

645名無しさん@お腹いっぱい。2018/07/07(土) 21:40:56.43ID:dUFKwzn30
>>631です
教えていただいたものを記述したら出来ました!!
ありがとうございました!!
なんか2行目に書いていたurlほにゃらら〜の記述が邪魔だったみたいです。
消したらうまくできました!

646名無しさん@お腹いっぱい。2018/07/07(土) 21:42:31.12ID:4r+iaCWT0
userChrome.cssから@importで個別のcssを読み込ませてる

647名無しさん@お腹いっぱい。2018/07/07(土) 22:17:06.62ID:fXCp/FI50
@importはその数が多いと起動に負荷がかかる

648名無しさん@お腹いっぱい。2018/07/08(日) 19:20:55.56ID:XEFU0k1D0
お豆腐さんのところのStatus-4-Evarもどきみたいなもの他にもないのかなと探してみたら見つけました
ボタンは置けないけどけっこういい感じです
https://i.imgur.com/2AFDNLh.png

649名無しさん@お腹いっぱい。2018/07/08(日) 19:27:23.00ID:X4GPS08O0
>>648
教えてください

650名無しさん@お腹いっぱい。2018/07/08(日) 19:42:12.51ID:XEFU0k1D0
>>649
これでググってください一番目に出てきます → Penduin's Pen: How to Fix: Firefox 57+ Status Bar
statuspanelの前に#ね

651名無しさん@お腹いっぱい。2018/07/08(日) 19:45:46.32ID:X4GPS08O0
>>650
ググりましたが出てきません

652名無しさん@お腹いっぱい。2018/07/08(日) 19:46:20.49ID:X4GPS08O0
>>650
失礼 出てきました >>651

653名無しさん@お腹いっぱい。2018/07/08(日) 20:25:25.29ID:X4GPS08O0
>>650
お礼を言うのを忘れていました ありがとうございました

654名無しさん@お腹いっぱい。2018/07/08(日) 22:24:28.71ID:qmx3Vv8p0
お尋ねさせてください。

以前、userstyles.orgかどこかで、AutoPagerizeで継ぎ足されたページの上部に表示されるページ番号(「Page: 2」等)を
Pixivでも表示できるようにするスタイルをインストールしたことがあるのですが、先日誤って消してしまいました。

もう一度インストールし直したいのですが、検索しても見つけられません。
どなたか、スタイルのURLやコード内容をご存知の方がおられましたら教えていただけないでしょうか。

655名無しさん@お腹いっぱい。2018/07/09(月) 16:58:46.68ID:kgp106jK0
Stylishから以下の内容(chaikaのスレ一覧で一行おきに色をつけるものです)を
userChrome.cssへコピペしたのですが反映されません

#boardTree treechildren:-moz-tree-row(even) { background-color: WhiteSmoke !important; }
#boardTree treechildren:-moz-tree-row(hover, focus) { background-color: -moz-cellhighlight !important; }
#boardTree treechildren:-moz-tree-row(selected) { background-color: highlight !important; }

これ以外のUI変更については反映できましたので、userChrome.cssの編集をミスってるとかではないと思います
なにかStylishとuserChrome.cssとで変更すべき点があるのでしょうか? それともchaika固有の問題と思われるので
そちらのスレに移動すべきでしょうか?

656名無しさん@お腹いっぱい。2018/07/09(月) 17:15:07.03ID:tTBuN0L50
>>655
userContent.css

657名無しさん@お腹いっぱい。2018/07/09(月) 18:19:06.80ID:kgp106jK0
>>656
うまくいきました、ありがとうございます
Stylishでのnamespaceがttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xulだったので
すっかりuserChrome.cssだと信じてしまってました

658名無しさん@お腹いっぱい。2018/07/09(月) 19:52:39.68ID:kV8KcruZ0
>>627
自分も似たようなことをしているので以下でどうか
61では実現できてる

.bookmark-item:not([container]):not([livemark]):not([query]) > .toolbarbutton-icon,
.bookmark-item:not([container]):not([livemark]):not([query]) > .menu-iconic-left > .menu-iconic-icon,
treechildren::-moz-tree-image,
#backForwardMenu .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon
{
fill: transparent !important;
fill-opacity: 0 !important;
background-image: url("") !important;
}

background-imageはご自身で好きな画像を指定して適宜position、size、repeatで微調整
fillとfill-opacityはどちらかだけでもOKかと

659名無しさん@お腹いっぱい。2018/07/10(火) 05:15:44.19ID:2UZ7s1fQ0
>>632
Stylus の導入と設定方法(Firefox拡張機能)
https://atstudiota.exblog.jp/27113499/
これを参考にして設定を行ったよ。

660名無しさん@お腹いっぱい。2018/07/10(火) 10:53:00.75ID:hzKcgdV00
サイドバーの幅を規定より小さくできるようにしたんだけど61にしたらできなくなりました。
最新の設定教えてくださいませ

661名無しさん@お腹いっぱい。2018/07/10(火) 13:54:46.44ID:uh79aIhD0
>>660
@-moz-document url("chrome://browser/content/browser.xul") {
#sidebar-box,
#sidebar-box > #sidebar {
min-width: 0 !important;
max-width: 480px !important;
overflow-x: hidden !important;
}
}

662名無しさん@お腹いっぱい。2018/07/10(火) 14:14:32.94ID:hzKcgdV00
>>661
ありがとうございます!

663名無しさん@お腹いっぱい。2018/07/10(火) 14:39:11.88ID:UCkeXXY70
>>658
わざわざ教えてくださってどうもありがとうございます
しかしCSSを指定してみたのですが、ちょっとposition、size、repeatで微調整辺りが良くわからなかったで、上手に表示ができないです

よかったら>>429の画像を使ったもう少し詳しい書き方教えてくれませんか?
よろしくお願いいたします

664名無しさん@お腹いっぱい。2018/07/11(水) 02:02:45.79ID:KirXcDY70
1ピクセルずれるから幅を1増やした

665名無しさん@お腹いっぱい。2018/07/11(水) 19:04:25.93ID:gE2xRzl90
>>663
.bookmark-item:not([container]):not([livemark]):not([query]) > .toolbarbutton-icon, /* ブックマークツールバー上のもの */
.bookmark-item:not([container]):not([livemark]):not([query]) > .menu-iconic-left > .menu-iconic-icon, /* フォルダ内 */
treechildren::-moz-tree-image, /* サイドバー */
#backForwardMenu .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon /* 戻る進むボタン内 */
{
fill-opacity: 0 !important;
fill: none !important;
list-style-image: none !important;
background-image: url("chrome://global/skin/icons/folder-item.png") !important;
background-repeat: no-repeat !important;
background-size: 32px 48px !important;
background-position: 1px 0px !important;
}
バーの高さ・幅など他所の部分もcssでいじってるならそれらに応じて適宜調整が必要になるでしょう

666名無しさん@お腹いっぱい。2018/07/12(木) 01:05:03.74ID:9Wr2A5Y60
>>665
わざわざ教えてくれて本当にありがとうございました
これで綺麗に表示が出来ました

667名無しさん@お腹いっぱい。2018/07/12(木) 15:35:11.29ID:laQv08Ik0
firefox56.0.2を使用しております
ページ内検索バーを常に表示するようにしたいのですが、↓のコードではできませんでした
#FindToolbar{display: -moz-box !important;}
どのように書き換えればよいのでしょうか?
よろしくおねがいします

668名無しさん@お腹いっぱい。2018/07/12(木) 23:57:24.96ID:l7d3RB8s0
未だに56かよ・・・

669名無しさん@お腹いっぱい。2018/07/13(金) 00:13:10.08ID:5KY7XFpI0
>>667
Firefox25からタブごとにページ内検索バーが独立したのでcssで常に表示は無理だと思います

670名無しさん@お腹いっぱい。2018/07/13(金) 12:15:51.37ID:ubg6eYjn0
>>669
ああ、そうなんですか
わざわざ教えていただきありがとうございます
ずっとさまよい続けるところでした

671名無しさん@お腹いっぱい。2018/07/13(金) 13:40:24.13ID:mBtHvhu40
はやく成仏しろよ

672名無しさん@お腹いっぱい。2018/07/14(土) 18:46:58.04ID:/t40bISm0
/* Url and search bars (アドレスバーとサーチバーの文字入力欄の背景色)*/
--url-and-searchbar-background-color: rgb(60, 60, 60);
--url-and-searchbar-color: #d0d0d0;
--urlbar-separator-color: #5F6670}

userChrome.cssに上の記述で両バーの内部の色を変更していました
この画像でいう薄い緑黄ピンクの部分です https://i.redd.it/0wobjuul0jyz.png
v61以降この記述が無効になってしまったのですが
修正方法、もしくは別の書き方などありましたら教えて頂けませんか

673名無しさん@お腹いっぱい。2018/07/15(日) 15:04:45.79ID:3/d/JiKp0
>>672
やっつけなのでそう遠くない将来また無効になってしまうかも
とりあえず3カ所の色は変えられた
6行目以降は文字を選択反転したときの色を指定するもの
不要であれば削ってください

#urlbar,.searchbar-textbox {
background-color: rgb(60, 60, 60) !important;
color: #d0d0d0 !important;
--urlbar-separator-color: #5f6670 !important;
}
::-moz-selection {
background: rgb(89, 89, 89) !important;
color: #efefef !important;
}

674名無しさん@お腹いっぱい。2018/07/15(日) 16:40:48.45ID:BFw1mjBb0
>>673
お陰様で見事元通りに直りました
本当にありがとうございます!

新着レスの表示
レスを投稿する