【Spotify】曲のシークバーの横幅を広げたり太くしたりするCSS

2025年3月26日Stylebot&Stylus(CSS)

この記事では、PCウェブサイト版「Spotifyスポティファイ」で曲を再生した時下部に表示されるプログレスバー（シークバー）を押しやすいよう横幅調整するCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

2025年3月18日に「Xiaomi 15 Ultra」を購入した時、特典で4ヵ月間の「Spotify Premium」がついてきました。初めて利用したんですが、曲を再生した時に表示されるシークバー（プログレスバー）の横幅が狭いと感じました。

現在再生している場所から大体あそこらへんまで飛ばしたいって時の微妙な位置調整がしにくいです。

ちょっと先を押しただけで何十秒も飛ばされてしまいます。

もう少し細かい調整がしやすいようにシークバー自体の横幅を調整してみます。ついでに太さも変えてみます。

CSSを利用します。CSSは自身の環境上（見た目上）で他人には一切影響しません。迷惑をかけることなく自分のデバイス上だけで楽しめます。いつでも元に戻せます。

本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホやタブレットのアプリ版ではできません。

1. インストール方法
2. 「Spotify」のシークバーサイズを変更するCSS
3. 感想

インストール方法

Chromeウェブストアからインストールできます。

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot - Chrome Web Store

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「Spotify」のシークバーサイズを変更するCSS

スタイルシートを開く

「Spotify」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。

CSS

/*曲のシークバーの横幅をMAXまで広げる*/
div:has(>[aria-label="プレーヤーコントロール"]) {
    max-width: none !important;
    width: 100% !important;
}

/*曲のシークバーの太さ*/
div:has(>[aria-label="プレーヤーコントロール"]) [data-testid="progress-bar-background"],
div:has(>[aria-label="プレーヤーコントロール"]) [data-testid="progress-bar-background"] div {
    height: 16px !important;
}