ホームのサムネイルを小さくします。
YouTube ホームのサムネ縮小化 by hori68
Details
Authorhori68
LicenseCC-BY-4.0
CategoryYouTube
Created
Updated
Size65 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
ブラウザ、あるいはディスプレイ自体の表示域が狭い人向けのスタイルです。
表示域が広い人にはあまり恩恵がないでしょう。
サムネサイズや文字サイズなどある程度のカスタマイズが可能です。
プレーヤー拡大は調子悪いです。もう無理かも。
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YouTube ホームのサムネ縮小化
@namespace userstyles.world/user/hori68
@version 1.7
@description ホームのサムネを数年前の小さいサイズに戻します
@author hori68
@license CC-BY-4.0
@preprocessor stylus
@var select thumb_split_size "サムネと隙間のサイズ" ["S210_5:210px,5px", "S210_10:210px,10px",
"S240_5:240px,5px", "S240_10:240px,10px",
"S270_5:270px,5px", "S270_10:270px,10px",
"S300_5:300px,5px", "S300_10:300px,10px",
"S180_4:180px,4px"]
@var select channel_icon "チャンネルアイコン" ["NO:非表示","YES:表示"]
@var range font_size_r "文字サイズ" [1.4, 1.2, 1.6, 0.1]
@var range split_th_ti "サムネと動画タイトルの間隔" [8, 2, 14, 2]
@var range split_ti_ch "動画タイトルとチャンネル名の間隔" [6, 2, 8, 2]
@var range split_mt_th "メタデータとサムネの間隔" [20, 14, 24, 2]
@var select title_line "動画タイトル行数" ["L2:2行まで", "L3:3行まで", "L4:4行まで", "LF:とにかく全部表示"]
@var select round "角の丸め具合" ["R8:8(推奨)", "R0:0(丸めない)", "R4:4(かすかに丸める)", "R12:12(公式)"]
@var select zoom_player "インラインプレーヤー拡大(不調)" ["NO:拡大しない","YES:拡大する" ]
@var range zoom_wait "インラインプレーヤー拡大待ち時間" [10, 5, 20, 5]
@var select delete_ad "広告枠の扱い" ["YES:非表示","NO:表示"]
==/UserStyle== */
@-moz-document domain("youtube.com") {
i = !important //
ytd-browse[page-subtype="home"]{
@media screen and (min-width:820px){
ytd-rich-grid-row #contents {
margin: 0 i;
}
/* News セクション */
ytd-rich-section-renderer #content {
margin: 0 i;
}
ytd-rich-section-renderer #content #contents {
margin: 0 i;
}
}
/* チャンネルアイコン非表示処理 */
if channel_icon == "NO"{
#avatar-container.ytd-rich-grid-media {
display:none i;
}
#meta.ytd-rich-grid-media {
padding-left: 6px i;
}
}else{
#avatar-container.ytd-rich-grid-media {
margin-left: 4px i;
margin-right: 8px i;
}
}
/* 文字サイズ調整 (ここから)*/
/* 動画タイトル */
#video-title.ytd-rich-grid-media {
font-size: (font_size_r)rem i;
line-height: (font_size_r + 0.2)rem i;
max-height: ((font_size_r + 0.2)*2)rem i;
}
#video-title.ytd-rich-grid-slim-media {
font-size: (font_size_r)rem i;
line-height: (font_size_r + 0.2)rem i;
max-height: ((font_size_r + 0.2)*2)rem i;
}
yt-formatted-string.title-text.ytd-display-ad-renderer {
font-size: (font_size_r)rem i;
line-height: (font_size_r + 0.2)rem i;
max-height: ((font_size_r + 0.2)*2)rem i;
}
/* チャンネル名 */
#byline-container.ytd-video-meta-block {
max-height: initial i;
}
#text-container.ytd-channel-name {
font-size: (font_size_r - 0.1)rem i;
line-height: (font_size_r + 0.4)rem i;
max-height: (font_size_r + 0.4)rem i;
}
yt-formatted-string#body-text.ytd-display-ad-renderer {
display:none i;
}
/* メタデータ(再生回数、日時) */
#metadata-line.ytd-video-meta-block {
font-size: (font_size_r - 0.1)rem i;
line-height: (font_size_r + 0.2)rem i;
}
/* コミュニティ投稿 */
ytd-post-renderer yt-formatted-string {
font-size: (font_size_r)rem i;
line-height: (font_size_r + 0.4)rem i;
}
/* 文字サイズ調整 (ここまで) */
/* サムネと動画タイトルの間隔 */
#avatar-container.ytd-rich-grid-media {
margin-top: (split_th_ti)px i;
}
h3.ytd-rich-grid-media {
margin-top: (split_th_ti)px i;
}
ytd-menu-renderer.ytd-rich-grid-media {
margin-top: (split_th_ti)px i;
}
div.title.ytd-display-ad-renderer {
margin-top: (split_th_ti)px i;
}
/* 動画タイトルとチャンネル名の間隔 */
h3.ytd-rich-grid-media {
margin-bottom: (split_ti_ch)px i;
}
/* メタデータとサムネの間隔 */
ytd-rich-item-renderer:not([is-movie]):not([is-post]) {
margin-bottom: (split_mt_th)px i;
}
/* 動画タイトル行数処理 */
if title_line == "L3"{
#video-title.ytd-rich-grid-media {
-webkit-line-clamp: 3 i;
max-height: initial i;
}
}else if title_line == "L4"{
#video-title.ytd-rich-grid-media {
-webkit-line-clamp: 4 i;
max-height: initial i;
}
}else if title_line == "LF"{
#video-title.ytd-rich-grid-media {
-webkit-line-clamp: initial i;
max-height: initial i;
}
}
/* 角の丸め処理 */
if round == "R0"{
a.ytd-thumbnail {
border-radius: initial i;
}
div#contents div#content ytd-display-ad-renderer #media-container.ytd-display-ad-renderer {
border-radius: initial i;
}
}else if round == "R4"{
a.ytd-thumbnail {
border-radius: 4px i;
}
div#contents div#content ytd-display-ad-renderer #media-container.ytd-display-ad-renderer {
border-radius: 4px i;
}
}else if round == "R8"{
a.ytd-thumbnail {
border-radius: 8px i;
}
div#contents div#content ytd-display-ad-renderer #media-container.ytd-display-ad-renderer {
border-radius: 8px i;
}
}
/* 広告排除対応 */
if delete_ad == "YES"{
div#contents ytd-rich-item-renderer:has(div#content ytd-ad-slot-renderer){
display: none i;
}
div#contents div#content ytd-ad-slot-renderer{ /* has を解釈できないブラウザ用 */
display: none i;
}
}
/* ショート動画対応 (ここから) */
/* section jouge wo sukoshi tsumeru */
#rich-shelf-header.ytd-rich-shelf-renderer {
margin: 12px 0 12px 8px i;
}
/* tsugou ni yori short no marume ha 8 kotei */
ytd-rich-grid-slim-media[is-short] a.ytd-thumbnail {
border-radius: 8px i;
}
/* 縦3点メニューの表示場所確保 */
ytd-rich-grid-slim-media[is-short] div#dismissible:after {
content:'';
position: relative;
height: 26px;
display:block;
}
/* title ya menu wo thumbnail no ue ni muriyari idou */
/* shoujiki hanbun kurai wakatte nai */
ytd-rich-grid-slim-media[is-short] div#details {
position: absolute i;
display: initial i;
bottom: 0 i;
width: 100% i;
}
ytd-rich-grid-slim-media[is-short] div#details a.ytd-rich-grid-slim-media {
position: sticky i;
display: flex i;
flex-direction: row i;
}
ytd-rich-grid-slim-media[is-short] div#details div#menu {
position: static i;
}
/* title, metadata no iro yara ichi yara */
ytd-rich-grid-slim-media[is-short] div#details a.ytd-rich-grid-slim-media {
z-index: 200 i;
}
ytd-rich-grid-slim-media[is-short] div#details span {
color: white i;
text-shadow: 0 0 2px black i;
word-wrap: anywhere i;
}
ytd-rich-grid-slim-media[is-short] div#details h3.ytd-rich-grid-slim-media {
padding: 12px 6px 4px 6px i;
}
ytd-rich-grid-slim-media[is-short] div#details div#metadata {
padding: 0px 6px 4px 6px i;
z-index: 200 i;
}
/* menu icon no iro yara ichi yara */
ytd-rich-grid-slim-media[is-short] div#details div#menu ytd-menu-renderer {
position: relative i;
margin-top: 0 i;
}
ytd-rich-grid-slim-media[is-short]:hover div#details div#menu yt-icon {
z-index: 200 i;
color: var(--yt-spec-text-primary);
}
ytd-menu-renderer.ytd-rich-grid-slim-media {
opacity: 1 i;
}
/* kabu no kage */
ytd-rich-grid-slim-media[is-short] div#details:before {
content:'';
display:inline-block;
position: absolute;
z-index: 100;
bottom:26px;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
width: 100%;
height: 100px;
border-radius: 8px;
}
/* ショート動画対応 (ここまで) */
}
/* インラインプレーヤー対応 (ここから) */
if zoom_player == "YES"{
/* player, mute/jimaku button, jimaku kakudai */
@keyframes inline-player-animation {
0%{
transform: scale(1);
}
100%{
transform: scale(2);
}
}
div#content.ytd-app:has(ytd-browse[page-subtype="home"][role="main"]) ~ div#video-preview ytd-video-preview[active] .html5-video-container,
div#content.ytd-app:has(ytd-browse[page-subtype="home"][role="main"]) ~ div#video-preview ytd-video-preview[active] div.ytp-inline-preview-ui,
div#content.ytd-app:has(ytd-browse[page-subtype="home"][role="main"]) ~ div#video-preview ytd-video-preview[active] div.ytp-caption-window-container {
animation-name: inline-player-animation i;
animation-duration: 1s i;
animation-delay: (zoom...