当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

YouTube

Stylebotのアイコン

この記事では、YouTubeのサイトを角丸フローティングデザインにするCSSについて書きます。

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

CSSを使って、YouTubeのデザインを角丸フローティングにした画像

YouTube の外観を角丸フローティングデザインにするCSSです。動画サムネイル、サムネイルホバー時、検索ボックス、検索結果、動画再生画面のデザインを角丸＋影付きにします。

Windows11のような柔らかい印象になります。

2022年4月現時点で、YouTubeはサムネイルの四隅がカクカクになっています。Windows11の角丸モダンなデザイン好きからしたら、少し気になるかもしれません。CSSを使うことで、自由にカスタマイズできます。

「YouTubeのカクカク嫌い！角丸ぽわわ～～んにしたい！」という方、ぜひ試してみてください。

実際に適用してみた動画を貼っておきます。

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

※僕はCSS初心者です。汚い可能性があります。ご了承ください。

2022年4月23日追記

CSSがよく分からない方は、Chrome拡張機能がおすすめです。ブラウザにインストールするだけで、YouTubeのサムネイル、ボタンが角丸フローティングデザインになります。正直、こちらの方が簡単なのでおすすめです。

Rounded Tubeのスクリーンショット

詳しくは、以下の記事を参考にしてみてください。「単にサムネイルを角丸にするだけだと物足りない！」という方は、本記事でCSSに挑戦してみてください。

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefoxをご利用の場合

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

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。

「Firefoxへ追加」をクリックします。

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

ライトモード用CSS

YouTubeにアクセスします。Stylebotを使っている人は、右上の拡張機能アイコン→Stylebotを開くをクリックします。

拡張機能ボタン　Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「www.youtube.com」をクリックします。新しいタブでスタイルシートが表示されるので、書き込んでいきます。

書き込めたら、忘れずに「保存」をクリックします。

ライトテーマをお使いの方は、以下のコードになります。ダークモードをお使いの方は、こちらへ飛んでください。

/*必要なコード（全体設定）*/
:root {
  /*好みに応じて数値を変化してみてください*/
  --kadomaru: 20px; /*角丸具合*/
  --anime: 0.4s; /*アニメーション変化時間*/
  --kagedayo: -10px 20px 4px #c8c8c8; /*影具合*/
  --kagedayohoba: -3px 10px 8px #c8c8c8; /*ホバー時の影具合*/
}


/*---------------------------------
サムネイル角丸化
---------------------------------*/
/*動画プレーヤー角丸化*/
.html5-video-player {
  border-radius: var(--kadomaru);
  box-shadow: var(--kagedayo);
  transition: 0.3s;
}

/*
このコードは人によっては邪魔と感じるかもです
動画プレーヤー角丸化:ホバー時
*/
.html5-video-player:hover {
  box-shadow: var(--kagedayohoba);
  transform: translateY(4px);
}

/*動画サムネイル角丸化*/
.style-scope ytd-thumbnail {
  border-radius: var(--kadomaru);
  box-shadow: var(--kagedayo);
  overflow: hidden;
  transition-duration: var(--anime);
}

/*動画サムネイル角丸化:ホバー時*/
.style-scope ytd-thumbnail:hover {
  box-shadow: var(--kagedayohoba);
  transform: translateY(10px);
  /*transform:scale(1.1);*/
}

/*動画一覧の右側余白*/
#items.ytd-grid-renderer>ytd-grid-video-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-downloaded-video-grid-video-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-radio-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-channel-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-playlist-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-movie-playlist-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-movie-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-show-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-game-card-renderer.ytd-grid-renderer {
  margin-left: 20px;
}
/*---------------------------------
サムネイル角丸化終了
---------------------------------*/




/*---------------------------------
検索ボックス
---------------------------------*/
/*検索ボックス横の音声入力非表示*/
#voice-search-button {
  display: none !important;
}

/*検索ボタン非表示*/
button#search-icon-legacy {
  display: none;
}

/*検索ボックス*/
form#search-form {
  border-radius: var(--kadomaru);
  overflow: hidden;
  transition-duration: var(--anime);
  border: 2px solid #1e73be;
}

/*検索ボックス:ホバー時*/
form#search-form:hover {
  transform: translateY(4px);
  border: 2px solid #dc143c;
}

