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 https://diamond.jp/articles/-/242247?page=4
このページの画像、最初表示されてなくてスクロールすると表示される
普通に表示されるだけならいいけど、表示されたときにまたページの上に戻ってしまい、スクロールしなおさなきゃいけない
ソース見たら
<img alt="ランキング6-40" src="https://dol.ismcdn.jp/common/dol/images/v3/loader.gif"; class=" lozad" data-src="https://dol.ismcdn.jp/mwimgs/b/d/670m/img_bd38f0b73556beafe9a30bbf8a97405b335936.jpg";>
というのがあって、おそらくスクロールするとdata-srcが読み込まれるようになってるっぽいんだけど、
最初から表示させるにはどうしたらいい？ 基本的には「画像が読み込み終わったら即表示」されるようになってるので、
「無駄な時間」が追加されてるわけではないよ。
ただし、その処理をするjs自体の起動が、ページそのものの表示より遅れるので、
過去に訪れてすでに表示したことのある画像(テスト目的で同じページをリロードした場合も)だと、
「本来ならキャッシュで即表示される」はずだったと言える。
ガチでやるなら
@run-at document-start で即起動するスクリプトで、
即img要素を取得、かつ MutationObserver でbodyに現れるimgを即補足して、
img.src = img.dataset.src と書き換えるんだろうな。
その後に動くであろううサイトのスクリプトに邪魔されるとまた面倒だけど。 画面の高さが足りてないとスクロール必要みたいだから、
スクリプト書くなら window.scrollBy(0,1); しとけばいいかな。
てかここcssスレやんけ Yahooのニュースのコメント欄の「もっと見る」がうざいと思っています
見るためにスクロールしたんだから見るに決まってるんだからいちいち面倒なことさせるなと
それでソースコードを見てみたら、もっと見るで隠されてる部分が既に読み込まれていることがわかりました
以下の部分を削除することができれば普通に読めるようなのですが、どういうふうに記述すればいいのかがわからないので教えてください
<a href="javascript:void(0);" class="moreUserCmtText" data-ylk="rsec:cmt;slk:more;pos:●" data-rapid_p="●">...もっと見る</a><span class="hideUserCmtText" style="display:none;"> >>135
.moreAthrCmtText, .moreUserCmtText { display: none !important; }
.hideAthrCmtText, .hideUserCmtText { display: inline !important; } >>Yahooのニュースのコメント欄の「もっと見る」
Yahooのニュースのコメント欄のもっと見るはどこにあるのか教えてください >>137
記事の下に読み込まれるコメントリストはひとつのコメが長文だと省略されてそうなるんだよ
｢すべてのコメントを読む｣で表示されるコメントページでは省略されてないけど
例えばこの記事
https://news.yahoo.co.jp/articles/fd746683dd3cc6a078e9f51787f9b28eb638f19c
コメントが3件表示されてるが1つは｢もっと見る｣になってるだろ？ >>138
>>137さんのを用いました
/* Yahoo!ニュースコメント欄のもっと見るで隠されてる部分をはじめから表示する */
@-moz-document domain("news.yahoo.co.jp") {
.moreAthrCmtText, .moreUserCmtText { display: none !important; }
.hideAthrCmtText, .hideUserCmtText { display: inline !important; }
}
} マウスオーバーでメニューバーを出す書き方教えて下さい
理想は上側からヌルって出てくるようなやつを
どうか願いしますm(_ _)m URLバーからの下に出る検索窓をURLバーの幅ではなくmegabar以前の幅(画面一杯)にしたい
cssでどうにか出来る方法ってありますか？
調べながら色々試してはみたんだけど無理だった… マウスオーバーで隠しておいたツールバー群をヌルって出てくるのは、userChrome.js用で既出だよ
通常隠しておくツールバーもアドホックに指定できるけど、全部消すのは問題起こるみたい
ToolbarAutoHide.uc.js
css用に隠れているプックマークツールバーをマウスオーバーで出すのは前に出ていたけど
今は、上述のものに代えた
使わせてもらうだけです、感謝 >>146
レスありがとう
ToolbarAutoHide.uc.js入れてみました
試しに色々弄りながら使ってみたけどESC押してもリセット出来ないしなんか動きが不安定だし今回はパスしときます
他のスクリプトとの相性とかもあるのかな
わざわざ教えてもらったのに悪いね
本当にありがとう ToolbarAutoHide.uc.jsでESCでのリセットが効かなくなるのはツールバーを全部隠した時に見られるようです
ツールバーは少なくとも一つは表示しないと不安定になるみたい
メニューバーあるいはナビゲーションバーで右クリックすると、「ツールバー自動開閉」のアイテムが出ているので
そこで、ツールバーの表示・非表示が選択できますよ >>144
俺はこれ使ってる。
MenubarReplaceWithButton.uc.js >>149
言われた通りにやってみてとりあえず動いてるみたいなんだけどなんか動きが不安定なんだよね
マウスオーバーすると小刻みに震えちゃってるし
おま環なんかな
何度もお手を煩わせてしまってほんと申し訳ないです
>>150
これいいですね
ヌルっとではないけどシンプルで気に入りました
有難く使わせて頂きます
>>151
紹介ありがとう
とりあえずダウンロードさせて貰ったよ
長々とスレ汚しすみませんでした
レスくれた方本当にありがとうございました >>140の
/* Yahoo!ニュースコメント欄のもっと見るで隠されてる部分をはじめから表示する */
が効かなくなりました
皆さんは効いていますか？
ESR68.10.0新規プロファイル+userContet.cssで効きません
もっと見るテスト用ヤフーニュースリンク
https://news.yahoo.co.jp/articles/fd746683dd3cc6a078e9f51787f9b28eb638f19c >>154
この話の「もっと見る」は、各コメントの末尾に表示されてた青いリンクのこと
あなたが貼ったリンクの「もっと見る」はコメントをたくさん表示するためのリンク
青いリンクに対する効果はいまでもある
ただYahooが改悪して3つ目のコメントの後半が見えない演出にされただけの話 >>155
ありがとうございます
┌───────┐
│もっと見る(000件)
└───────┘
ボタンを押さずとも コメント末尾に
前へ➀②③④⑤⑥⑦⑧⑨⑩・・・⑳次へ
が表示されるようになり便利だな、と思いこんでいたのですが
青字の「もっと見る」の方に効いているのですね >>147
に加えてURL込みで2行になる検索結果を1行にしたら気にいる見た目になった
感謝 ソープランドのホームページです
https://oushitu.tokyo/
スクロールすると引きずるような感じで時間差で動くのですが、時間差なしで動かすにはどうすればいいでしょうか サイト見る気ないけど多分htmlかbodyにscroll-behaviorが使われてるんだろうからこれでどうか？
html,body{scroll-behavior:auto!important;} >>156
これほんとごみ改悪だな。
なんとかできんよな。 >>Yahooのニュースのコメント欄の「もっと見る」
これなんだけど
もっと見るのリンクは無くなったんじゃないの？
替わりに他のコメントを表示するための”もっと見る”が作られたような
このスレで指摘されて後すぐ変更されたから
もしかしてと思ったりしたけどまさかね 普通にコメント欄ごとに長いコメントだとあるだろ。
自分でちょっと確認すればわかる話なのになぜしない。 勝手に違う機能だと思い込んで試してみて思うようにいかないと騒いでるレベルの人なんだから仕方ない Fx78でこのcss動かなくなったんだけど
何か新たに必要なのかな
.tabbrowser-tab[bursting] .tab-icon-image {
animation: aa .10s ease !important;
animation-iteration-count: 1 !important;
}
@keyframes aa {
10%,50% { margin-top: -5px;
}
} >>168
78で入れたらファビコンが上にピョコンと跳ねたけど
本来どんな動きするの？ >>169
一回上下するだけなのでそれでいいんですが
どうしてうちのFx78だと動かないんだろう
他のCSSは効いてるのに
もう一台のパソコンに入れてあるFx68では動いてくれるのに >>170
@-moz-document url("chrome://browser/content/browser.xhtml"){
>>168のやつ
}
他のuserchrome.cssは動いてるならとりあえずcssの中身これだけにして動作確認してみたら >>171
そのようにしてみましたが動きませんでした
時間あるときになぜ動かないのか検証してみようと思います ChromeにStylusを導入しているの。
プルダウンリストを動的に生成しているサイトにおいていらないものを非表示にするにはどうすればいいか。
居住地の選択で、
○国内 ○海外
の選択で北海道～沖縄 アジア＞国,ヨーロッパ>国 のようなプルダウンが現れる構造。
たとえばStylus上で以下のように設定すると。
#Select--12--option-0
0の部分が都道府県で「北海道」が消えるのですが、国内国外の選択を行った時点で中央の「12」の部分がランダムで変動します。
そのため12じゃなくなると･･･消えない。全部で何パターンあるのかわからないので、それを全部指定するわけにもいかず。
おたすけを･･･。 具体的なサイトを貼ってもらわないことには
たぶん貼られてもcssじゃ解決できない可能性もありそう つーかスレチだろが
なんでﾁｮﾛﾏｰガイジが湧いてんだよ 書き直したせいで冒頭いきなり変な言葉遣いになっている･･･きも
>>174
・質問するときには使用環境を書くのは当たり前（具体的なサイトを書かなかったのは「よくある」から。）
・UserContent.CSSの代わりに古くはStylishを、現在はStylusを使用している「だけ」
＝やってることは同じと判断したが何か問題でも？
北海道～東北じゃないとマウスくるくるかドラッグでスクロールさせなきゃ出てこないのウザくてたまらん
頭に数字か、アルファベットついてたらくるくる減らせるだろうにな。
なので動的生成じゃないサイトでは自分の県以外全部display:noneにしているのだが･･･
>>173
自分もそんな気がしてきた。いったんはブックマークレットの線も考えたが自分がそっち系は疎くて。
Web構築のCSSであればワイルドカード指定なり正規表現的なことが出来るとレファレンスサイトで読んだが
こっち側のCSSではやはり無理？ 俺たち側のCSSなら出来るぞ
お前も早くここまで登ってこいよ待ってるぞ 「そのサイト」限定でよければ、前方一致と後方一致を組み合わせればいけるかもしれない。
[id^='Select--'][id$='--option-0'] CSSでサイトのフォント指定って出来なくなったのでしょうか？
以前はこんな感じでヒラギノを設定していたのですが、いつからか効かなくなりました
修正箇所あったら教えてください
@-moz-document regexp("^(?!http://www.feedly.com).*"){
font,table,href,body,td,p,div,span,ul,li,select,input,textarea,em,a,b,h1,h2,h3,h4,h5,h6,h7 {
font-family: 'ヒラギノ角ゴ4' !important;
}
/*等幅の要素*/
code , kbd , pre , tt , var , samp {
font-family: 'ヒラギノ角ゴ4等幅' !important;
}
/*フォームの部品設定*/
select,input {
font-family:'ヒラギノ角ゴ4等幅' !important;
}
} >>179
httpsでアクセスするようになったのでは？ >>179
feedlyってwwwいらなくね？
wwwつけてアクセスしたらwwwのないfeedly.comにリダイレクトされるよね？ >>180,181
レスどうもありがとう
feedly関係なく訪問したサイト全部にヒラギノを使いたい場合とかどう書けばいいですか？
あれからいろいろ試してみたのですが、どうもうまくいきません フォント名、オプション→既定のフォントの所の選択箱で認識してる名前と同じになってる？ >>184
そこを一緒にしないと駄目なんですかね？
以前はCSSの方を優先して表示されていたのですが https://news.yahoo.co.jp/articles/303c409a9a33ca08e5a323c09ea0d065392f2170
右側にある「おすすめの有料記事」の欄をStylusで消したいのですが、
.yjnSub_section{display:none!important;}
とすると、上にあるアクセスランキングの欄まで消えてしまいます。
同じ名前のクラスだからなのですが、有料記事のものだけ消すにはどう書けばいいか教えてください。 section.yjnSub_section:nth-of-type(4){
display: none !important;
} .yjnSub_section:nth-of-type(4)
ただし4番目であることに依存している。現行のcssでできる限界。 今のところ常にリスト最後にあるから
#yjnSub>#yjnFixableArea section:last-of-type{ display:none!important; } 今のYouTubeは、ウィンドウのサイズを変えるとプレイヤーのサイズも変わりますが、
これを旧UIみたいに固定することはできないでしょうか？
ホームや登録チャンネルの幅はこのままで、ビデオ再生画面だけYouTubeの幅を固定したらいいのでは、
と思いますが、自分でCSSを書いてどうにかしようにもうまくいかないのです。 @-moz-document url-prefix('https://www.youtube.com/watch?v=') {
@media screen and (min-width:○○) and (min-height:○○) {
ここに動画要素のサイズなどを定義
}
}
こんな感じで指定すればいいよ >>194
ありがとうございます。
まだうまくいってないのですが、ヒントをいただいたので頑張ります。
うまくいったら報告します。 url-prefixの最後のv=はない方がいいかも
プレイリストだとlist=が先に来る場合あるし 68から78にバージョン上げたらページ内検索バーの高さが変わらなくなりました
文字を入力するボックスの高さなんですがどうすればいいでしょうか https://news.yahoo.co.jp/feature/1777
「後半を読む」というのが邪魔なので消したいです
<section style="display:none" id="hiddenContent">
というのが、クリックすると
<section style="" id="hiddenContent">
に変わっているのですが、どのように記述すればいいか教えてください >>199
消すなら.loadButtonの部分だけだけど、記事を読むんだよね
@-moz-document domain("news.yahoo.co.jp") {
#hiddenContent {
display: block !important;
}
.loadButton {
display: none !important;
}
} >>200
hiddenContentのほうだけでいけたと思ったら下にいらんボタンがあったｗｗｗ
ありがとうございました タブバーを画面の一番下に移動するcssが分かりません
検索して見つけたのはナビバーとブックマークツールバーの下に移動させるcssだけでした >>202
本スレの470で同じ質問あったから見て アドレスバーを選択したときの水色の枠線を、検索バーと同じ大きさにする方法を教えて下さい… >>206
横からだけどありがとう
地味に気になっていたので助かった 78.02でtoolkit.legacyUserProfileCustomizations.stylesheets を trueにしても
userChrome.cssが反映されないのはなぜですかね >>212
@namespace url(
CSSの最初のこれから始まる１行全部消してみて >>210
ありがちなのはchromeフォルダの置き場所を間違えてる(別のprofileに置いてる、等)
先ずはそこを確認してみては
場所が合ってるなら記述を間違えてる、そもそも78.0.2では有効にならない内容だから、等が原因かも みなさんありがとう。書かれたこと全部やったけど変わらず。
portable版だから?
以前は54のportableを使っていて、78.02(portable)を最近使い始めたんですが、
54はchromeフォルダにuserChrome.cssを入れただけで反映していた
はずなのに。 :\FirefoxPortable\Data\profile\chrome
chromeの場所ここと同じだよね >>217
54とはまた古い
portableはよくわからないけど、216に書いたように54では有効でも78.0.2では無効、な内容なんじゃない？
試しに
* {
color: red;
}
これをuserChrome.cssに書き加えてみ
UIの文字が赤くなるようならcss自体は反映されてるってことだから 54から78だとcssの大半使えなくなってそうだな youtubeのTOPページの表示数を変えるために1つ1つのコンテナの大きさを小さくしてるんだけど
youtubeがページ遷移せずにajaxで切り替えてる？っぽいせいで
たまに適用されなくなるタイミングがあってそれ以降更新しないと適用されなくなるのがうざいんだけどどうすればいい？
#contents.style-scope.ytd-rich-grid-renderer {
padding-left:100px;
}
ytd-rich-item-renderer.style-scope.ytd-rich-grid-renderer {
width: 196px!important;
margin-right: 4px;
}
CSSはこういう感じ
URLが切り替わったらCSSを適用し直すJSも試したけど上手くいかなかった Stylusで要素を消したいのですが、定期的にクラス名が変わります
.sc-fBuWsC{display:none!important;}
.sc-fAjcbJ{display:none!important;}
.sc-caSCKo{display:none!important;}
.sc-kvZOFW{display:none!important;}
.sc-の部分は共通しているようなのでワイルドカードみたいなものでまとめて消したいのですが、どう記述すればいいか教えてください [class^="sc-"]{display:none!important;}
^= 前方一致 $= 後方一致 *= 任意一致
頻出質問だな ただしclass名が複数設定されてる場合は個別のclass名に対して前方後方一致ではなく属性文字列全体に対してであることに要注意 ロケーションバーと検索バーをアクティブにしたときの青枠線を違う色にしたいです
以前は替えられたのですが最近のバージョンアップで変わらなくなりました
WindowsでFirefox79です Firefox80になってWindowsの設定によってタブの読み込み中アイコンが砂時計になるのを青い点に戻すやつ(適当)
.tab-throbber{
background-image: none !important;
background-image: url("chrome://browser/skin/tabbrowser/tab-loading.png") !important;
} ■ このスレッドは過去ログ倉庫に格納されています
