userChrome.css・userContent.cssスレ Part7

■ このスレッドは過去ログ倉庫に格納されています
2017/11/11(土) 18:54:58.08ID:hti5ZF6m0
●前スレ
userChrome.css・userContent.cssスレ Part6
http://egg.2ch.net/test/read.cgi/software/1438959541/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
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

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

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

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

とほほのスタイルシート入門
http://www.tohoho-web.com/css/
2017/11/11(土) 18:55:30.73ID:hti5ZF6m0
●User Style Managerについて

バージョンによって利用できない機能があります

GitHub - scrapmac/User-Style-Manager
https://github.com/scrapmac/User-Style-Manager

管理画面
×1.1.1
×1.1
○1.0

スタイル作成
○1.1.1
△1.1
×1.0
2017/11/11(土) 18:57:00.47ID:hti5ZF6m0
userChrome.css・userContent.cssスタイルスレ
　http://anago.2ch.net/test/read.cgi/software/1317830579/
Firefox userChrome.css userContent.cssスタイルｽﾚ (実質 Part2)
　http://anago.2ch.net/test/read.cgi/software/1329315394/
userChrome.css・userContent.cssスレ Part3
　http://anago.2ch.net/test/read.cgi/software/1347629378/
userChrome.css・userContent.cssスレ Part3 (実質 Part4)
　http://anago.2ch.net/test/read.cgi/software/1369968883/
userChrome.css・userContent.cssスレ Part4 (実質 Part5)
　http://anago.2ch.net/test/read.cgi/software/1400202982/
userChrome.css・userContent.cssスレ Part6
　http://egg.2ch.net/test/read.cgi/software/1438959541/
4名無しさん＠お腹いっぱい。
垢版 |
2017/11/11(土) 22:19:56.79ID:wPMDCz5f0
Stylishが自動更新で11月11日付け置き換わったわけ
完全に終わった旧仕様の代わりに全く同じコードをuserChrome.css作ってコピったら完璧（笑）
てか今までもuserChrome.cssがあればStylishなんつーチンパンアドオン自体不要だったなｗ
食わず嫌いみたいな真似はなるべくしない方が良いと気付いたったｗｗｗ
2017/11/11(土) 23:16:20.23ID:fnXU9DQ10
自分で書く者にとっては、すぐに結果を反映できて書き換えられるStylishは都合が良かった
書いて再起動、意図と少し違った結果になったから修正してまた再起動とか面倒
特に数値の微調整とかやってられんわ
ContentだけならStylusで代替できるけれどもChromeは無理だし
6名無しさん＠お腹いっぱい。
垢版 |
2017/11/12(日) 00:48:13.09ID:ryNrWhs/0
いちおつ〜
>>5
あらためて知る「お試し」機能の偉大さよ。
Live editor for CSS and LESS
https://addons.mozil...or-for-css-and-less/
編集内容がリアルタイムに反映。
流石にabout:ページへの適用やuserChrome.cssのライブ更新は無理だけど
利用するサイト向けの更新作業に便利。
2017/11/12(日) 04:50:40.25ID:5ElFcW700
以下cssを57に追加しようとしたところエラーが出るのですが
どのように修正すれば良いのでしょうか

ブックマークフォルダの色を黄色に戻す
@-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
}
}
2017/11/12(日) 06:23:46.55ID:qscEtrTF0
親要素に適用させるセレクタってCSS3に存在しないんだな…
9名無しさん＠お腹いっぱい。
垢版 |
2017/11/12(日) 06:39:37.97ID:6TyfoMHL0
>>5
スタイルエディターで即時適用、確認しながら書ける
Shift+F7 で開いて Alt+N で新規シート

XULはブラウザーツールボックスのスタイルエディター
https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox

書き上がったら userContent.css, userChrome.css に保存して再起動
2017/11/12(日) 07:26:14.30ID:amVyn/nF0
>>7
userChrome.cssで動いてるよ。
2017/11/12(日) 07:33:14.77ID:TL+lQEsK0
>>7
/* ブックマークフォルダの色を黄色に戻す */
2017/11/12(日) 07:43:52.10ID:5ElFcW700
>>10
動くことは動くのですが、エラーのせいかこのcssより下にまた別のcssを書いてもfirefoxに反映されないのが気がかりになっています
>>11
すいません、紛らわしい書き方をしてしまいました
日本語はcssに書いていません
2017/11/12(日) 13:08:54.62ID:74tSf8gW0
{}がないとかじゃねえの

@-moz-document url(chrome://browser/content/browser.xul) {
/* ここに他に書きたいCSSを書く */
}

それ書いたの1か月前だっけ　時が進むの速い
なんとなく出す機を逸した感じがした、もっといろいろ黄色にするCSSをついでに

