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

Stylebot&Stylus,YouTube関連

YouTubeのアイコン

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

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

YouTubeの終了画面を小さくする前と後の比較画像

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

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

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

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

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

YouTubeの最後の数秒に表示される終了画面のスクリーンショット

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

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

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

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

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

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

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

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です。右上の「×」でスタイルシートを閉じます。

Stylebot YouTubeの終了画面のサイズを小さくするコードを書き込んだ画面

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

Stylebot→「www.youtube.com」がオンになっていることを確認する

終了画面が設定されているYouTube動画を再生して、表示される場所まで再生します。試しに、僕のこちらのYouTube動画で確認してみます。

ちゃんと、終了画面が小さく表示されました。これで、動画を最後まで楽しめます。左にある終了画面は左側、右にある終了画面は右側に配置されます。

終了画面が小さく表示される

元のサイズと変更した状態の比較GIF画像を貼っておきます。かなりスッキリしたことが分かります。

終了画面を小さくする前と後の比較GIF画像

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

感想

以上、YouTubeの最後に表示される終了画面を、好きなサイズに変更するCSSでした。

YouTube×Stylebotの記事は、いくつか書いているので気になった方は参考にしてみてください。特にチャンネルページのヘッダーを、スタイリッシュにするCSSがおすすめです。

YouTubeのチャンネルページのヘッダーを、CSSでスタイリッシュにした画像

Posted by ナポリタン寿司