【YouTube Music】「高く評価した音楽に保存されました」CSS

2023年10月8日YouTube

この記事では、PCウェブサイト版「YouTube Music」で、高評価を押した時、左下に表示される「高く評価した音楽に保存されました」トースト通知を小さくしたり、背景色を変更するCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。PC版限定です。スマホではできません。

「YouTube Music」の「高く評価した音楽に保存されました」トースト通知をカスタマイズした比較画像

PCブラウザ「YouTube Music」で、曲を高評価（）すると、左下に「高く評価した音楽に保存されました」と通知が表示されます。初期では、結構なスペースをとっていて、人によっては邪魔だと思うかもしれません。

CSSを使うことで、好きな高さ、背景色に変更できます。背景色を半透明にして、すりガラス風にすることも可能です。そもそもいらない場合は、非表示にすることもできます。

自身の環境上だけで、誰にも迷惑をかけません。いつでもオンオフできます。本記事は、Chrome拡張機能を導入できるPCブラウザ向けです。スマホのアプリ版ではできません。

1. インストール方法
2. 「YouTube Music」のトースト通知カスタマイズCSS
3. 【余談】再生・前へ次へなどのボタンを中央に配置する
4. 【余談】プログレスバーを太くするCSS
5. 感想

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

Change the appearance of the web instantly

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

「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

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

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

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

「YouTube Music」のトースト通知カスタマイズCSS

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

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

高さを調整するCSS

以下のCSSになります。

/*「高く評価した音楽に保存されました」通知の高さ調整*/
tp-yt-paper-toast#toast:has([aria-label="高く評価した音楽"]),
tp-yt-paper-toast#toast [aria-label="高く評価した音楽"] {
    max-height: 25px !important;
    min-height: auto !important;
}

注意事項

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

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

「max-height」の数値を各自で調整します。指定した高さ以上にはならなくなります。とりあえず、上記のままコピペして、実際に通知の大きさを確認して、調整するといいかなと思います。書き込めたら右上の「×」でスタイルシートを閉じます。

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

曲を再生して、高評価ボタン（）を押します。ショートカットキーの+でもOKです。左下に表示される「高く評価した音楽に保存されました」通知の高さが調整されています。僕は通常より、結構小さくしています。

「YouTube Music」の「高く評価した音楽に保存されました」トースト通知の高さをCSSで調整した画像

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

背景を変えて、すりガラス風（モダン）にするCSS

以下のCSSになります。

/*「高く評価した音楽に保存されました」通知をすりガラス風にする*/
tp-yt-paper-toast#toast:has([aria-label="高く評価した音楽"]) {
    background-color: rgb(50 50 50 / 40%) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(4px) !important;
}

「background-color」で「rgba」を使っています。3番目までは色を指していて、最後のパーセントが透明度です。こちらのサイトなどのツールを活用して、好きな色のRGBを調べられます。

「border-radius」が角丸具合です。カクカクが良い場合は、この行を書かないようにするか、数値を「0」にします。僕は、角丸が好きなので、「20」にしています。

「backdrop-filter」の「blur」がぼかし具合です。数値を大きくすると、よりすりガラスになって、見やすくなります。その分、背景がボケます。

上記の高さ調整CSSと併用することも可能です。

「YouTube Music」の「高く評価した音楽に保存されました」トースト通知をすりガラスにした画像

そもそもいらないから非表示にしたい場合のCSS

「高評価に追加するたび、トースト通知してくるのは邪魔！消したい！」という場合、以下のCSSになります。これまで紹介したCSSは、トースト通知を表示する前提のCSSなので、下記CSSを利用する場合は、上記CSSを削除しましょう。

/*「高く評価した音楽に保存されました」通知非表示*/
tp-yt-paper-toast#toast:has([aria-label="高く評価した音楽"]) {
    display: none !important;
}

高評価を押しても、トースト通知が表示されなくなります。見た目上消しているだけなので、「高く評価した音楽」プレイリストには追加されます。

「YouTube Music」の「高く評価した音楽に保存されました」トースト通知をCSSで非表示にした画像

「高く評価した音楽に保存されました」のテキストだけ消してスッキリするCSS

「完全に非表示にするのは嫌だ！ボタンは押せるようにしたい！」という場合、テキストだけ消すのがアリかもしれません。僕は、これを使っています。

/*「高く評価した音楽に保存されました」の横幅、テキスト削除*/
tp-yt-paper-toast#toast:has([aria-label="高く評価した音楽"]) {
    min-width: auto !important;
    padding-left: 0 !important;

    & #text-container {
        display: none !important;
    }
}

2023年10月時点だと、CSSの入れ子を使って、Stylebot上に書き込むと、エラー（赤）が出ます。動作はするので、気にせず書き込めばいいかなと思います。