userChrome.css・userContent.cssスレ Part8

●前スレ
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/

>>200
ブラウザーツールボックス使えばすぐわかるでしょ
https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox

>>202
200です。う〜ん中々難しいです。でもありがとう！

項目が多くて絞り切れないな〜。ブックマークフォルダを開けた時によく上下に暴走するから抑制できるアドオンでもあればいいんだけどね

.autorepeatbutton-up,
.autorepeatbutton-down
{
display:none !important;
}

>>205
200です。ありがとうございます。やってみた所うまく動いてないみたいです。なにがダメなんだろう

#BMB_bookmarksPopup これ追加でいけるかな？

WE前のアドオンのUndo Bookmarks Menuみたいに
ブックマークのコンテキストメニューに元に戻す」と「やり直し」を付け加えても上手く行かない
弄れないのかな
ブックマーク弄ってUndoが必要になったら
すべてのブックマークを開いて管理からやり直しをするしかなくなった
めんどい

>>208
Ctrl+Zは？

200です。#personal-bookmarks 追加で無事消えました。
>>205さん、ありがとう！これがあったから助かりました！

>>209
キーボード使うときはキー操作で済ましても
マウス使うときはマウスで完結させて持ち替えを減らしたいものだろ
特にブラウジングはマウス多用するから

Vim Vixen という拡張機能が提供する Hit-a-Hint 風の文字の大きさを
サイトの拡大率を無視して固定したいです。
今現在，userContent.css に以下のように指定していますが，
ページの拡大率によって文字の大きさが変動してしまいます。
.vimvixen-hint {
width: 16px !important;
height: 16px !important;
vertical-align: middle !important;
line-height: 16px !important;
font-size: 90% !important;
-webkit-text-size-adjust: none !important;
}
/* これ以外にも色々設定 (フォントとか) しているのですが恐らく
文字の大きさの変動には関係してこないので省略しました */

font-sizeを％で指定してりゃそうなるでしょ

font-size: calc(16px * 0.9) !important;
にしてみましたが解決を見ませんでした。

viewport系の単位使えばいんでない

>>215
Viewport 単位では一応固定されましたが，ウィンドウの大きさを変更するとそれに追随してしまいます。
私が望むのは Webページの拡大率・ページのフォント設定・Webブラウザの大きさに依らない大きさ文字で表示することなのです。
CSSで指定できるフォントの大きさを調べるとmm指定がちょうどいいと思ったのですが，なぜかWebページを拡大すると文字の大きさも拡大されてしまいました。
ちゃんと
font-size: 4mm !important;
としてあるにも拘らずです。
うーん，仕様なんですかねぇ……。

遅くなりましたが環境は: Firefox 57.0.4 64bit 公式ビルドです。(あんまり関係ないと思いますが……)

定規を虫眼鏡で見て1mmがズレてるとか言うようなもんだろ
それで拡大されないなら同じ絶対単位のpxも拡大されないことになる

拡縮や設定、環境にかかわらず固定ってのはアクセシビリティーの都合上、CSS単独では難しいんでないの

ブックマークなどからサイトを開く時、読み込みが始まるまでの間に表示される真っ白な画面を黒くするにはどうすればよいでしょうか。

Webページの拡大って元々そういうもんじゃね？
CSSその他のローカル設定・下位設定を上回る効力があるからこそ意味があるというか

タブのピン留めの高さを変えることはできますか？

アイコンです

>>212
メディアクエリのmin-resolutionで場合分けしてフォントサイズを指定すればいいんじゃないの

ページ内検索ボックスの幅を広げたい

サイドバーにブックマーク表示してるんですがフォルダアイコンの色を変えるにはどの様に記述すれば良いのでしょうか？お教え下さい。

>>224 前スレぐれ検索してけれ、へばな。
http://egg.5ch.net/test/read.cgi/software/1510394098/13

>>225
おりがとうございます、助かりました。

58.0にしたら
/*　検索バーの右側に履歴を出すボタンを表示　*/
#searchbar .autocomplete-history-dropmarker {
display: -moz-box !important;
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#history-dropmarker");
}

これが効かなくなってしまった

ハイ次の患者さんどうぞ

>>229
58.0だとクラス指定されてない
あとこれを読んでおくといい
スタイルシートの class と id の違いと使い分け
https://allabout.co.jp/gm/gc/23897/

>>230
ありがとう。勉強になった。
それを読む限りの理解だけれど，Firefox側の考えとしては，
「タブの領域は一つのブラウザの中で一つだけである。
その領域の中に個々のタブが入っている。
だからタブの領域はIDとして，個々のタブはクラスとして指定するように」
ということなのかな？

Web畑の人間じゃないのでCSS哲学はあまり分からないのだけれど，
今回の改変は良い方向だと思ったわ。

>>223
.findbar-textbox {
width: 580px !important;
}
580px とか 58em とか


ページ内検索ボックスを常時表示にしたい

58にしたら#TabsToolbarと#nav-barの間にボーダーが入っちゃたんだけど
border : none !important; とかやっても消えないし
どうやったら消えるんだ

