【YouTube】サムネイルの角丸を元のカクカクに戻すCSS

YouTube

YouTubeのアイコン

この記事では、YouTubeの動画サムネイルを、角丸から四角のカクカクに戻すCSSについて書きます。

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

【YouTube】サムネイルの角丸を元のカクカクに戻すCSS

本記事で紹介するCSSを使えば、2022年10月頃から変わったYouTubeの角丸サムネイルを、以前のカクカクに戻せます。

僕は元々四角の時から角丸にしていたので、いつ変わったのか気づきませんでした。どうやら、10月前後から変わったようです。Twitterを見てみると、ちょこちょこ以前のカクカクが良かったというツイートを見つけたので、記事にします。

参考:【Stylebot】YouTubeを角丸フローティングデザインにするCSS

CSSを使います。あくまで自分の環境上を変えるだけです。全員に影響するものではありません。いつでも戻せます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

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

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

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

Stylebot - Chrome ウェブストア

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

サムネイルの四隅をカクカクにするCSS

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

Stylebotのスクリーンショット

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*【角丸廃止】サムネイル*/
a:has(yt-img-shadow>img) {
  border-radius: 0 !important;
}

/*【角丸廃止】終了画面*/
.ytp-ce-video.ytp-ce-large-round, .ytp-ce-playlist.ytp-ce-large-round, .ytp-ce-large-round .ytp-ce-expanding-overlay-background {
  border-radius: 0 !important;
}

/*【角丸廃止】プレイリスト*/
.image-wrapper.ytd-hero-playlist-thumbnail-renderer {
  border-radius: 0 !important;
}

/*【角丸廃止】動画後に一覧で表示されるおすすめ動画*/
div[style^="background-image: url"] {
  border-radius: 0 !important;
}

/*【角丸廃止】サムネイルホバー時のポップアップ*/
ytd-video-preview[rounded-container] #video-preview-container.ytd-video-preview,
ytd-video-preview[rounded-container] #player-container.ytd-video-preview,
ytd-video-preview[rounded-container] #inline-preview-player.ytd-video-preview,
ytd-video-preview:not([has-endorsement]) #inline-preview-player.ytp-rounded-inline-preview,
ytd-video-preview:not([has-endorsement]) #inline-preview-player.ytp-rounded-inline-preview .html5-main-video {
  border-radius: 0 !important;
}

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

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

これで、以前のカクカク状態になります。調べると、どうやら角丸12pxが設定されていました。これを「border-radius: 0 !important;」で、強制的に0=カクカクにしています。

YouTubeの動画サムネイルの角丸を元のカクカクに戻した比較画像

動画プレーヤーの最後に表示される自動再生のポップアップもカクカクにしています。下記画像は間違えて終了画面と言っていますが、正式には自動再生の動画です。

動画最後に表示される自動再生のサムネイルをカクカクにした画像

終了画面のサムネイルもカクカクにしています。動画の最後に表示される投稿者が設定したおすすめ動画です。

動画最後に表示される終了画面のサムネイルをカクカクにした画像

トップページの動画にマウスを置いた時に表示されるポップアップの角丸も廃止しています。

インライン再生の四隅を四角にした画像

余談ですが、このポップアップ機能は設定から無効化できます。

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、YouTubeの角丸サムネイルをカクカクにする方法でした。

本記事は、動画のサムネイルの角丸を除去する内容です。各種ボタンは、角丸のままです。ボタンとかも、カクカクにしたい場合は、以下のCSSを、思い切って使ってみてください。

* {
  border-radius: 0 !important;
}

ボタンやサムネイル、全てがカクカクになります。多分、角丸な部分が一切なくなります。ただし、かなり無理やりなコードなので、どこか表示に不具合が出ているかもしれません。

YouTube上のすべての角丸をカクカクにした比較画像

YouTube