/*検索ボックス内*/
#container.ytd-searchbox:focus {
  border: none;
  box-shadow: none;
}
/*---------------------------------
検索ボックス終了
---------------------------------*/




/*---------------------------------
検索結果カスタマイズ
---------------------------------*/
/*検索結果の「他の人はこちらも視聴しています」非表示*/
.style-scope ytd-search .style-scope.ytd-shelf-renderer {
  display: none;
}

/*残骸の枠線非表示*/
.style-scope ytd-search .ytd-item-section-renderer {
  border: none !important;
}
/*---------------------------------
検索結果カスタマイズ終了
---------------------------------*/




/*---------------------------------
2022年1月13日に追加されたポップアップカスタマイズ
---------------------------------*/
/*ホバー時のポップアップ*/
#video-preview-container.ytd-video-preview {
  border-radius: var(--kadomaru);
  overflow: hidden;
}

/*「後で見る」「キューに追加」非表示
#buttons.ytd-video-preview {
  display: none;
}*/

/*「カーソルを合わせて再生」非表示*/
span.style-scope.ytd-thumbnail-overlay-loading-preview-renderer {
  display: none;
}
/*---------------------------------
2022年1月13日に追加されたポップアップカスタマイズ終了
---------------------------------*/

動画サムネイルがカクカクデザインから角丸になります。

サムネイルが角丸で影付きになる

サムネイルの角丸、影、アニメーション

ホバー時（マウスを乗せた時）に沈むアニメーションを追加しました。より浮いている感がでます。

ホバー時のアニメーション

インライン再生

ホバーした時に表示されるポップアップも角丸にしました。

サムネイルにマウスを乗せた時のポップアップをカスタマイズ
2022年1月13日追記

YouTubeのサムネイルホバー時（マウスを乗せた時）のデザインが、「インライン再生」と呼ばれるポップアップに変化しました。

サムネイルにマウスを乗せると、勝手に画像が拡大されて、その場で動画が再生されます。音声は出ません。その下に「後で見る」、「キューに追加」ボタンが表示されます。

サムネイルホバー時の新UI

上記で紹介しているCSSを使えば、自動的にサムネイルホバーのデザインも角丸になります。

「後で見る」と「キューに追加」を非表示にするコードを使いたい場合は、以下のようにコメントアウト記号を移動してください。

/*↓↓↓このコードを*/
/*「後で見る」「キューに追加」非表示
#buttons.ytd-video-preview {
  display: none;
}*/

/*↓↓↓こうする*/
/*「後で見る」「キューに追加」非表示*/
#buttons.ytd-video-preview {
  display: none;
}

これで非表示になります。使っていない場合は、非表示にすることでスッキリします。

後で見るとキューに追加を非表示

そもそもポップアップメニューを表示したくない場合は、下記記事を参考にしてみてください。設定からオフにできます。

「カーソルを合わせて再生」の文字は非表示

ホバー時に表示される「カーソルを合わせて再生」は非表示にしています。必要な場合は、『「カーソルを合わせて再生」非表示」』のコードを削除してください。

「カーソルを合わせて再生」非表示

チャンネルの動画一覧ページ

ユーザーのアップロード済みの動画一覧も一緒です。こちらは影が少しタイトルと被っています。めんどくさいのでそのままにしています。特に弊害はないかなと思います。

アップロード済みの動画

検索結果のデザイン

検索結果のサムネイルも同様に角丸になります。

検索結果

検索ボックスのデザイン

検索ボックスも少しカスタマイズしてみました。ホバー時に赤枠線に変化させて分かりやすいようにしました。

検索ボックス

動画の再生画面ページ

動画再生時の画面も角丸になります。

動画再生画面

サムネイルホバー時のアニメーションを変更

動画サムネイルのホバー時のアニメーションを押し込んだ風ではなく、拡大するには以下のコードを使います。上記で紹介したコードの「動画サムネイル角丸化:ホバー時」の部分を丸々置き換えてください。

/*動画サムネイル角丸化:ホバー時*/
.style-scope ytd-thumbnail:hover {
  box-shadow: -3px 3px 8px #c8c8c8;
  transform:scale(1.1);
  /*transform: translateY(10px);  この行を削除*/
}

「transform: translateY(10px);」の行を削除して、「transform:scale(1.1);」の左右にあるコメントアウト記号（/*　*/）を削除します。

これでホバーした時にサムネイル全体が拡大されます。好みですね。

ホバー時のアニメーション　拡大