/*　フォルダアイコンを元に戻す
ブックマークサイドバー・ブックマークツリー・ブックマーク編集パネル
履歴サイドバー・ブラウジングライブラリー
*/
@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul),
url(chrome://browser/content/history/history-panel.xul),
url(chrome://browser/content/browser.xul),
url(chrome://browser/content/places/places.xul){
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open),
.bookmark-item[container]{
list-style-image: url(chrome://global/skin/icons/folder-item.png)!important;
-moz-image-region: rect(0px, 32px, 16px, 16px)!important
}
}
2017/11/12(日) 14:28:58.89ID:5ElFcW700
>>13
ありがとうございます
無事色覚を取り戻せました
2017/11/13(月) 11:39:34.85ID:PFwMDld+0
>>8
案はあったよね
>ではなく<を使うやつ
どうなったんだろうあれ
2017/11/13(月) 13:52:29.63ID:unWlpq6c0
:hasだろ
2017/11/13(月) 17:10:20.41ID:+jRNMOr00
#TabsToolbar * {
min-height: 18px !important;
max-height: 18px !important;}
}

Firefox57でuserChrome.cssにて上記のcssでタブバーをを細くしているのですが
タブを多量に開いた際にタブの右側に出る｢タブを一覧表示します｣のボタンのポップアップメニューがcssに影響を受けているのか正常に表示されません
:not(#alltabs-popup) { 上記記述 }
等素人知識で試してみたのですがうまくいきません
どのように修正したらいいのでしょうが
2017/11/13(月) 21:19:17.24ID:F0miL/vi0
Firefox57.0 (64 ビット) です
userChrome.cssに以下の記述をしたところ、
タブバーは一番下になって目的は達したのですがブックマークツールバーが一番上になってしまいました
ブックマークツールバーをタブバーのすぐ上にするにはどうすればいいでしょうか？

/* タブバーを一番下にして上の隙間を削る */
#TabsToolbar {
-moz-box-ordinal-group: 9 !important;
margin-top: 0 !important;
}
19名無しさん＠お腹いっぱい。
垢版 |
2017/11/13(月) 21:33:23.16ID:/VAac6tD0
>>17
不用意に全称セレクタ(*)を使わない
殆どの場合必要ないよ
特に子孫セレクタ(空白区切)との単純な組合せは影響範囲が広すぎて、そういう風に副作用が大きい

/* タブバーを細くする。 */
#TabsToolbar > #tabbrowser-tabs,
#TabsToolbar > #tabbrowser-tabs > arrowscrollbox {
min-height: 18px !important;
max-height: 18px !important;
}
/* タブバーを細くするとタブのドラッグ時にタブバーが消える対策。
* 参照: https://dxr.mozilla.org/mozilla-central/rev/2535bad09d72/browser/base/content/browser.css#193
*/
#TabsToolbar[movingtab] > #tabbrowser-tabs {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* 新規タブボタン(+)等の画像が潰れるのを避ける。 */
#TabsToolbar toolbarbutton > image {
padding: 0 !important;
min-height: 16px !important;
max-width: 16px !important;
}
2017/11/13(月) 21:36:14.85ID:ofXAQoF/0
>>18

/* toolbar order (start) ************************************/
#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
-moz-box-ordinal-group: 0 !important;
}
#navigator-toolbox #toolbar-menubar {
-moz-box-ordinal-group: 1 !important;
}
/* navigation toolbar */
#navigator-toolbox #nav-bar {
-moz-box-ordinal-group: 2 !important;
}
/* bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
-moz-box-ordinal-group: 3 !important;
}
/* 3rd party toolbars */
#navigator-toolbox toolbar {
-moz-box-ordinal-group: 10 !important;
}
/* tabs toolbar */
#navigator-toolbox #TabsToolbar {
-moz-box-ordinal-group: 100 !important;
}
2017/11/13(月) 21:41:18.08ID:F0miL/vi0
>>20
希望通りになりました ありがとうございます！
2017/11/13(月) 22:41:51.90ID:+jRNMOr00
>>19
ありがとうございます
勉強になります
基礎を知らずに素人が適当にやるもんじゃありませんね
以後精進します

潰れてたアイコンもこの指定なら綺麗に表示できるんですね
助かります
本当にありがとうございました
2017/11/14(火) 03:44:55.22ID:jll8QUKh0
Firefox57.0 で久しぶりに userChrome.css に手を出してみようと思ったけど
昔あったDOMインスペクタみたいな、UI部分の要素を調べる方法って今はどうやるんですか？
■ このスレッドは過去ログ倉庫に格納されています
16歳の水野カイトが封印の刀を見つけ、時間が裂けて黒い風と亡霊の侍が現れ、霊の時雨と契約して呪われた刀の継承者となる場面
ニューススポーツなんでも実況