【YouTube】一行のサムネイル表示数を増やすJavaScript
この記事では、PCウェブサイト版「YouTube」のトップページ、及びチャンネルページの1行に表示される動画の表示数を増やす方法を書きます。
ウェブサイトに「JavaScript」を適用できるChrome拡張機能「Tampermonkey（タンパーモンキー）」を利用します。
2023年3月上旬から、僕のPC環境で「YouTube」のトップページ、チャンネルページ（動画ページ）の一行に表示されるサムネイル表示数が3列、あるいは4列になってしまいました。
僕の環境だけ？と焦りました。「Twitter」で調べてみると、同じように変わったという方がいました。
トップページに関しては、ウェブページの拡大縮小機能を利用することで、任意のサムネイル数に調整できました。「YouTube」のトップページにアクセス→キーボードのCtrlを押しながら、マウスのホイール回転です。
ただし、この方法だとサムネイル表示数だけでなく、それぞれのテキストサイズなど、要素自体が拡大縮小してしまいます。サムネイル表示数だけ調整することはできません。
チャンネルページの動画タブでは、拡大縮小に関わらず、3列でした。以前は、もう少し一行の表示数が多かったと思います。個人的には、多いほうが、目に入る情報量が増えて便利でした。
調べてみると、有志の方が、任意の数に増やすJavaScript（スクリプト）を公開されていました。本記事では導入方法、設定方法を解説します。
外部のスクリプトなので、いずれ「YouTube」の仕様変更で使えなくなる可能性があります。Windowsの「Google Chrome」、「Vivaldi」ブラウザで検証しました。それ以外のブラウザでは試していないので、動作するか分かりません。
リリース元：NeoCortex
記事執筆時のバージョン：0.7.1（2023年5月30日）
「Tampermonkey」のインストール方法
Chromeウェブストアから「Tampermonkey」をインストールします。
https://chromewebstore.google.com/detail/tampermonkey/dhdgff...
Firefoxをご利用の方は、以下からインストールできます。
https://addons.mozilla.org/ja/firefox/addon/tampermonkey/「拡張機能を追加」をクリックします。
拡張機能のツールバー内に追加されればOKです。
詳しい使い方については、以下の記事を参考にしてみてください。本記事は、既にインストールして、ある程度使い方を知っている前提です。
https://www.naporitansushi.com/tampermonkey/スクリプトのインストール
以下のサイトからダウンロードできます。
https://greasyfork.org/ja/scripts/391636-youtube-normal-thum...スクリプト（JavaScript）と呼ばれるプログラミングコードです。こちらのコードを、先ほどダウンロードした「JavaScript」を適用できる拡張機能（例：Tampermonkey）に読み込ませることで、任意の表示数に調整できます。
「スクリプトをインストール」をクリックします。
「Tampermonkey」をインストールした状態だと、自動的に追加ページに飛びます。「インストール」をクリックします。
「YouTube Normal Thumbnails」という名前のスクリプトが登録されればOKです。トグルのオンオフで、有効・無効を切り替えられます。
表示数を増やすスクリプトの使い方
本スクリプトをインストールした状態で、「YouTube」にアクセスします。既に開いていた場合は、一度リロードする必要があります。
アクセスできたら、「Tampermonkey」拡張機能アイコンをクリックして、インストールしたスクリプトがオンになっているか確認します。
一行に表示されるサムネイル表示数が、1増えているはずです。僕の場合、3列になっていたのが、4列に戻りました。
一時的に「JavaScript」を停止させたい場合は、「Tampermonkey」アイコン→登録したスクリプトを左クリックします。オンオフを切り替えられます。オンオフした後、一度対象ページをリロードする必要があります。右クリックすると、編集画面が開きます。
任意の表示数に変更する方法
コードの一部を書き換えることで、1列だけでなく、2列、3列…と増やすことが可能です。
「YouTube」にアクセスして、「Tampermonkey」拡張機能アイコンをクリック→「YouTube Normal Thumbnails」を右クリックします。コードの編集画面が表示されます。
この中にある「1」という数字を、好きな数字に置き換えます。26行目にあると思います。
<!--下記の行を探す-->
return origMathMin.apply(Math, arguments) + 1;
<!--以下のように、任意の数に調整する-->
return origMathMin.apply(Math, arguments) + 3;「1」というのが、現在の列数に1列増やすという意味です。3列の場合、4列になります。ここの数字を、「3」にすることで、現在の列数から3列増やすという意味になります。半角数字で入力します。
書き換えたら、上部の「ファイル」タブ→「保存」をクリックします。
おまけで「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」ページをリロードします。指定した数だけ、列数が増えます。
トップページにも反映されます。トップページは、チャンネルページよりも、元々多い列数なので、増やしすぎると少し見にくくなるかもしれません。トップページの列数を基準に調整すると良さそうです。
検索結果のサムネイル画像を小さくする記事紹介
2024年3月に「YouTube」の検索結果を開くと、以前より動画のサムネイルが大きくなっていました。大きくなったことで、1ページに表示される動画数が減りました。不便です。
CSSを使うことで、強制的に小さくできます。詳しくは、下記記事を参考にしてみてください。
感想
以上、PCウェブサイトの「YouTube」で、一行に表示される項目数を、任意の表示数に増やす方法でした。
「YouTube」公式側で、任意に設定できればいいんですけどね。2023年3月頃にいきなり変わったので、設定に項目が追加されたかな？と思い調べてみましたが、3月12日時点では、見当たりませんでした。
ひとまず、従来の表示数どころか、もっと増やすことができたので大満足です。