【YouTube】サムネイル内の時間を拡大して見やすくするCSS

2023年9月16日YouTube

この記事では、PCウェブサイト版「YouTube」のサムネイル内の時間背景を、任意の大きさに拡大して、見やすくするCSSを書きます。

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

YouTubeの動画サムネイルの右下には、その動画がどのくらいの長さなのか確認できる時間が表示されています。

PCウェブサイト版「YouTube」の動画一覧ページ画像 — 参考:ナポリタン寿司の自然日記 – YouTube

本記事を書く一つ前に書いていた記事が、「この時間の背景を透明にする」というものでした。

【YouTube】サムネイル内の時間背景を透明にするCSS

この記事では、PCウェブサイト版「YouTube」のサムネイル内の時間背景を透明にするCSSを書きます。背景 ...

https://www.naporitansushi.com/youtube-thumbnail-time-transp...

何となく思いついて書いた記事ですが、この時ふと、「ここの時間を大きくするのは、透明化と違って、結構需要あるんじゃね？」と思いました。背景を透明にして見にくくするよりも、拡大する記事いいね！ということで、早速記事にします。

大きくすることで、サムネイル右下部分は見にくくなりますが、時間は見やすくなります。好きな大きさに拡大できます。いつでもオンオフできます。本記事は拡張機能を利用できるPCブラウザ向けです。スマホやタブレットなどのアプリ版ではできません。自信の環境上で、他の人には影響しません。

1. インストール方法
2. YouTubeの動画サムネイル内の時間を拡大するCSS
3. 時間の背景を真っ黒にしたい場合
4. 感想

インストール方法

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

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

Stylebot

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

「Chromeに追加」でインストールできます。

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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

YouTubeの動画サムネイル内の時間を拡大するCSS

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

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

/*サムネイル内の動画時間を拡大*/
#time-status.ytd-thumbnail-overlay-time-status-renderer {
    font-size: 20px !important;
    height: 20px !important;
    padding: 2px !important;

    &>span {
        overflow: visible !important;
    }
}

「font-size」と「height」が大きさです。ここの数字を調整することで、任意の大きさに調整できます。もっと大きくしたい場合は、数字を増やします。上記のサンプルCSSをそのまま使うだけでも、そこそこ大きくなると思います。

ただ大きくしただけだと、見切れてしまったので、「overflow: visible」で見切れないようにしています。

ポイント

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

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

下記画像のようになればOKです。記事執筆時点で、CSSの入れ子を使っていると、Stylebot拡張機能上で、エラー（右側に赤いバーが表示される）が出ますが、気にしなくてOKです。問題なく、動作します。右上の「×」でスタイルシートを閉じます。