【YouTube】一行のサムネイル表示数を増やすJavaScript

​​JavaScript

YouTubeのアイコン

この記事では、YouTubeのトップページ、及びチャンネルページの1行に表示される動画の表示数を増やす方法を書きます。

ウェブサイトにJavaScriptを適用できるChrome拡張機能「Tampermonkey（タンパーモンキー）」を利用します。

【YouTube】一行のサムネイル表示数を増やすJavaScript

2023年3月上旬から、僕のPC環境で、YouTubeのトップページ、チャンネルページ（動画ページ）の一行に表示されるサムネイル表示数が3列、あるいは4列になってしまいました。僕の環境だけ？と焦りました。Twitterで調べてみると、同じように変わったという方がいました。

2023年3月に変わったYouTubeのチャンネルページの動画数画像

トップページに関しては、ウェブページの拡大縮小機能を利用することで、任意のサムネイル数に調整できました。YouTubeのトップページにアクセス→キーボードのCtrlを押しながら、マウスのホイール回転です。

2023年3月に変わったYouTubeのトップページ画像

ただし、この方法だとサムネイル表示数だけでなく、それぞれのテキストサイズなど、要素自体が拡大縮小してしまいます。サムネイル表示数だけ調整することはできません。

チャンネルページの動画タブでは、拡大縮小に関わらず、3列でした。以前は、もう少し一行の表示数が多かったと思います。個人的には、多いほうが、目に入る情報量が増えて便利でした。

調べてみると、有志の方が、任意の数に増やすJavaScript（スクリプト）を公開されていました。本記事では導入方法、設定方法を解説します。

外部のスクリプトなので、いずれYouTubeの仕様変更で使えなくなる可能性があります。WindowsのGoogle Chrome、Vivaldiブラウザで検証しました。それ以外のブラウザでは試していないので、動作するか分かりません。

リリース元：NeoCortex
記事執筆時のバージョン：0.7.1（2021年11月19日）

インストール方法

Chromeウェブストアから「Tampermonkey」をインストールします。本拡張機能でなくても、ウェブサイトにJavaScriptを適用できる拡張機能なら何でもOKだと思います。

「Chromeに追加」をクリックします。

「Tampermonkey」のインストール手順画像

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

スクリプトのインストール

以下のサイトからダウンロードできます。

スクリプト（JavaScript）と呼ばれるプログラミングコードです。こちらのコードを、先ほどダウンロードしたJavaScriptを適用できる拡張機能（例：Tampermonkey）に読み込ませることで、任意の表示数に調整できます。

「スクリプトをインストール」をクリックします。

「YouTube Normal Thumbnails」をインストールする手順画像1

「Tampermonkey」をインストールした状態だと、自動的に追加ページに飛びます。「インストール」をクリックします。

「YouTube Normal Thumbnails」をインストールする手順画像2

「YouTube Normal Thumbnails」という名前のスクリプトが登録されればOKです。トグルのオンオフで、有効・無効を切り替えられます。

「YouTube Normal Thumbnails」をインストールする手順画像3

表示数を増やすスクリプトの使い方

本スクリプトをインストールした状態で、「YouTube」にアクセスします。既に開いていた場合は、一度リロードする必要があります。アクセスできたら、Tampermonkey拡張機能アイコンをクリックして、インストールしたスクリプトがオンになっているか確認します。

「YouTube Normal Thumbnails」がインストールされているか確認する手順画像

一行に表示されるサムネイル表示数が、1増えているはずです。僕の場合、3列になっていたのが、4列に戻りました。

PC版YouTubeの一行に表示されるサムネイル表示数を4列に増やした画像

一時的にJavaScriptを停止させたい場合は、「Tampermonkey」アイコン→登録したスクリプトを左クリックします。オンオフを切り替えられます。オンオフした後、一度対象ページをリロードする必要があります。右クリックすると、編集画面が開きます。

任意の表示数に変更する方法

コードの一部を書き換えることで、1列だけでなく、2列、3列…と増やすことが可能です。

YouTubeにアクセスして、Tampermonkey拡張機能アイコンをクリック→「YouTube Normal Thumbnails」を右クリックします。コードの編集画面が表示されます。

この中にある「1」という数字を、好きな数字に置き換えます。26行目にあると思います。

「YouTube Normal Thumbnails」のコードを改造する手順画像1
<!--下記の行を探す-->
                    return origMathMin.apply(Math, arguments) + 1;

<!--以下のように、任意の数に調整する-->
                    return origMathMin.apply(Math, arguments) + 3;

「1」というのが、現在の列数に1列増やすという意味です。3列の場合、4列になります。ここの数字を、「3」にすることで、現在の列数から3列増やすという意味になります。半角数字で入力します。

書き換えたら、上部の「ファイル」タブ→「保存」をクリックします。

「YouTube Normal Thumbnails」のコードを改造する手順画像2

おまけで「YouTube Normal Thumbnails」の名前を、分かりやすい名前に変更するのもアリです。別にやらなくても、操作自体に代わりはありません。好みです。

コード内に、「YouTube Normal Thumbnails」という記述があると思います。ここがタイトルになっています。

<!--以下の部分がスクリプトの名前になっている-->
// @name         YouTube Normal Thumbnails

<!--日本語など、自分が分かりやすい名前にするといいかも？-->
// @name         YouTubeの一行に表示するサムネイル数を増やす

好き名前にすることで、管理する際に、どのスクリプトか分かりやすくなります。

また、「// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com」というコードを追加で書き込むことで、YouTubeアイコンにできます。

<!--以下のコードを、好きな場所に書き込む-->
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
「YouTube Normal Thumbnails」のコードを改造する手順画像3

「変えたところで何」って話なんですけどね。見た目の問題です。

「YouTube Normal Thumbnails」のコードを改造する手順画像4

YouTubeページをリロードします。指定した数だけ、列数が増えます。

PC版YouTubeの一行に表示されるサムネイル表示数を6列に増やした画像

トップページにも反映されます。トップページは、チャンネルページよりも、元々多い列数なので、増やしすぎると少し見にくくなるかもしれません。トップページの列数を基準に調整すると良さそうです。

PC版YouTubeのトップページに表示されるサムネイル表示数を7列に増やした画像

感想

以上、PCウェブサイトのYouTubeで、一行に表示される項目数を、任意の表示数に増やす方法でした。

YouTube公式側で、任意に設定できればいいんですけどね。2023年3月頃にいきなり変わったので、設定に項目が追加されたかな？と思い調べてみましたが、3月12日時点では、見当たりませんでした。

ひとまず、従来の表示数どころか、もっと増やすことができたので大満足です。

​​JavaScript