【ヤフオク】ユーザーCSS関連 Part1
【出品者IDをフル表示】
.Products--list .Product__seller {
overflow: hidden;
}
『overflow: hidden;』を書き換える事でフル名表示が可能
【リンクカラーを変更】
a.Product__titleLink:link {
color: #0000cc !important;
}
a.Product__titleLink:visited {
color: #cc0000 !important;
}
a.Button--watchOn {
color: #cc0000 !important;
background-color: #cccccc !important;
border: solid #cc0000 1px !important;
}
.Product__imageData {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
↑コレが復旧ver.
↓コレが復旧前の改悪ver.
.Product__imageData {
width: auto !important;
height: auto !important;
}
【出品者のIDを省略しせず表示】
a.Product__seller {
max-width: 150px !important;
overflow: visible !important;
}
【新品アイコンの色を変更】
span.Product__icon--unused {
color: #000000 !important;
background-color: #87cefa !important;
}
span.Product__icon--store {
color: #000000 !important;
background-color: #da70d6 !important;
}
a.Product__rating:not([data-ylk*="grat:98"]):not([data-ylk*="grat:99"]):not([data-ylk*="grat:100"]):link {
color: #ff0000 !important;
}
a.Product__rating:not([data-ylk*="grat:98"]):not([data-ylk*="grat:99"]):not([data-ylk*="grat:100"]):visited {
color: #ff0000 !important;
}
a.Product__rating:not([data-ylk*="grat:99"]):not([data-ylk*="grat:100"]):link {
color: #ff0000 !important;
}
a.Product__rating:not([data-ylk*="grat:99"]):not([data-ylk*="grat:100"]):visited {
color: #ff0000 !important;
}
a.Product__seller:visited {
color: #ff0000 !important;
}
この板にいる人でWEB関係の人ってそんなにおおくないんだから。
おかげで助かってます
畜生、見づらい。
a.Product__titleLink:link,
a.Product__seller:link,
a.Product__rating:link,
a.Product__bid:link {
color: #0000cc !important;
}
a.Product__titleLink:visited,
a.Product__seller:visited,
a.Product__rating:visited,
a.Product__bid:visited {
color: #cc0000 !important;
}
a.Button--watchOn {
color: #cc0000 !important;
background-color: #cccccc !important;
border: solid #cc0000 1px !important;
}
img.Product__imageData {
width: auto !important;
height: auto !important;
}
div.Result__header {
display: none !important;
}
span.Product__label {
color: #333333 !important;
}
span.Product__priceValue.u-textRed {
color: #cc0000 !important;
}
span.Product__priceValue, span.Product__time {
color: #000000 !important;
}
div.Product__category {
width: auto !important;
}
div.Product__infoTable {
display: block !important;
position: static !important;
float: left !important;
width: calc(100% - 334px) !important;
min-width: 40px !important;
}
div.Product__infoCell--right {
display: block !important;
position: static !important;
width: auto !important;
max-width: none !important;
padding-left: 0 !important;
}
div.Product__sellerArea {
width: auto !important;
max-width: none !important;
}
a.Product__seller {
width: auto !important;
max-width: none !important;
}
div.Product__infoCell--left {
display: block !important;
position: static !important;
width: auto !important;
max-width: none !important;
}
div.Product__priceInfo {
width: 128px !important;
max-width: 128px !important;
position: static !important;
float: left !important;
margin: 0 10px !important;
}
span.Product__price {
display: block !important;
margin-left: auto !important;
margin-right: 0 !important;
text-align: right !important;
width: auto !important;
}
span.Product__price > span.Product__label {
float: left !important;
margin-left: 0 !important;
margin-right: auto !important;
}
div.Product__otherInfo {
position: static !important;
width: 180px !important;
max-width: 180px !important;
float: left !important;
}
div.u-floatL {
float: none !important;
margin-bottom: 10px !important;
}
div.u-floatR {
float: none !important;
}
div.Product__button.js-watch-button {
position: static !important;
text-align: right !important;
margin-right: 20px !important;
}
まだ途中なので許して下さい
入札 残り時間
２行になってるけど、
現在 即決 入札 残り時間 と横１列表示がいいんだけど、どうやればいいんですか？
すごく横長になるけどいいのか？
いいんじゃね？
いまって左側にまとめてあるけど、一度に全部見たいんじゃなくて、
現価格をみて食指が動いたら、入札数と残時間みたくね？
div.Expand__body.js-expandContent {
display: block !important;
}
div.Expand__header.u-marginB15.js-expandTrigger {
display: none !important;
}
改悪前みたいに入札0は - を表示って無理？
「保存した条件」を常に「すべて表示」
div.Filter__body.js-expandContent div.Expand__body.js-expandContent {
display: block !important;
}
div.Expand__header.u-marginB15.js-expandTrigger {
display: none !important;
}
javascriptならたぶんできます
ブラウザの置き換えアドオンで
ヤフオクのURLだけに適用させて
>0</a></div>
↓
>-</a></div>
本当にありがとう
おかげで自分の好みのやつが作れた
http://s.kota2.net/1554776190.png
いいなぁこの画面すごく見やすいね
本来運営自らこういうレイアウトにしてしかるべきなのに
うｐ
見やすいね
こういう感じにしたい
ありがと！！なんとか前より見やすくなった
それちょうだい！
wktk待機
よろしくお願いします
内容によって表示がおかしくなる部分を直してたので遅くなりましたが
完成しましたのでupします
http://whitecats.dip.jp/up/download/1555313000/attach/1555313000.css
ダウンロードパス son
CSSでは無理なので置き換えアドオンで行ってください
尚、FoxReplaceはHTMLを置き換えるとリンクが押せなくなる
バグ?があるのでダメです
>>23
クリック済みのリンクとIDは濃色のほうが見やすいから自分で直した。
>>38
0を-にするんじゃなくて、0を1pxみたいに小さくすることはできないの？
リンクの色はブラウザの種類でも違ったりするので
そこは好みで変更してもらったらいいと思います
入札数0だけの文字の大きさを変えるのはCSSでは不可能なので
JavaScriptのアドオンか置き換えアドオンで実現する必要があります
いただきました
すばらしい！
お前ってひょっとして良い奴だろ
span.Product__price:nth-of-type(1) { と span.Product__price:nth-of-type(2) { の
font-sizeを90％に
1画面により多くの表示をしたいから
.Products--list .Product__imageLink { を 80pxにして使ってる。
5%にしたら価格の数字が見えなくなったｗ
価格は小さくできるのに、なんで入札０の数字は小さくできないんだ？
入札1とかも小さくなるし
// ==UserScript==
// @name ヤフオクの入札数 0 を - へ書き換える
// @include https://auctions.yahoo.co.jp/category/list/*
// @include https://auctions.yahoo.co.jp/search/search*
// ==/UserScript==
(function () {
var result = document.evaluate("//ul[@class='Products__items']//*[@class='Product__bid'][text()='0']/text()[not(ancestor-or-self::style)][not(ancestor-or-self::script)][not(ancestor-or-self::select)]",
document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i=0; node=result.snapshotItem(i); i++)
node.nodeValue = "-";
})();
// ==UserScript==
// @name ヤフオクの入札数 0 を - へ書き換える
// @include https://auctions.yahoo.co.jp/category/list/*
// @include https://auctions.yahoo.co.jp/search/search*
// ==/UserScript==
(function () {
var result = document.evaluate("//ul[@class='Products__items']//*[@class='Product__bid'][text()='0']/text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i=0; node=result.snapshotItem(i); i++)
node.nodeValue = "-";
})();
また>>10 CSSがベースになってるので
改めてありがとうございます
文字サイズなどは自分の画面に合わせてるので
ブラウザのウインドウサイズや解像度で見づらいとかあるかもしれません
>>43 のように環境や好みで調整してもらったほうが良いと思います
頂きました。ありがとうございます
導入させてもらいましたありがとうございます
/*現在価格の色 赤→黒*/
.u-textRed.Product__priceValue{
color: #000000 !important;
}
現在価格は黒で
即決の色を赤にしたいです。
よろしくお願いします。
>>51の下の行にこれ追加で
/*即決価格の色 赤*/
span.Product__priceValue{
color: #FF0000 !important;
}
落札しない俺がカスタムしてもあまり意味はないのだけど。
https://dotup.org/uploda/dotup.org1823156.jpg
即決価格と残り時間は太字じゃなかった
ノーマルの太さにする
span.Product__price:nth-of-type(2) > .Product__priceValue{
font-weight:500 !important;
color: #000000 !important;
}
span.Product__time{
font-weight:500 !important;
}
今は - になってるけど改悪前もこれ？
センタリングされてないせいもあるんだろうけどなんか違和感がある
https://egg.2ch.sc/test/read.cgi/yahoo/1553966408/208
このヤフオク画像の時期がいつかはわからないけど - になってる
ありがと
今気づいたけど出品リストのレイアウトは変わってないから
あっちを見ればいいね
微妙に仕様が変わったのか
カテゴリで絞った時にズレる事があるので下記部分の訂正が必要です
div.Info{
margin-bottom:2px !important;
height: 20px !important;
}
訂正版
http://whitecats.dip.jp/up/download/1555478805/attach/1555478805.css
ダウンロードパス son
他を参考に適当にコピペしてみたけど、どこが違うの？
/*入札数のリンク色 クリック済み*/
a.Product__data-ylk:visited {
color: #ff0000 !important;
}
試してないけどこうじゃないのか？
a.Product__bid:visited {
color: #ff0000 !important;
}
普通の人はあの見辛い画面のまま使ってるんだよな
ヤフオクガチで終わるわな・・・
早期終了の下の位置に持ってくるって無理？
以前のレイアウトは他の方が完成されてるので、違うバージョンで。
たて画面 https://i.imgur.com/L706Wk0.jpg
よこ画面 https://i.imgur.com/AxWOmnJ.jpg
https://www.axfc.net/u/3975343 hage
テキストファイルです。もし良かったら使ってみて
めっちゃレイアウト見難くなって、困ってた。
特定のサイトにだけ、CSS当てるのってどうやってやるんですか？
Ie fire fox chromeだけでも良いので、教えてください。
今はソート以外は前より見易いくらい
これワザと聞いてる。
このスレをもっと多くの人に有効活用してほしい。
一部不具合があったので修正しました
https://www.axfc.net/u/3975650
hage
自分のはFFで左にブックマークを表示させている状態で作ったので
無しの時だとまだ間延びしてしまってイマイチな感じですね
「ブラウザ名+CSS」で検索
今は無きipad用のヤフオクアプリの方が使いやすかった…
ぜんぜん違う要素のところなんでCSSで持っていくのは難しいと思う
じゃまにならないようにするやつ(カテゴリも非表示)
tr.js-postionRight.ProductTable__row > .ProductTable__th{
width: 60px !important;
}
.js-postionRight.ProductTable__row:nth-of-type(2){
position: absolute !important;
}
.js-postionRight.ProductTable__row:nth-of-type(1){
display: none !important;
}
.ProductTable--2col.ProductTable--background.ProductTable{
transform: translateY(-3px);
margin-bottom:35px !important;
}
本当に苦痛以外の何物でもない
あのデザインは全く慣れる気がしない
まだ地味に改悪してる模様
横並び画面で現在と即決が同じだと即決価格のみが現在価格の色で表示されるようになった
まぎらわしいので横画面だけ価格は黒のみにしました。
他にも見易さ改善（自己中）の変更してます。
キー入り
https://www.axfc.net/u/3976529?key=hage
感心感心！
yes
https://headlines.yahoo.co.jp/hl?a=20190504-00000002-impress-sci
乙
userContent.css で変えないとダメだね
https://forest.watch.impress.co.jp/docs/news/1182954.html
翌朝には使えそうね。良かった
そこまでして見ないわ…とか、できること知らないユーザーとかは
もうヤフオク自体離れ気味だったり、もう見てなかったりするんだよね…
スマホと同じなら、メルカリ行くからな。
<ul class="Products__items">
<li class="Product" __seller="出品者ID1"> 商品1 </li>
<li class="Product" __seller="出品者ID2"> 商品2 </li> ...
CSSは、例えば
[__seller = "好きな出品者のID"] { background: border: 2px solid red; }
[__seller = "嫌いな出品者のID"] { display: none; }
再検索するごとに非表示押さなくても
CSSで常に嫌いな出品者の商品を消せるってことだよね
それは便利
現在価格の安い順に固定したいんですがJavaScriptで可能ですか？
コードを教えてほしいです
訂正版
http://whitecats.dip.jp/up/download/1557392907/attach/1557392907.css
ダウンロードパス son
すげースッキリしてきた、さんきゅー
>>96 でズレる人は >>59 に戻してください
#sbnClearBtn2{display: none !important;}
.ptsCate{display: none !important;}
#yschsp{width: 115% !important;}
100〜のスレッドの続きを読む
