ユーザーCSS、JSの追加で画面のUI改善快適な管理画面を作る

2022年9月19日 2026年2月28日 yatips

ヤフオク！では出品者向けの管理画面は用意されていないため、広告等不要な要素を削除する必要がある。既存画面にユーザCSS及びJSを追加する形でUIを改善する。

Google Chromeの場合は拡張機能を製作し実装するのが良いと思う。

拡張機能の例
manifest.json

{
"name": "ヤフオク用",
"description": "",
"version": "1.0.0",
"content_scripts": [{
"js": ["js/jquery-3.2.1.min.js", "js/clipboard.min.js","js/script.js"],
"css": ["css/style.css"],
// "matches": ["http://*/*", "https://*/*"]
"matches": ["https://*.yahoo.co.jp/*"]
}],
"manifest_version": 3
}

style.css

@charset "utf-8";
body, input, textarea {
font-family: sans-serif !important;
}
*[id*="promo"],*[id*="ads"],*[id*="Layer"],*[id*="irfroh"],
*[class*="promo"],*[class*="ads"],*[class*="Layer"],*[class*="irfroh"],*[class*="paypay"],[class*="PayPay"],
*[src*="promo"],*[src*="paypay"],
*[href*="paypay"], *[href*="points"],
*[src*="bnr"], *[href*="mycar"],
#js_brand_line_area, .CouponCrm, .ProductInformation__note, .SocialButton, #auc_detail_ymobile_pc, .js-multi-recommend, .ptsLinks, #officialDeliveryArea, .MyCar, #masthead .yjmthcmnlnkarea, .yjmthloginarea b, #js-ListingSwitchText, #js-PCPremiumAppealArea,
#js-PCPremiumSalesmodeArea .Radio__label:nth-child(2), .js-recommend, .prMdl, #msthdLoginName, .TireSearch, .ptsCate, #sbnClearBtn2, .ctgry01, #srchAssistBd,#Sb_2,.StickyNavigation.is-sticky, .ExhibitFinishModal, #modLoanBox, .RecommendList{
visibility: hidden !important;
display: none !important;
height: 0 !important;
width: 0 !important;
}

script.js

$(function(){
$('*[src*=ads]').removeAttr('src');
$('#msthdLoginName').removeAttr('href');
$('script[src*=mempf]').removeAttr('src');
$('a[href*=rdr]').removeAttr('href');
});

この拡張機能のダウンロードは下記より
cleanya
自作の拡張機能の導入方法は下記参照

Chromeの拡張機能を自作する - 虎の穴開発室ブログ
https://toranoana-lab.hatenablog.com/entry/2020/04/23/174421

実際に動かすには、拡張機能の一覧が表示されている画面(chrome://extensions)に移り作成したファイルが入ったディレクトリを読み込ませます。
読み込むにはデベロッパーモードを有効にしておく必要があります。
下の画像のように画面の右側のデベロッパーモードが青くなっていれば問題ありません。