Programming Serendipity

気まぐれに大まかに生きるブログ

ヤフオクの出品者ページで出品アイテムを幅いっぱいまで表示させる

ヤフオクの出品者ページは、PCブラウザ版だとなぜか右に余白があり、数多くの商品を吟味するのに少しでも多く表示させたいというニーズ上もったいなさがある。

そこで、CSSを書き換えてこっち側で強制的に引き延ばして表示させてやるとよい。

StyleBotの場合。ほかの拡張でも同じだと思う。

対象: https://auctions.yahoo.co.jp/seller/* (*がないと認識しない)

コード:

.rcSize100per {
  width: 100%;
}

これだけ。 !importantとかは不要。 なお、ヤフオク側でコードが書き換わった場合はそれに合わせてクラス名を書き換える必要がある。

これだけだと面白くないので、さらにアイテムの高さを高くして、邪魔なウォッチボタンを非表示にしてみる

/* アイテムの高さを増やす */
#AS1m3 .inner .bd .i {
    height: 164px;
}

#AS1m3 .inner .bd .i .th td a {
    height: 164px;
}

/* ウォッチボタン非表示 */
#AS1m3 .modWlBtn {
    display: none;
}

ほかにも変更したいところがあれば、F12の開発者ツールでelementセレクター(chromeならCtrl+Shift+C)を起動し、変更したい場所をクリック、右下のStylesタブで変更したい要素を見つけ、数値を左右にドラッグするなり入力するなりして、できたコードを上書き拡張に乗せるとよい。

追記 2023/8/9

レイアウトが変わったのでコードも変えました。

.gv-l-wrapper--pc.gv-l-wrapper--liquid .gv-l-contentInner, .gv-l-wrapper--pc.gv-l-wrapper--liquid .gv-l-footerInner, .gv-l-wrapper--pc.gv-l-wrapper--liquid .gv-l-headerInner {
  max-width: 2000px;
}