>>233
自己解決
borderじゃなくてbox-shadowのラインだった
#nav-bar { box-shadow : none !important; }
ついでにタブ幅の設定が上手くいかないのも
:root { --tab-min-width : 150px !important; } /* 初期値書き換え */
で強制的に書き換えちゃった

>>233
そもそも58でそんなラインは入らない
完全におま環乙

URLボックスと検索ボックス周りのうっすらな影って消せますか？

すいません
#urlbar, .searchbar-textbox{ box-shadow : none !important; }
で自己解決

firefoxのUIのID名クラス名一覧ってどこ見ればわかりますか？

>>238
一覧よりもブラウザーツールボックス使った方が良いよ
疑似セレクタで挙動が変わったりもするし
バージョンアップで割と変更もあるから

すまん疑似クラスと言いたかった
自分でなんか変だと思ったんだよ

>>239
サンクス
ブラウザーにこんなツールあったんですね
browser.cssを覗けばいいのかな

#TabsToolbar .titlebar-placeholder{ display:none !important; }
にしてたんだけどプライベートブラウジングとかタブ一覧（∨）のiconが右端にいくから調べてたら
タブバーの最期にも同じくプレースホルダーがあったのね
ってことで、クラスに[type="pre-tabs"] 追加で直ったわっしょい

userstyles.orgのスタイルの更新をRSSフィードで知れるようにはできないものかなあ
あと、Dark〜とかBlack〜みたいなサイトを黒くするだけどスタイルの多さには辟易する

タブの文字列を上に3pxあげたいのですが以下で効かないのですがなんででしょう…？
.tab-text {padding-bottom 3px !important; }
.tab-throbber, .tab-icon-image {padding-left 3px !important; }

>>244
めちゃくちゃだからです

.tab-text {margin-bottom:3px !important; }
これでいけたー 未だにmarginとpaddingの使い分けわからん

margin 外側の余白
border 境界線
padding 内側の余白

間に境界線があると考えればわかるんじゃない

Firefox Developer Edition 59.0b4、なんか時偶 userContent.css が有効にならないときがあるな。
同じページを閉じて、終了・再起動・再読み込みすると直る。
Firefox 無印、Firefox 準安定板、Firefox 最新不安定版ではそんなことはない。
userContent.css を編集したあと、ブラウザを再起動すればきちんと変更を受けている。

>>247
paddingは余白じゃないよ

コンテクストメニューの
← → ↻ ☆
っていう項目の高さを他の項目に合わせて、かつアイコンを画像じゃなくて上記の文字そのものにしたい。
ヒントをください……

#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;
}

ひどい（笑）

>>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: "☆";
}

>>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: "☆";
}

質問です。

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

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

暇な時でいいのでヨロシクお願いします。 <(＿ ＿)>

google.co.jpのクッキーをブロックしてるとリダイレクトの警告出るよ
なんらかのアドオンがブロックしてるんじゃない？
とりあえずセーフモードでも警告出るか試してみるとかね

リダイレクトの警告…
これ入れてたら出る
removeRedirect4Google

>>256
クッキーはブロックしてないのですが
セーフモードにすると問題なく画像検索できるのでアドがいたずらしてる可能性が高いかも…
もう少しあがいてみます。
ヒントありがとうございました。

>>257
removeRedirect4Googleは入れてないです。
でも、知っておけば今後何かで役に立つかもです
教えてくれてありがとうございました。

悪さしてたアドが判明

Searchonymous

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

みなさん、いろいろいろいろお世話おかけしました。
ありがとうございました <(＿ ＿)>

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;を追記して反映されたことから文法としては正しいようです。

>>260
StylishModokiで適当なフォント名を指定して試したら効いた
なのでfont-family名の指定に問題があると思われる
フォントがインストールされてるかとか、フォント名が正しいかとか

>>260
BOMなしUTF-8で保存してる？

>>261さま、>>262さま、ありがとうございます。

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

アドオンを無効にしたりしてみたんですが、やはりフォントの形状だけ適用されませんね……
なぜだ……

@-moz-documentは廃止された

>>263
@-moz-document domain("egg.5ch.net") {
.message {font-family: "IPA モナー Pゴシック" !important;}
}
Win7だけどダウンロード、インストールしてFirefox再起動したら上で行けた

>>264
ｋｗｓｋ

タブがアクティブになると少し高くなるのですが
高くさせない方法ありますか？

解決しました

アクティブタブで思い出したが現在のタブって
#tabbrowser-tabs .tabbrowser-tab[selected="true"]
じゃなくて
.tab-background[selected="true"],
.tab-line[selected="true"]
でないと指定できないんだよね。
これ、リモートデバッガ (?; S-C-A-iで開くやつ) で見ても分からなくて、
ググったら同じような質問のフォーラムがヒットしたからいいものの、
普通に詰むところだったわ。

>>269
え？#tabbrowser-tabs .tabbrowser-tab[selected="true"]でできてるけど
ラインとかはその子要素で指定されてるからその指定がいるだけで

>>263
セレクターを
.message,
.message > *
にしてみたらどうだろう

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

