【YouTube】終了画面の画像サイズを小さく表示する方法

2022年6月25日2022年11月6日YouTube

この記事では、YouTubeの最後の数秒に表示される終了画面の画像サイズを小さくする方法について書きます。

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

Chrome拡張機能のStylebotを使って、CSSを適用することで、YouTubeの終了画面の画像サイズを好きな大きさに変更できます。0.8倍、0.5倍といったように好きなサイズを指定できます。

終了画面とは、YouTube動画の最後に表示されるおすすめ動画や再生リストのことです。画像をクリックすると、その動画なり、再生リストなりを開きます。

あれは、25秒以上の動画に、運営者が、手動で設定できるようになっています。25秒未満の動画には、そもそもつけることができません。

YouTube見ている方は、誰しも一度は思ったことあると思います。「最後のおすすめ動画のサムネイルサイズでかすぎ！邪魔！おすすめとかどうでもいいから、動画をもっと見させてくれ！」と…。僕もその一人です。

1つだけなら、ちょーどいい感じなんですが、2つ、3つと表示されると、もはや終了画面がメインになって、肝心の動画が背景と化します。

以前、以下の記事にて、終了画面を一切表示させないようにするChrome拡張機能を紹介しました。（Hide Labels and End Cards on Youtube）

YouTubeの最後に表示されるポップアップを非表示にする拡張機能

この記事では、YouTubeの最後に表示されるチャンネル登録の勧誘、おすすめ動画などの終了画面を根こそ ...

https://www.naporitansushi.com/youtube-end-card-hide/

Firefoxをご利用の方は、「Remove YouTube End Cards & End Screen Videos」で代用できます。

上記拡張機能（アドオン）を利用すると、チャンネル登録、再生リスト、おすすめ動画など、全ての終了画面が非表示になります。

完全に終了画面いらない人にとっては便利だと思うんですが、「おすすめ動画もやっぱり表示してほしい！」という方には不便です。そこで、本記事では、画像サイズを少しだけ小さくして表示する方法について書きます。非表示にはしません。

CSSと呼ばれるコードを利用しますが、本記事で全部紹介するので、コピペするだけでOKです。初心者でもできると思います。今回利用するChrome拡張機能「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

1. インストール方法
2. YouTubeの終了画面を小さくする手順
3. 感想

インストール方法

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

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

Stylebot

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

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

Firefox・Edgeをご利用の場合

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

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

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

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

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

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

YouTubeの終了画面を小さくする手順

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

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

/*終了画面のサイズを小さくする*/
.ytp-ce-element.ytp-ce-element-show {
  transform: scale(0.5) !important;/*括弧内の数字で大きさ調整*/
}

/*左の終了画面を左寄せ*/
.ytp-ce-element[class*="left-quad"] {
  transform-origin: left;
}

/*右の終了画面を右寄せ*/
.ytp-ce-element[class*="right-quad"] {
  transform-origin: right;
}

「transform: scale(0.5)」の「0.5」の数字が大きさ指定になっています。

通常サイズが「1」になっているので、「0.5」は半分のサイズにするという意味です。もっと小さくしたい場合は、「0.3」とかにしてみましょう。逆にもう少し大きくしたい場合は、「0.7」とかにしましょう。

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