広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

2023年3月12日JavaScript

YouTubeのアイコン

この記事では、PCウェブサイト版「YouTube」のトップページ、及びチャンネルページの1行に表示される動画の表示数を増やす方法を書きます。【2024年12月追記】使えなくなった対処法を記載しました。

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

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

2023年3月上旬から僕のPC環境で「YouTube」のトップページ、チャンネルページ(動画ページ)の一行に表示されるサムネイル表示数が3列、あるいは4列になってしまいました。

僕の環境だけ?と焦りました。「X(旧Twitter)」で調べてみると同じように変わったという方がいました。

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

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

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

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

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

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

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

リリース元:NeoCortex
記事執筆時のバージョン:0.7.1(2023年5月30日)

【2024年12月追記】使えなくなっていたので別の方法紹介

2024年12月4日時点で本記事のスクリプトは動作しなくなっています。代わりに別の拡張機能を使った方法を紹介しています。以下を参考にしてみてください。

「Tampermonkey」のインストール方法

Chromeウェブストアから「Tampermonkey」をインストールします。

「Tampermonkey」拡張機能をインストールする手順画像1

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

「拡張機能を追加」をクリックします。

「Tampermonkey」拡張機能をインストールする手順画像2

拡張機能のツールバー内に追加されればOKです。

「Tampermonkey」拡張機能をインストールする手順画像3

詳しい使い方については、以下の記事を参考にしてみてください。本記事は、既にインストールして、ある程度使い方を知っている前提です。

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

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

スクリプト(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列に増やした画像

検索結果のサムネイル画像を小さくする記事紹介

2024年3月に「YouTube」の検索結果を開くと、以前より動画のサムネイルが大きくなっていました。大きくなったことで、1ページに表示される動画数が減りました。不便です。

PCウェブサイト版「YouTube」の検索結果でサムネイルが大きくなっている画像

CSSを使うことで、強制的に小さくできます。詳しくは、下記記事を参考にしてみてください。

感想

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

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

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

2023年3月12日JavaScript

Posted by ナポリタン寿司