対象要素をコンテキストメニューの「要素を調査(Q)」で開けば
どのスタイルシート由来のどの宣言が適用されているか確認できるよ
https://i.imgur.com/reBo3Lt.png
他が優先されて効果のなくなっている宣言には、打ち消し線が付く
実際に使用されているフォントの確認は「フォント」タブ

ツリー型タブが表示されている時はタブバーを隠し、
ブックマークサイドバーが出るなどしてツリー型タブが非表示の時はタブバーを表示するというようなことは可能でしょうか？

FirefoxPortable57の時URL窓と検索窓の高さが変わるCSSを使ってたのですが
FirefoxPortable58を新しく入れてそのCSSを書くと同じように高さが変わるのですが
このページをブックマークに追加します、Pocketに保存、ページ操作のアイコンが小さくなってしまいます
なんとかならないでしょうか　もしくは他の書き方があったらお願いします
#urlbar,
.searchbar-textbox {
font-size:13px;
min-height: 19px !important;
max-height: 19px !important;
}

タブの右クリックメニューに「左側のタブをすべて閉じる」を追加するcssがあったら教えてください。

>>274
cssだけでは無理なので
[email protected]
というuserChrome.js用スクリプトに頼るか
またはESRに移行して該当機能のあるレガシーアドオンに頼るか

>>274 拡張でも出来る。
Close Tabs to the Left とかシンプル。
https://addons.mozilla.org/ja/firefox/addon/close-tabs-left/
Multi-Tab Close は凝ってる。
https://addons.mozilla.org/ja/firefox/addon/multitabx/

>>269
.tab-content[selected="true"] {
は使えないん？

>>275
[email protected]
でできました。
調べたところ，日本語表記の「左側のタブをすべて閉じる」に変更することもできました。
ありがとうございました。

>>276
紹介，ありがとうございました。

ブックマークボタン押して一番下に出てくる全てのブックマークを表示ってのを消したいんだけどどうすればいいの？
下のやつだと上に出る奴しか消せなかった・・・

#BMB_bookmarksPopup #BMB_bookmarksShowAllTop,

Top消したらいけました
申し訳ない

ツリー型タブを色々イジってマウスオーバーでサイドバーを展開するようにしているんだけど
ピン留タブが拡大縮小サイズに合わせて整列する動きをするので他のタブが動いて使いづらいのでタブが追従して動がないようにしたいんだけど方法はあるのかな？

Firefox57のブックマークを元の色に戻す
https://00.bulog.jp/archives/228

win10の58では黄色になるのですがlinux mint mateの58だと
フォルダが表示されずスペースが空いてしまいます
おま環ですかね、ubuntu系の方々いかがでしょうか？

>>282
こっちは？
https://00.bulog.jp/archives/2325

>>283
レス速っ　ありがとう
後でやってみるね

>>283
やってみた。 おま環だわ、きっと。
/* 金色 */　だけはうまくいったけどあとはダメ。
下部のabout:configもダメ。
ただ...これやると他のcss設定が効かなくなる。ぱっと見で
/* サイドバーヘッダースリム化 */
/* サイドバーサーチ部スリム化 */
/* URLバー内の青色星アイコンをグレイ色に変更 */　など。

win10はフォルダの色だけちゃんと反映されたのでwinで使わせてもらいます。
あの黄色いiconよりいいね。mintはグレーで我慢します。

>>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;
}

>>286
どーもありがとう
mintだとやっぱり消える
これもwin10だといいんだけどね

https://i.imgur.com/8A9dH7o.png
こういう表示スタイルと通常のスタイルの表示をキー打鍵(トリガーはアイコンも選択可)で切り替えが欲しいんですけど
何か方法ありますか?

ねえよ

退化しますなorz

CSSだけでそんなことできことはねえよ
まずお前が進化しろ

退化、退化、退化

>>290
https://addons.mozilla.org/ja/firefox/addon/mpt-hide-browser-ui/
爺さん、まだ居たんか；
相も変わらぬ気象庁画像貼りも人を馬鹿にした物言いも
横山たかし風の「〜のう」口調も不愉快極まりないな。

>>288
http://egg.5ch.net/test/read.cgi/software/1512639644/4-28

>>282
'Classic' CSS tweaks for Firefox 57+ v1.6.7.1
https://github.com/Aris-t2/CustomCSSforFx/releases

>>296
おはよう
色付いたよぉ！
全体的にカラフルになった。
このuserChrome.cssに今までの記述を張り付けてみたけど
だいたい反映されるみたいだね。
どーもありがとう！！

>>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; }

>>298
おぉ どーもありがとう。
css解らないんで助かったよぉ

三時のお茶です
つ旦

（´･ω･)つ日.l|l　ｻﾞﾊﾞｰ

初心者な質問ですみません
このスレのuserChrome.css・userContent.cssは，みなさんfirefoxをカスタマイズしているのでしょうか？
最近firefoxからChromeに乗り換えたのですが，ChromeのStylusでスレ上のcssを利用してUIをカスタマイズすることは可能でしょうか？