「transform:scale(1.1);」の数字を大きくすることで拡大率を変更できます。1.5倍にしたい場合は「transform:scale(1.5);」にします。

マウスを乗せた時のアニメーション

「このコードは人によっては邪魔と感じるかもです」のコードは、動画再生画面でマウスを乗せた時のアニメーションです。

動画を見ているのに、マウスを乗せると押し込んだようになるので、人によっては邪魔かもです。好みに合わせて使うかどうか決めてください。

再生画面内をホバーした時のアニメーションGIF
再生画面内をホバーした時にアニメーション

ダークモード用CSS

ダークモードを利用している場合は「影なし、角丸だけ」がおすすめです。ダークモードは、右上のプロフィールアイコン→デザインから変更できます。

プロフィールアイコン→デザイン

コードは以下になります。

/*必要なコード（全体設定）*/
:root {
  /*好みに応じて数値を変化してみてください*/
  --kadomaru: 20px; /*角丸具合*/
  --anime: 0.4s /*アニメーション変化時間*/
}


/*---------------------------------
サムネイル角丸化
---------------------------------*/
/*動画プレーヤー角丸化*/
.html5-video-player {
  border-radius: var(--kadomaru);
  transition: 0.3s;
}

/*
このコードは人によっては邪魔と感じるかもです
動画プレーヤー角丸化:ホバー時
*/
.html5-video-player:hover {
  transform: translateY(4px);
}

/*動画サムネイル角丸化*/
.style-scope ytd-thumbnail {
  border-radius: var(--kadomaru);
  overflow: hidden;
  transition-duration: var(--anime);
}

/*動画サムネイル角丸化:ホバー時*/
.style-scope ytd-thumbnail:hover {
  transform: translateY(10px);
/*transform:scale(1.1);*/
}

/*動画一覧の右側余白*/
#items.ytd-grid-renderer>ytd-grid-video-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-downloaded-video-grid-video-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-radio-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-channel-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-playlist-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-movie-playlist-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-movie-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-grid-show-renderer.ytd-grid-renderer,
#items.ytd-grid-renderer>ytd-game-card-renderer.ytd-grid-renderer {
  margin-left: 20px;
}
/*---------------------------------
サムネイル角丸化終了
---------------------------------*/




/*---------------------------------
検索ボックス
---------------------------------*/
/*検索ボックス横の音声入力非表示*/
#voice-search-button {
  display: none !important;
}

/*検索ボタン非表示*/
button#search-icon-legacy {
  display: none;
}

/*検索ボックス*/
form#search-form {
  border-radius: var(--kadomaru);
  overflow: hidden;
  transition-duration: var(--anime);
  border: 2px solid #1e73be;
}

/*検索ボックス:ホバー時*/
form#search-form:hover {
  transform: translateY(4px);
  border: 2px solid #dc143c;
}

/*検索ボックス内*/
#container.ytd-searchbox:focus {
  border: none;
  box-shadow: none;
}
/*---------------------------------
検索ボックス終了
---------------------------------*/




/*---------------------------------
検索結果カスタマイズ
---------------------------------*/
/*検索結果の「他の人はこちらも視聴しています」非表示*/
.style-scope ytd-search .style-scope.ytd-shelf-renderer {
  display: none;
}

/*残骸の枠線非表示*/
.style-scope ytd-search .ytd-item-section-renderer {
  border: none !important;
}
/*---------------------------------
検索結果カスタマイズ終了
---------------------------------*/




/*---------------------------------
2022年1月13日に追加されたポップアップカスタマイズ
---------------------------------*/
/*ホバー時のポップアップ*/
#video-preview-container.ytd-video-preview {
  border-radius: var(--kadomaru);
  overflow: hidden;
}

/*「後で見る」「キューに追加」非表示
#buttons.ytd-video-preview {
  display: none;
}*/

/*「カーソルを合わせて再生」非表示*/
span.style-scope.ytd-thumbnail-overlay-loading-preview-renderer {
  display: none;
}
/*---------------------------------
2022年1月13日に追加されたポップアップカスタマイズ終了
---------------------------------*/

影を付けない角丸サムネイルになります。

ダークモード用の角丸CSS

感想

以上、YouTubeの外観を、角丸フローティングにするCSSでした。

何でもかんでも角丸フローティングにしたい年頃です。

こちらの記事もおすすめ

YouTube