Youtube用CSS

お久しぶりです、元気です。

先日、Youtubeの方でサムネイルが大型化するといった改変が入ってしまいました。
非常に見辛いレイアウトなのでCSSで対応しようという次第です。

現在自分が使用しているブラウザGoogle Chromeでの方法になるので他のブラウザの場合にはうまくいかない場合もあると思いますのでご了承を。

まず、CSSをいじったり適用するためのアドオン
Stylus　https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja
か
Stylish　https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ja
を導入。（ブラウザの拡張機能のリンクです）

この先は検索してみたところそれっぽいのがあったので
YouTube ホームのサムネ縮小化　by hori68というものを入れさせていただきました。

まぁこれでも概ねOKだったのですが少しいじってみて

@namespace url(http://www.w3.org/1999/xhtml);
#avatar-link.ytd-rich-grid-video-renderer {
margin-top: 6px !important;
margin-right: 6px !important;
}
h3.ytd-rich-grid-video-renderer {
margin-top: 6px !important;
}

#contents.ytd-rich-grid-renderer{
margin-right: initial !important;
margin-left: initial !important;
width: initial !important;
}
#contents.ytd-rich-shelf-renderer{
margin-right: initial !important;
margin-left: initial !important;
}

/* video title */
#video-title.ytd-rich-grid-video-renderer {
font-size: 1.4rem !important;
line-height: 1.6rem !important;
max-height: 3.2rem !important;
}
/* channel name */
#text-container.ytd-channel-name {
font-size: 1.3rem !important;
}
/* metadata */
#metadata-line.ytd-video-meta-block {
font-size: 1.3rem !important;
line-height: 1.6rem !important;
}

/* thumbnail size (210-210) split 5 */

ytd-rich-item-renderer {
margin-right: 5px !important; /* split size */
margin-bottom: 24px !important; /* row split size */
margin-left: 0px !important;
width: calc(100% / var(--ytd-rich-grid-items-per-row) - 5px - 0.01px); /* 5px = split size */
}

#contents.ytd-rich-grid-renderer, #grid-header.ytd-rich-grid-renderer{
max-width: calc(var(--ytd-rich-grid-items-per-row) * 210px + var(--ytd-rich-grid-items-per-row) * 5px) !important;
} /* 210px = max saize , 5px = split size */

ytd-video-meta-block {
min-width: 165px !important;
}

@media screen and (max-width: 994px){
ytd-app[mini-guide-visible_] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 3 !important;
}
}
@media screen and (min-width:995px) and (max-width: 1209px){
ytd-app[mini-guide-visible_] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 4 !important;
} /* 72 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 995 */
}
@media screen and (min-width:1210px) and (max-width: 1424px){
ytd-app[mini-guide-visible_] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 5 !important;
} /* 72 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 1210 */
}
@media screen and (min-width:1425px){
ytd-app[mini-guide-visible_] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 6 !important;
} /* 72 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 1425 */
}

@media screen and (max-width: 1162px){
ytd-app[guide-persistent-and-visible] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 3 !important;
}
}
@media screen and (min-width: 1163px) and (max-width: 1377px){
ytd-app[guide-persistent-and-visible] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 4 !important;
} /* 240 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 1163 */
}
@media screen and (min-width: 1378px) and (max-width: 1592px){
ytd-app[guide-persistent-and-visible] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 5 !important;
} /* 240 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 1378 */
}
@media screen and (min-width: 1593px){
ytd-app[guide-persistent-and-visible] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 6 !important;
} /* 240 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 1593 */
}
@media screen and (min-width: 1593px){
ytd-app[guide-persistent-and-visible] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 7 !important;
} /* 240 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 1593 */
}
@media screen and (min-width: 1593px){
ytd-app[guide-persistent-and-visible] ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 8 !important;
} /* 240 + 24 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 5 + 210 + 24 + 20 = 1593 */
}

と変更してみてます。
変更後の方が一列当たりの表示サムネ数が増えているので見易いです。
が、これも環境によるところがあるかもしれません。

これを追加するには
ツールバーに並んだStylusのアイコンクリックから管理→左の列にある「新スタイルを作成」→コードの欄に上記コードを貼り付けて左列のスタイル名を記入して保存

これで適用されてない場合は競合するCSSが入っていると思いますので拡張機能のアイコン押して拡張タイトルの左にあるチェックボックスを有効無効いじってみてください。

ではまたいつかバイバイ

マビ英終了だってよ！

パソコン新しくしたからどんなもんかなって触ってみてて
色々変わっちゃってるけどやっぱ面白いなーって思ってたとこで

ますますパソコンでやるゲームなくなった

NUMBERS 天才数学者の事件ファイル

BSの番組だけど毎回EDの曲でネオスチーム思い出す。