ホームのサムネイルを小さくします。
YouTube ホームのサムネ縮小化 by hori68
Details
Authorhori68
LicenseCC-BY-4.0
CategoryYouTube
Created
Updated
Size64 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
ブラウザ、あるいはディスプレイ自体の表示域が狭い人向けのスタイルです。
表示域が広い人にはあまり恩恵がないでしょう。
Firefoxは最新にしないとプレーヤー拡大が機能しません。
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.2
@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 "サムネと動画タイトルの間隔" [6, 2, 10, 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 "インラインプレーヤー拡大" ["YES:拡大する", "NO:拡大しない"]
@var range zoom_wait "インラインプレーヤー拡大待ち時間" [10, 5, 20, 5]
==/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;
}
/* チャンネルアイコンとタイトルの間隔 */
#avatar-link {
margin-right: 6px i;
}
}
/* チャンネルアイコン非表示処理 */
if channel_icon == "NO"{
#avatar-link.ytd-rich-grid-media {
display:none i;
}
#meta.ytd-rich-grid-media {
padding-left: 4px 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-link.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;
}
}
/* ショート動画対応 (ここから) */
/* 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_wait)s i; /* kakudai machi jikan */
animation-timing-function: ease-in-out i;
animation-fill-mode: forwards i;
transform-origin: center top i;
z-index: 3000 i;
}
/* player fuchidori */
div#content.ytd-app:has(ytd-browse[page-subtype="home"][role="main"]) ~ div#video-preview ytd-video-preview[active] .html5-video-container video.html5-main-video {
box-shadow: 0 0 ...