【YouTube】ショート動画のコメント欄の高さを広げるCSS

2023年2月1日YouTube

この記事では、PCウェブサイト版「YouTube」のショート動画にあるコメントポップアップを好きな高さ・横幅に広げるCSSについて書きます。

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

ショート動画のコメント欄ポップアップがデフォルトだと、小さいと感じました。高さが足りないので、スクロール行数を増やしている場合に、コメントが飛ばし飛ばし表示されて、うまく見れません。

そこで、ショート動画のコメントポップアップだけを、好きな高さ・横幅にカスタマイズしてみます。CSSなので、自分の好きなサイズにできます。

いつでも元に戻せます。本記事は、PCウェブサイト向けです。スマホやアプリ版ではできません。

なお、ショート動画のUIが嫌いな方は、下記記事がおすすめかもしれません。

YouTubeのショート動画を普通の動画として表示する拡張機能

この記事では、YouTubeのショート動画を通常の動画リンクに置き換えてくれるChrome拡張機能「Youtube-s ...

https://www.naporitansushi.com/youtube-shorts-block/

1. インストール方法
2. ショート動画の高さ・横幅拡張CSS
3. 感想

インストール方法

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

Stylebot - Chrome ウェブストア

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

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

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

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

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

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

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

ショート動画の高さ・横幅拡張CSS

「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらに以下のコードを書き込みます。

/*YouTubeショートのコメント欄の高さ・横幅*/
.style-scope.ytd-popup-container[target-id="engagement-panel-comments-section"] {
  width: 800px !important;
  height: 80vh !important;
  max-height: none !important;
  max-width: none !important;
}

/*YouTubeショートのコメント欄の位置*/
tp-yt-paper-dialog[role="dialog"]:has([target-id="engagement-panel-comments-section"]) {
  top: 50px !important;
}

「width」が横幅、「height」が高さです。「px」や「vh」といった単位は変えずに、数字だけを各自好きなようにカスタマイズしてみてください。

「YouTubeショートのコメント欄の位置」で位置を調整しています。不要な場合は、そのコードは書かないようにします。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。