uBlock Originのマイフィルター機能でYouTube動画グリッドのコンテンツ表示量を調整
修正：
2024/03/08 - チャンネルページの文字サイズまで変わってしまうのを修正
uBlock Originは，マイフィルター機能により，独自のフィルターをプレーンテキストとして編集できる．ダッシュボードを開いてマイフィルターを編集する．
そして，以下に示すテキストをコピペ (コピー&ペースト)．変更を適用するのを忘れずに．
! YouTube動画グリッド
!コンテンツの横の長さ
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(width: 240px !important)
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(max-width: 300px !important)
!コンテンツflex
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(flex: 1 0 auto !important)
!コンテンツ間のマージン
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(margin-bottom: 14px !important)
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(margin-right: 5px !important)
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(margin-left: 5px !important)
!コンテンツを並べる
youtube.com##ytd-rich-grid-renderer>#contents>ytd-rich-grid-row:style(display: contents !important)
youtube.com##ytd-rich-grid-renderer>#contents>ytd-rich-grid-row>#contents:style(display: contents !important)
!コンテンツを中央に寄せる
youtube.com##ytd-rich-grid-renderer>#contents.ytd-rich-grid-renderer:style(justify-content: center !important)
!コンテンツグリッドの左右パディング
youtube.com###primary>ytd-rich-grid-renderer>#contents:style(width: auto !important)
youtube.com###primary>ytd-rich-grid-renderer>#contents:style(padding-left: 10px !important)
youtube.com###primary>ytd-rich-grid-renderer>#contents:style(padding-right: 10px !important)
!動画タイトルのテキストサイズ
youtube.com##h3>#video-title-link>#video-title:style(font-size: 1.4rem !important)
youtube.com##h3>#video-title-link>#video-title:style(line-height: 2.0rem !important)
!チャンネル名のテキストサイズ (2024/03/08 チャンネルページの文字サイズまで変わってしまうのを修正)
youtube.com##ytd-rich-grid-renderer #channel -name>#container>#text-container>#text:style(font-size: 1.3rem !important)
youtube.com##ytd-rich-grid-renderer #channel -name>#container>#text-container>#text:style(line-height: 1.8rem !important)
!視聴回数や投稿日などのテキストサイズ
youtube.com##ytd-video-meta-block>#metadata>#metadata-line:style(font-size: 1.3rem !important)
youtube.com##ytd-video-meta-block>#metadata>#metadata-line:style(line-height: 1.8rem !important)
!チャンネルアイコンのサイズ
youtube.com###details>#avatar-link>#avatar:style(width: 3rem !important)
youtube.com###details>#avatar-link>#avatar:style(height: 3rem !important)
youtube.com###dismissible>#details>#avatar-link:style(height: 3rem !important)
!ゴーストカードを消す
youtube.com###contents>ytd-continuation-item-renderer>#ghost-cards>ytd-ghost-grid-renderer:style(display: none !important)
!読み込み部分 flex無効
youtube.com##ytd-rich-grid-renderer>#contents>ytd-continuation-item-renderer:style(flex: 0 0 0 !important)
!動画読み込みスピナーの位置
youtube.com###contents>ytd-continuation-item-renderer>tp-yt-paper-spinner:style(margin: 50px 0 !important)
youtube.com###contents>ytd-continuation-item-renderer:style(padding-left: 27px !important)
youtube.com###contents>ytd-continuation-item-renderer:style(min-width: auto !important)
!ここから新しく追加した箇所
!チャンネルアイコン右マージン
youtube.com###dismissible>#details>#avatar-link:style(mergin-right: 10px !important)
!タイトルテキストの上下マージン
youtube.com###details>#meta>h3.ytd-rich-grid-media:style(mergin: 9px 0 3px 0 !important)
!チャンネルアイコンの上部マージン
youtube.com###dismissible>#details>#avatar-link:style(mergin-top: 9px !important)
!コンテンツメニュー
youtube.com###details>#menu>ytd-menu-renderer:style(right: -10px !important)
youtube.com###menu>ytd-menu-renderer>#button:style(width: 30px !important)
youtube.com###menu>ytd-menu-renderer>#button:style(height: 30px !important)
youtube.com###dismissible>#details>#meta:style(padding-right: 20px !important)
!その他の調整
!ショート，ニュースの非表示
youtube.com##ytd-rich-grid-renderer>#contents>ytd-rich-section-renderer:style(display: none !important)
!チャンネルページのコンテンツ表示幅を増やす
!youtube.com##ytd-two-column-browse-results-renderer.grid:not(.grid-disabled):style(width: 95% !important)
!youtube.com##ytd-two-column-browse-results-renderer.grid:not(.grid-disabled):style(max-width: 100% !important)
!サムネイルの丸さ
!youtube.com###thumbnail>ytd-thumbnail>a#thumbnail:style(border-radius: 3px !important)
!プレイリスト系サムネイルの丸さ
!youtube.com###thumbnail>ytd-playlist-thumbnail>a#thumbnail:style(border-radius: 3px !important)
!youtube.com##yt-collections-stack .collections-stack-wiz__collection-stack2:style(border-radius: 3px !important)
!youtube.com##yt-collections-stack .collections-stack-wiz__collection-stack1:style(border-radius: 3px !important)
!チャンネルアイコンの丸さ
!youtube.com###details>#avatar-link>#avatar:style(border-radius: 3px !important)上記のテキストにより，うまく行けば YouTube のコンテンツの表示数が変わると思われる．
下の画像では，フィルター適用前は 1行あたり5つのコンテンツが表示され，フィルター適用後に 1行あたり6つのコンテンツが表示された．
注意点
コンテンツの表示数には関係ない文もあるので，必要なものだけ選んでもよい．感嘆符(!←これ)をテキスト文の先頭につけることで，その行をコメントアウト(無効化)できる．変化を確かめるためにも使える．
今後，YouTubeのGUIアップデートによって，サイトのデザインが変わったりすると，使えなくなる可能性がある．このフィルターは，2024年3月に作成した．
サイズについては，適当に作ったので，環境や好みによって，テキストサイズとかサムネイルの大きさとかがおかしい場合があるので，各自調整すると良い．
素人が作ったので完璧に動作するとは限らない．
YouTubeのホームページで一番下までスクロールして，新しい動画を読み込む時の見た目が変わる．
このフィルターで何が変わるのか
フィルター文の効果をまとまりごとに紹介．
上に示したフィルター文にて，一番最初のまとまりは
!コンテンツの横の長さ
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(width: 240px !important)
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(max-width: 300px !important)
!コンテンツflex
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(flex: 1 0 auto !important)
!コンテンツ間のマージン
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(margin-bottom: 14px !important)
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(margin-right: 5px !important)
youtube.com##ytd-rich-grid-row>#contents>ytd-rich-item-renderer:style(margin-left: 5px !important)というようになっている．
最初に感嘆符(!)がついてる文については，感嘆符(!)を先頭につけることで，コメントアウトされ，その行はフィルターに関係なく自由に書き込める．
最初のフィルターの文は，カッコ()内に width: 240px とあり，コンテンツの幅が基本240pxになる．
その次の文は，カッコ内にmax-width: 300px とあり，(flexについての行がそのままであれば) この長さまでコンテンツ幅が伸びることができる．
ブラウザのウィンドウの幅をマウスで変えると，ウィンドウのサイズに応じてコンテンツの幅がリアルタイムに少し変わるはずである．
width: 240px と max-width: 300px，これらの2つの数値を変更することで，1行あたりに表示するコンテンツ数が変化してくるはずである．値を小さくすれば，コンテンツの幅が小さくなり表示できるコンテンツ数が増える．
ここでは，widthは基本となる幅と考えて良い．そして，max-widthまでコンテンツが伸びることができる．そのため，widthに基づいてmax-widthの値を調整する．正しい値の調整方法は謎．私は何となくいい感じになるように，勘でやった．
次に，flexがどうのこうのと書かれた文が存在することで，コンテンツの幅が伸びるようになる．
また，マージンの文のところはコンテンツ同士がどれくらい離れるかを調整する．
!コンテンツを並べる
youtube.com##ytd-rich-grid-renderer>#contents>ytd-rich-grid-row:style(display: contents !important)
youtube.com##ytd-rich-grid-renderer>#contents>ytd-rich-grid-row>#contents:style(display: contents !important)
!コンテンツを中央に寄せる
youtube.com##ytd-rich-grid-renderer>#contents.ytd-rich-grid-renderer:style(justify-content: center !important)上記の文があると，ちゃんとコンテンツがつめて表示されるのと，コンテンツ全体の位置が真ん中になる．
ここで，youtube.com##……と書かれてあるフィルター3文の内，上から2文のフィルター効果を下に示す．※効果を明確にするために，Ctrl+スクロール でサイトを50%まで縮小した．
フィルターを適用すると，コンテンツがつめられる．フィルターが適用されていない方は，コンテンツが横に最大6個まで並べられる．
!コンテンツグリッドの左右パディング
youtube.com###primary>ytd-rich-grid-renderer>#contents:style(width: auto !important)
youtube.com###primary>ytd-rich-grid-renderer>#contents:style(padding-left: 10px !important)
youtube.com###primary>ytd-rich-grid-renderer>#contents:style(padding-right: 10px !important)上記の文は，コンテンツグリッドの両サイドにスペースを与える．
このフィルター適用後は下の画像の赤い幅分，余分なスペースができる．
!動画タイトルのテキストサイズ
youtube.com##h3>#video-title-link>#video-title:style(font-size: 1.4rem !important)
youtube.com##h3>#video-title-link>#video-title:style(line-height: 2.0rem !important)
!チャンネル名のテキストサイズ
youtube.com###channel-name>#container>#text-container>#text:style(font-size: 1.3rem !important)
youtube.com###channel-name>#container>#text-container>#text:style(line-height: 1.8rem !important)
!視聴回数や投稿日などのテキストサイズ
youtube.com##ytd-video-meta-block>#metadata>#metadata-line:style(font-size: 1.3rem !important)
youtube.com##ytd-video-meta-block>#metadata>#metadata-line:style(line-height: 1.8rem !important)
!チャンネルアイコンのサイズ
youtube.com###details>#avatar-link>#avatar:style(width: 3rem !important)
youtube.com###details>#avatar-link>#avatar:style(height: 3rem !important)
youtube.com###dismissible>#details>#avatar-link:style(height: 3rem !important)上記の文は，コンテンツのテキストサイズとチャンネルアイコンサイズを変更する．値は勘でやってる．
!ゴーストカードを消す
youtube.com###contents>ytd-continuation-item-renderer>#ghost-cards>ytd-ghost-grid-renderer:style(display: none !important)
!読み込み部分 flex無効
youtube.com##ytd-rich-grid-renderer>#contents>ytd-continuation-item-renderer:style(flex: 0 0 0 !important)
!動画読み込みスピナーの位置
youtube.com###contents>ytd-continuation-item-renderer>tp-yt-paper-spinner:style(margin: 50px 0 !important)
youtube.com###contents>ytd-continuation-item-renderer:style(padding-left: 27px !important)
youtube.com###contents>ytd-continuation-item-renderer:style(min-width: auto !important)YouTubeのホームページを一番下までスクロールすると，新しい動画が読み込まれる．上記のフィルター文は，読み込み時の見た目を変える．
読み込み時の見た目は，なるべく元の状態を維持したかったが，難しくてできなかった．特に，ゴーストカードの扱い方が難しかったので，非表示にすることにした．
上記の文により，下までスクロールすると出てくるゴーストカードは，非表示になる．読み込み時の丸いスピンマークは動画コンテンツの横に移動する．
!ここから新しく追加した箇所
!チャンネルアイコン右マージン
youtube.com###dismissible>#details>#avatar-link:style(mergin-right: 10px !important)
!タイトルテキストの上下マージン
youtube.com###details>#meta>h3.ytd-rich-grid-media:style(mergin: 9px 0 3px 0 !important)
!チャンネルアイコンの上部マージン
youtube.com###dismissible>#details>#avatar-link:style(mergin-top: 9px !important)ここからは，フィルターを作ってしばらくした後に，後から付け足した箇所．上記文は，マージンの調整をする，つまり位置を少し調整した．
!コンテンツメニュー
youtube.com###details>#menu>ytd-menu-renderer:style(right: -10px !important)
youtube.com###menu>ytd-menu-renderer>#button:style(width: 30px !important)
youtube.com###menu>ytd-menu-renderer>#button:style(height: 30px !important)
youtube.com###dismissible>#details>#meta:style(padding-right: 20px !important)上記文は，マウスをコンテンツにかざすと出てくる，縦に3つ並んだ点のマークの位置とサイズを調整する．
!その他の調整
!ショート，ニュースの非表示
youtube.com##ytd-rich-grid-renderer>#contents>ytd-rich-section-renderer:style(display: none !important)上記の文があると，ショートやニュースの箇所が消える．あってもなくてもよい文．
!チャンネルページのコンテンツ表示幅を増やす
!youtube.com##ytd-two-column-browse-results-renderer.grid:not(.grid-disabled):style(width: 95% !important)
!youtube.com##ytd-two-column-browse-results-renderer.grid:not(.grid-disabled):style(max-width: 100% !important)上記の文により，チャンネルページのコンテンツ幅が広がる．
この文が必要であれば，フィルター先頭の"!"マークを外して使用．
!サムネイルの丸さ
!youtube.com###thumbnail>ytd-thumbnail>a#thumbnail:style(border-radius: 3px !important)
!プレイリスト系サムネイルの丸さ
!youtube.com###thumbnail>ytd-playlist-thumbnail>a#thumbnail:style(border-radius: 3px !important)
!youtube.com##yt-collections-stack .collections-stack-wiz__collection-stack2:style(border-radius: 3px !important)
!youtube.com##yt-collections-stack .collections-stack-wiz__collection-stack1:style(border-radius: 3px !important)
!チャンネルアイコンの丸さ
!youtube.com###details>#avatar-link>#avatar:style(border-radius: 3px !important)上記のフィルターを有効化すると，チャンネルアイコンとサムネイルが四角くなる．3pxの部分を全て0pxにすれば，完全な四角になるだろう．
この文が必要であれば，フィルター先頭の"!"マークを外して使用．
フィルターについて
uBlock Originのフィルター構文については次のリンクに書かれている．
フィルター構文:
https://github.com/gorhill/uBlock/wiki/Static-filter-syntax
作ったフィルターは全て subject:style(arg) を使っている．これについて上記リンクと同じページ内に説明がある．
https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#subjectstylearg
フィルターの作成には，CSSの知識が少し必要だった．CSS素人だったので苦労した．
1つのフィルター構文しか使っていないので，上に示した2つのリンクは，フィルター作成のためにはあまり読んでない．
フィルター構文を学ぶことよりも，CSSについてのドキュメントをみたり，google検索していた．
サイトのカスタマイズには，Chromeブラウザを使い，右クリックメニューから選択，又はF12で出せる検証機能を使っていった．
YouTubeのホームページで，横に並ぶ動画の数を増やすことが目的のフィルターはすでに存在する．
これは「--ytd-rich-grid-items-per-row:」の値を変更する方法であるが，これを使うと，ウィンドウを小さくしても，横に並ぶ動画数は維持されるため，コンテンツサイズがとても小さくなってしまっていた．
なんとか，ウィンドウのサイズを小さくしても，コンテンツが異様に小さくならないようにできないか，色々模索していたら，こんなフィルターができた．
このフィルターでは，ウィンドウのサイズに応じて横に並ぶ動画数が変化する．
拡張性や機能性にすぐれたカスタマイズをしたかったら，素直にStylusという拡張機能を使用したほうがいいんだろうと思った．これを機にStylusという拡張機能を入れた．まだ何もしていないが，今後サイトのカスタマイズはStylusを使おうと思っている．
大学のLMSをダークモードにでもしようかな
この記事が気に入ったらサポートをしてみませんか？