広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【YouTube Music】Primeミュージックと同じ操作バーにする方法

YouTube

「YouTube Music」のアイコン画像

この記事では、「YouTube Music(PC版)」で曲を再生している時、下部に表示されるメディア操作バーの並びを左から曲情報、中央に再生・一時停止といった並びに変更する方法について書きます。

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

PC版「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ配置にした画像1

本記事で紹介するCSSを使えば、「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ中央に一時停止ボタンといった配置にできます。

Google Pixel 6a」を購入した時についてきた「Google One」の特典で「YouTube Music」を3か月無料で利用できることを知りました。早速加入したんですが1点気になることがありました。メディア操作バーの配置です。

左側に「前/一時停止/次」、中央に「曲情報」、右側に「音量調節/ループ/シャッフル」となっていました。僕は元々「Amazon Music Prime」を利用していてそちらでは中央に再生・一時停止ボタンがありました。「YouTube Music」とは逆の配置です。

「YouTube Music」と「Amazon Music Prime」のメディア操作バーの比較画像

「Amazon Music Prime」に慣れていた僕からしたら結構気になってしまいました。個人的には中央下に再生・一時停止ボタンがあるほうが好きです。

理由はマウスの移動距離が短くてすむからです。基本的にマウスを画面中央らへんに置いているので「Amazon Music Prime」で曲を操作したい時すっと下のほうに持っていけば操作できていました。

一方で「YouTube Music」だとマウスをわざわざ左下にもっていかないと操作できません。慣れるまで大変だし距離も伸びて困ります。CSSを使って並びを変えることにしました。

だれにも迷惑をかけませんしいつでもオンオフできます。自身の環境上だけです。他の人には影響されません。

「プライムミュージックからYouTubeに移行したけど操作バーが慣れない!中央下に操作ボタンがあると嬉しい!」という方参考にしてみてください。

インストール方法

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

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

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

「Stylebot」拡張機能をインストールする手順画像1

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

「Stylebot」拡張機能をインストールする手順画像2

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

「Stylebot」拡張機能をインストールする手順画像3

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

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

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

YouTube Musicのメディア操作バーを並び替えるCSS

スタイルシートを開く

YouTube Music」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

「Stylebot」拡張機能のスクリーンショット1

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

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

CSSを書き込む

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

CSS
/*下部のメディア操作バーをflexにする(2025年02月16日作成)*/
ytmusic-player-bar.ytmusic-app {
    display: flex !important;
}

/*【メディア操作バー】タイトル(2025年02月16日修正)*/
.middle-controls.ytmusic-player-bar {
    order: 1 !important;
    flex: 1 0 45% !important;
    justify-content: flex-start !important;
}

/*【メディア操作バー】再生、次、前などのメディアキー(2025年02月16日修正)*/
.left-controls.ytmusic-player-bar {
    order: 2 !important;
    width: unset !important;
    flex: 1 0 30% !important;
}

/*【メディア操作バー】音量、ループ、シャッフルなどのメディアキー(2025年02月16日修正)*/
.right-controls.ytmusic-player-bar {
    order: 3 !important;
    width: unset !important;
    flex: 1 0 10% !important;
    justify-content: flex-end !important;
}

2025年2月以前は「display: grid;」の方法を使っていましたが、2月以降「display: flex」方式にしてみました。

【メディア操作バー】タイトル」にある「flex」の「45%」って数字でタイトルの長さを調整できます。長くすれば曲名が長い場合でも見切れにくくなりますが、その分再生・一時停止ボタンなどが右に寄ってしまいます。

ひとまず上記をそのままコピペして後からご自身でお好みに調整するといいかなと思います。

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

書き込めたら右上の「×」でスタイルシートを閉じます。

「Stylebot」拡張機能のスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:music.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

変わったか確認する

一度ページをリロードします。リロードしないと正常に反映されない場合があります。リロードして曲を再生すると下部にメディア操作バーが表示されます。

CSS導入後は中央に「前へ、一時停止、次へ」のボタンが配置されてタイトル(曲名)が左に移動します。比較画像を貼っておきます。

PC版「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ配置にした画像2

Amazonプライムミュージック」と同じです。これで曲を操作したい時、中央下にマウスをもっていけば操作できます。いつもの慣れ親しんだ動きになったので快適です。

PC版「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ配置にした画像3

配置のカスタマイズ

右端にある音量、ループ、シャッフルなどのメディアキーをもっと左に寄せたい!って方は上記CSSの「justify-content: flex-end !important;」って部分を「justify-content: flex-start !important;」に書き換えてください。

さらに「【メディア操作バー】音量、ループ、シャッフルなどのメディアキー」CSSの「flex: 1 0 10% !important;」のパーセント数値を調整します。20%とか30%にするとその分左に寄ってくれると思います。

PC版「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ配置にした画像4

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「music.youtube.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。

感想

以上、「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ配置にするCSSでした。

本記事を最初に公開した2022年11月頃、「Amazonプライムミュージック」が基本シャッフル再生のみという改悪アップデートしたんですよね。シャッフル再生したくなかったら「Amazon Music Unlimited」に加入してねっていう戦略です。

2023年11月に再びアップデートで改善はされたみたいですが、僕はPixelスマホ購入特典で数か月「YouTube Music」を利用して使い勝手がいいなと判断したのでそれ以降も自腹で「YouTube Premium」に加入して楽しんでいます。

音楽はYouTube、買い物や映画(Amazonプライムビデオ)を楽しむならAmazon…というように使い分けています。

2022年11月3日YouTube

Posted by ナポリタン寿司