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

2021年12月10日Stylebot&Stylus

Stylebot のアイコン

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

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

YouTube のデザインを角丸フローティング化

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

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

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

前提

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

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

CSS

書き込むコードは以下になっています。

以下のCSS はライトモード用です。ダークモードをお使いの方は、こちらへ飛んでください。

/*必要なコード(全体設定)*/
: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;
}

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

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

そもそもポップアップメニューを表示したくない場合は、下記のCSS を使ってみてください。

/*サムネイルホバー時のポップアップメニュー非表示*/
#video-preview-container.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 についてでした。

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

Posted by ナポリタン寿司