YouTubeの動画再生ページのデザインを旧デザインに近づけます。
Mix Old and New YouTube UI by mmahhi
Details
Authormmahhi
LicenseMIT License
Categorywww.youtube.com
Created
Updated
Size7.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
概要
YouTubeの動画再生ページのデザインを旧デザインに近づけるユーザーCSSです。
以下のような機能があります。
- 視聴回数と投稿日時が動画タイトルの下に表示。
- チャンネル概要と動画メニューが2段で表示。
- チャンネル登録ボタンを赤色で表示。
完全に元のデザインに戻したい方は、「Restore Old YouTube UI」をおすすめします。
サポート
ユーザーCSSのインストール方法については、こちらのページで解説しています。
→「ユーザーCSSのインストール方法について」
Firefoxにて動作確認をしております。不具合がありましたらご連絡ください。可能な限り対応します。
ご意見、感想、不具合報告などは、こちらのページからどうぞ。
→「ユーザーCSSに関するお問い合わせフォーム」
更新履歴
Ver.1.0.0 (2023/01/21)
- 公開
Ver.1.0.1 (2023/02/12)
- YouTubeタグをタイトル上に表示させるように戻しました。
※視聴回数と投稿日時隣のYouTubeタグはリンクではありませんので、ご注意ください。
Ver.1.0.2 (2023/03/13)
- タイトル上に表示されることのある、ジオタグアイコンが表示されない不具合を修正。
Ver.1.0.3 (2023/04/14)
- チャンネル画面で、「メンバーになる」と「チャンネル登録」ボタンが入れ替わっていた変更を元に戻しました。
Ver.1.0.4 (2023/04/28)
- 概要欄の背景が二重になっていた問題を修正。
Ver.1.0.5 (2023/05/16)
- 投稿日時・視聴回数、YouTubeタグが表示されない不具合を修正。
Ver.1.0.6 (2023/09/28)
- 横幅の狭い画面で閲覧した際に、一部表示が崩れる問題を修正。
Ver.1.0.7 (2023/10/06)
- 高評価ボタンなどが、左に寄ってしまう不具合を修正。
Ver.1.0.8 (2023/10/26)
- 投稿日時・視聴回数が表示されない不具合を修正。
Ver.1.0.9 (2023/10/29)
- 新デザインに合わせ、チャンネル画面の「メンバーになる」と「チャンネル登録」ボタンの位置の入れ替えを解除。
Ver.1.0.10 (2023/12/07)
- 動画タイトルが太字になる不具合を修正。
Ver.1.0.11 (2023/01/20)
- 概要欄の上に空白が表示される不具合を修正。
Ver.1.0.12 (2023/05/10)
- チャンネル名が長い場合に表示が乱れる問題に対処。
Source code
/* ==UserStyle==
@name Mix Old and New YouTube UI
@namespace mix-old-new-youtube-ui
@version 1.0.12
@description YouTubeの動画再生ページのデザインを旧デザインに近づけます。
@author mmahhi <mmahhi@s203.xrea.com> (http://mmahhi.s203.xrea.com/)
@supportURL http://mmahhi.s203.xrea.com/userstyle/contact/
@license MIT
==/UserStyle== */
@-moz-document domain("www.youtube.com") {
/* Mix Old and New YouTube UI Ver.1.0.12 (2023/05/10) */
h1.ytd-watch-metadata, ytd-playlist-panel-renderer[modern-panels]:not([hide-header-text]) .title.ytd-playlist-panel-renderer, #label.keyboard-focus.yt-dropdown-menu #icon-label.yt-dropdown-menu, ytd-engagement-panel-title-header-renderer[modern-panels] #title-text.ytd-engagement-panel-title-header-renderer, ytd-engagement-panel-title-header-renderer[modern-panels]:not([ads-semantic-text]) #title-text.ytd-engagement-panel-title-header-renderer, ytd-watch-metadata[title-headline-xs] h1.ytd-watch-metadata {
font-weight: 500;
}
/* チャンネル登録の色を赤に */
ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
color: var(--yt-spec-static-brand-white)!important;
background-color: var(--yt-spec-brand-button-background)!important;
}
ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover {
background-color: #e00!important;
}
ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
color: var(--yt-spec-text-primary) !important;
background-color: var(--yt-spec-badge-chip-background) !important;
}
ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover {
background-color: var(--yt-spec-mono-tonal-hover) !important;
}
.ytp-sb-unsubscribe {
background-color: var(--yt-spec-badge-chip-background);
color: var(--yt-spec-text-primary);
}
/* 動画タイトルを旧デザインのフォントに */
h1.ytd-watch-metadata {
font-family: "Roboto","Arial",sans-serif;
font-size: var(--yt-navbar-title-font-size) !important; /* 1.8rem */
line-height: 2.6rem !important;
}
/* ボタンとチャンネル概要を2段に */
ytd-watch-metadata[modern-metapanel-order] #owner.ytd-watch-metadata {
min-width: 100%;
width: 100%;
}
ytd-video-owner-renderer[watch-metadata-refresh] {
width: 100%;
}
#sponsor-button.ytd-video-owner-renderer:not(:empty), #purchase-button.ytd-video-owner-renderer:not(:empty), #analytics-button.ytd-video-owner-renderer:not(:empty) {
margin-left: auto;
}
#subscribe-button {
margin-left: auto;
}
#top-row.ytd-watch-metadata {
flex-wrap: wrap;
}
#owner {
order: 2;
margin-right: 0;
}
ytd-watch-metadata[actions-on-separate-line] #top-row.ytd-watch-metadata {
display: flex;
}
#top-row.ytd-watch-metadata[style="border-bottom: 1px solid var(--yt-spec-10-percent-layer); padding-bottom: 10px;"] {
padding-bottom: 0 !important;
border-bottom: none !important;
}
.ryd-tooltip {
display: none !important;
}
/* YouTubeタグをタイトル上に表示 */
yt-formatted-string#super-title {
display: inline !important;
}
/* ジオタグアイコン表示 */
ytd-watch-metadata #title a.yt-simple-endpoint[href*="/results"] {
display: inline !important;
}
/* 投稿日時・視聴回数の位置をタイトルの下に移動 */
#ytd-watch-info-text {
display: block;
}
#info-container.ytd-watch-metadata, ytd-watch-info-text > #info-container.ytd-watch-info-text {
display: none;
}
#top-row.ytd-watch-metadata {
margin-top: 15px;
}
#description-inner + tp-yt-paper-tooltip, ytd-watch-info-text tp-yt-paper-tooltip {
left: 0px !important;
top: -130px !important;
z-index: 0;
user-select: auto;
cursor: auto;
}
#description-inner + tp-yt-paper-tooltip #tooltip, #description-inner > ytd-watch-info-text .tp-yt-paper-tooltip {
display: block !important;
background: none;
color: var(--yt-spec-text-secondary);
font-size: 1.4rem;
line-height: 2rem;
padding: 0;
margin: 0;
border-radius: 0;
-webkit-line-clamp: 1;
overflow: hidden;
display: -webkit-box !important;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
/* チャンネル名が2段になると日付・視聴回数表示がずれるので1段に制限 */
ytd-watch-metadata.ytd-watch-flexy ytd-channel-name #text.ytd-channel-name > a {
-webkit-line-clamp: 1;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
ytd-watch-metadata #description.ytd-watch-metadata {
background: none !important;
}
ytd-text-inline-expander:not(.ytd-playlist-header-renderer) {
border-radius: 12px;
background: var(--yt-spec-badge-chip-background);
padding: 12px;
}
ytd-watch-metadata[description-collapsed]:not([skinny-mode]) #description.ytd-watch-metadata ytd-text-inline-expander:hover {
background: var(--yt-spec-button-chip-background-hover);
}
#description-inner.ytd-watch-metadata {
margin: 0;
}
#expand.ytd-text-inline-expander {
bottom: 12px;
}
ytd-watch-metadata[actions-on-separate-line] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata {
justify-content: flex-end; /* 画面が小さいときでも右揃えに */
}
ytd-watch-metadata[flex-menu-enabled] #actions.ytd-watch-metadata {
flex: none !important;
}
ytd-watch-metadata[flex-menu-enabled] #actions {
justify-content: flex-end;
width: 100%;
}
ytd-watch-metadata[flex-menu-enabled] #actions-inner.ytd-watch-metadata {
width: 100% !important;
}
/* 開閉時などのアニメーションを無効化 */
.fade-in-animation.tp-yt-paper-tooltip {
opacity: 1 !important;
animation-delay: 0s !important;
animation-duration: 0s !important;
}
.fade-out-animation.tp-yt-paper-tooltip {
opacity: 1 !important;
animation-delay: 0s !important;
animation-duration: 0s !important;
}
ytd-watch-metadata #description-inner .fill.yt-interaction, ytd-watch-metadata #background {
opacity: 0 !important;
background: none !important;
}
ytd-watch-metadata #description-inner .stroke.yt-interaction {
border: none !important;
}
ytd-comments-header-renderer[modern-typography] .count-text.ytd-comments-header-renderer {
font-weight: 500;
font-size: 1.6rem;
line-height: 2.2rem;
}
/*@media (min-width: 1500px) {
#description-inner tp-yt-paper-tooltip {
left: 1px !important;
top: -84px !important;
}
}*/
}