ニコニコのUIが一新されてYouTubeライクになった。
自分としてはほぼ満足だが、少しだけ気になる点があったのでそれを調整した自分用CSSをここに置く。
CSSは、StylusなどのCSS調整アドオンで使える。
もくじ
変更内容
- ニコニコ大百科アイコンの主張の強い赤を除去。
- 検索ヘッダーをマウスホバー時のみ出るようにして、スペースを削減。
- 動画情報内のリンクテキストを青色に変更。
- 不要な要素を非表示。
- 動画情報の折りたたみは使わないので、折りたたみヘッダーを非表示。
- 動画情報内の投稿ユーザーはタイトル横にあるため非表示。
- 「登録されているシリーズ」は一番下にあるため非表示。
- ギフトは使わないため非表示。
- ジャンル表示は不要なため非表示。
- ウィンドウ幅560px以下の場合は、プレイヤーのサイズを71%サイズにして、ウィンドウに収める。
同じ動画シリーズ内の移動は、動画情報一番下の動画シリーズメニューで行うのだが、スクロールが若干手間。
そのため、動画情報の不要な部分を非表示にして縦幅を削減した。
(シリーズをクリックして動画を視聴していれば右に動画シリーズのリストが出るのだが、そうでない場合は出ない)
ソースコード
2024-09-06更新。
サイトの仕様が変更されて使えなくなる可能性はあるので注意。
(2024-08-12公開)
@-moz-document url-prefix("https://www.nicovideo.jp/watch/") {
.bg_layer\.background,
div[data-styling-id=":rng:"],
.surfaceLowEm, .d_flex .h_x5{
background: rgba(0,0,0,0) !important;
}
.cursor_default a{
color: #5480cc !important;
}
@media screen and (max-width: 560px) {
.grid-area_\[player\]{
width: 71% !important;
}}
svg[class*="tagHelpHover"],
a[data-anchor-area="tags"],
.bg-c_serviceColor\.nicodic{
background-color: #2a2a2a;
}
textarea[placeholder="コメントを入力"]{
background: #000;
color: #cfcfd2 !important;
}
button,
.bg_layer\.surfaceMediumEm,
.\[\&\[data-selected\]\]\:bg_layer\.surfaceHighEm[data-selected],
.hover\:bg_layer\.background:is(:hover,[data-hover]),
.\[\&\[data-playing\]\]\:bg_layer\.surfaceMediumEm[data-playing]{
background-color: #000 !important;
color: #c3c5ce;
}
.bg_layer\.background{
background: #000;
}
.bg_layer\.surfaceHighEm{
background: #2a2a2a;
}
.surfaceLowEm,
.d_flex .h_x5{
background: #1b1b1b;
}
.MainContainer-floatingPanel div,
.MainContainer-playerPanel,
.MainContainer-playerPanel div,
.TagSuggestionList,
.TagSuggestionInput-input,
.VideoMenuContainer,
.PlayerPanelContainer div,
.ControllerBoxCommentAreaContainer,.ControllerBoxCommentAreaContainer div,
.ControllerBoxContainer, .HeaderContainer{
background: #1b1b1b;
}
.WatchAppContainer{padding-top:0px;
margin-top: 0px;
}
.MainContainer{
box-shadow:none;
}
/* 消去する要素 */
#dialog\:\:ro\:\:trigger,
.grid-area_\[meta\].d_flex.flex-d_column.gap_x2 > section > div > div.d_flex.flex-d_column.gap_x3,
.grid-area_\[meta\].d_flex.flex-d_column.gap_x2 > section > div > div.d_flex.ai_flex-start.gap_base.pb_x2,
.grid-area_\[meta\].d_flex.flex-d_column.gap_x2 > section > div > dl > div:nth-child(7),
.grid-area_\[meta\].d_flex.flex-d_column.gap_x2 > section > div > dl > div:nth-child(6),
#root > div.d_flex.flex_column.min-w_\[max-content\].min-h_svh > main > div.py_x2.grow_1 > section > div.grid-area_\[bottom\].d_flex.flex_column.gap_x2,
button[data-element-name="share"],
button[data-element-name="nicoad"],
button[data-element-name="gift"],
div[data-name="supporter-content"],
.header,
#VideoMenuDrawer-app,
.grid-area_\[meta\] header,
#UadPlayer,
.common-header-p500sx,
.VideoOptionGuideContainer,
.PreVideoStartPremiumLinkContainer,
#videoDetailInformation, #playlist, #textMarquee, #searchResultExplorer, #playerCommentPanelOuter, #ichibaPanel,
#leftPanel, #appliPanel, #searchResultExplorerContentWrapper, #searchResultExplorerExpand, #videoExplorerExpand, #pageFooter, #wallImageContainer,
#alertWindow, #chipWallList, #feedbackLink, #outline.wrapper div.outer div.sidebar, #tagRelatedBanner, #nicommendContainer, #nicoIchiba,
#hiddenUserProfile, #videoShareLinks, #bottomVideoDetailInformation, #videoHeader .toggleDetailExpand, #foot_logo.foot_logo_image,
#superBanner,#videoExplorerSuperBanner, .parentVideoInfo,.shortVideoInfo, .noNicoru .nicoru-button,.nicoru-button .nicorub-icon,
.nicoru-button .nicorub-balloon, .socialButtons, .appliPanel, .playerTabAds,.tagRelatedNicopedia exists,.nicopediaExistsContainer,.header,
.relatedTagHeader, .relatedTagHeader, .uadTagRelated, .itemList,.tagRelatedBanner,#videoThumbnailImage, #slickgrid_886298message, #slickgrid_886298vpos,
.slick-header.ui-state-default,.favVideoOwnerStar,#videoTitle,.dicIcon,h4,#footer,.tooltip,.nicoSpotAds.active,
#playerAlignmentArea.size_normal #playerContainer.controll_panel #playerTabWrapper,.messageContainer,.lastResBody, .performanceAlert, .horror2016,
.WatchAppContainer-switchToFlash, .UadButtonBalloon, .IchibaContainer, .GridCell BottomContainer-side, .FeedbackLinkContainer,
.BottomContainer-card, .NicoSpotAdContainer, .OwnerNicoliveBannerContainer, .html5_message, .nicoliveNotification.onair, .BottomContainer,
#ncenq-notification.ncenq-notification-bar-narrow .wp .ctt, .MiniBannerAdContainer, #ncenq-notification.ncenq-notification-bar-narrow{
display: none !important;
}
/* 文字設定 */ html,body,div,h1,.h3,h4,h5,h6,p,blockquote,pre,table,th,tr,td,ul,ol,li,dl,dt,dd,form,fieldset,legend,hr,span,a,img,strong,em,
ins,del,cite,abbr,acronym,sup,sub,dfn,code,var,samp,kbd,b,i, .DropDownMenu{
font-weight:800;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
text-decoration: none;
border: inset 0px #222742 !important;
}
html, body, .ReactGridCellContent:hover, .ActionButton{
background: #1b1b1b !important;
}
/* 動画説明欄などを下に移動(HTML5版) */
.WatchAppContainer-main {
display:flex!important;
flex-direction:column
}
.HeaderContainer {
order:2!important;
padding-top:0!important
}
.MainContainer {
order:1!important;
margin-top:16px!important
}
.HeaderContainer {
display:flex!important;
flex-direction:column
}
.TagContainer {
order:-1!important
}
.VideoDescriptionContainer {
order:5!important
}
.CommentPanelContainer {
bottom:0!important
}
.VideoDescription-html a{
color:#D2691E !important;
text-decoration: underline;
}
.VideoDescription-html a:hover{
color:#dd2200 !important;
text-decoration: underline;
}
/* ヘッダー */
#siteHeader, #siteHeaderInner,li.videoPlayback.active a,li.comment a,li.performance a,li.imageQuality a,li.videoPlayback a, .react-grid-HeaderCell, .SearchBox-optionMenu{
background:#2f2f2f !important;
border: inset 0px #222742 !important;
}
#siteHeader #siteHeaderInner ul li:hover,li.videoPlayback.active a:hover,li.comment a:hover,li.performance a:hover,li.imageQuality a:hover,li.videoPlayback a:hover {
background:#D2691E !important;
}
#siteHeader #siteHeaderInner ul li a span {
padding: 0px 6px;
cursor: pointer;
color:#fff !important;
border: inset 0px #222742 !important;
}
#siteHeaderRightMenuContainer, #siteHeaderLeftMenuContainer,.nicolib-SuggestSearch-suggestions.suggestBox,.nicolib-SuggestSearch-suggestion-list.suggestBoxInner,
.TagList .TagItem, .MainContainer-commentPanel, .react-grid-Header, .react-grid-HeaderRow, .VideoMetaOverflowMenuContainer-menu, .DropDownMenu{
background:#2f2f2f !important;
}
#siteHeaderRightMenuContainer a:hover, #siteHeaderLeftMenuContainer a:hover, .TagList .TagItem:hover{
background:#D2691E !important;
}
#siteHeader{
border-bottom: solid 1px #444 !important;
}
.VideoMenuContainer-area .VideoMenuButton{
background:#fff !important;
}
#PAGEURGENT,#PAGEURGENT a{
color:#eee !important;
background:#ff1100 !important;
}
.videoInformation,#videoInfo,.videoHeaderOuter,#outline{
background:#1b1b1b !important;
}
#playerContainerWrapper, #outline{
background: #1b1b1b !important;
}
.searchOption{
background: #000 !important;
}
.videoExplorerContentWrapper, .videoExplorerMenu, .videoExplore, #videoExplorer .videoExplorerBody,#playerSettingPanel,#playerSettingPanelContent,
.searchBox, .searchForm, .earchContent.contents.hasVideo,.column4,.relatedTagList, .relatedTagHeader, .relatedTagItemList, .relatedTagItemList,
.searchContent.contents.hasVideo,.comment.active.openAdvancedSettings, .advancedSettings,.comment.active,#playerSettingPanelTab,
.CommentPanelContextMenuContainer{
background:#171717 !important;
border: inset 0px #222742 !important;
}
.title, .VideoTitle{
color: #ddd !important;
text-shadow:#D2691E 1px 1px 2px;
text-decoration: none !important;
}
.title:hover, .title a:hover, .relatedTagAllLink, .topicPath{
color: #D2691E !important;
}
.searchText, .searchInput, .lastResBody,.videoExplorerBody .searchBox,.searchTypeList, .comment-panel .comment-tooltip, .SearchBox-input,
.CommentPostContainer-commandInput .CommentCommandInput, .CommentPostContainer-commentInput .CommentInput, .CommentInput-textarea,
.CommentCommandPaletteContainer.is-editing{
background:#333 !important;
color: #ddd !important;
border: inset 0px #222742 !important;
box-shadow: 0px 0px 0px #fff inset;
}
.searchSubmitButton, .VideoMenuContainer::before{
border: inset 0px #222742 !important;
}
.searchType.keyword,.searchType.tag,.columnOptionItem.column1, .columnOptionItem.column4, .relatedTagLink, .item, .next, .playlistReplaceButton, .columnOption{
background:#333 !important;
}
.videoMenuToggle {
background: url(http://i.imgur.com/dWHj6pf.jpg) no-repeat !important;
}
#videoMenuTopList {
margin-left: -70px !important;
}
.relatedTagLink:hover, .item:hover, .item.current, .next:hover, .playlistReplaceButton:hover, .columnOption:hover,
.searchType.keyword.active,.searchType.tag.active,.columnOptionItem.column1.active, .columnOptionItem.column4.active,.searchOption a:hover{
color: #eee !important;
background:#D2691E !important;
border: inset 0px #222742 !important;
}
/* 灰色枠線 */
#videoTagContainer .tagInner #videoHeaderTagList .toggleTagEdit,#videoHeaderTagList .videoHeaderTag,.videoExplorerBody .searchBox,
.videoExplorerBody .relatedTagList .relatedTagItem .relatedTagLink, .TagList .TagItem, .SearchBox-input, button, .VideoUploadDateMeta,
.VideoViewCountMeta, .CommentCountMeta, .MylistCountMeta
{
border: solid 1px #444 !important;
box-shadow: 0 0 0 0 #e0e0e0;
}
.item.video.thumbnailLoadSuccess{ background:#1b1b1b !important; }
.relatedTagItem{ margine: 30px !important;}
#topVideoInfo .ch_prof, #topVideoInfo .userProfile { width: 280px !important; }
#videoHeaderDetail h2, body.size_normal, #videoHeader, #videoHeaderDetail, #videoTagContainer.default, #videoMenuWrapper, #videoMenuTopList {
width: 978px !important;
min-width: 898px !important;
}
#videoHeaderDetail{
height: 50px !important;
}
.videoHeaderTitle{
font-size:18px !important;
}
/* タグ画面 */
#videoTagContainer {
padding-right: 0px !important;
}
#videoTagContainer.active .tagInner {
height: auto !important;
overflow: visible !important;
}
#videoTagContainer .tagInner #videoHeaderTagList .toggleTagEdit{
background:#333;
}
#videoHeaderTagList .videoHeaderTag {
height: 14px !important;
font-size: 0.75rem !important;
background:#333 !important;
border-radius: 9px !important;
margin: 0 10px 10px 0 !important;
padding: 5px 9px 9px 29px !important;
font-weight:900;
font-family: "Hiragino Kaku Gothic ProN";
}
#videoHeaderTagList .videoHeaderTag:hover {
background: #D2691E !important;
}
#videoTagContainer .tagInner #videoHeaderTagList li .tagControlContainer, #videoTagContainer .tagInner #videoHeaderTagList li .tagControlEditContainer {
position: absolute;
top: 15%;
left: 7px;
z-index: 1;
white-space: nowrap;
}
#videoTagContainer .tagInner #videoHeaderTagList li .tagControlContainer .dic span.enable {
background: url(http://i.imgur.com/LFgR6jz.jpg) no-repeat !important;
}
#videoTagContainer .tagInner #videoHeaderTagList li .tagControlContainer .dic span.disable {
background: url(http://i.imgur.com/Lg9RhmO.jpg) no-repeat !important;
}
#videoTagContainer .tagInner #videoHeaderTagList li .tagControlContainer .dic span,
#videoTagContainer.isEdit .tagInner #videoHeaderTagList .videoHeaderTag.isNoOwnerLock2.isNoVideoOwner.isLock.isCategory .videoHeaderTagCategory,
#videoTagContainer.isEdit .tagInner #videoHeaderTagList .videoHeaderTag.isNoOwnerLock2.isNoVideoOwner.isLock .videoHeaderTagLock,
#videoTagContainer.isEdit .tagInner #videoHeaderTagList .videoHeaderTag.isNoOwnerLock2.isNoVideoOwner .videoHeaderTagDelete {
width: 20px !important;
height: 20px !important;
vertical-align: middle !important;
}
.channel .ch_prof {
background: #333 !important;
width: 330px !important;
}
.channel .ch_prof h6, .channel .ch_prof p.bread,.channel .ch_prof h6 a {
font-size: 100% !important;
font-weight: bold !important;
}
/* コメントプレイヤー */
.player-tab-content, .player-panel-tab, .player-panel-tab, .playerTabWrapper, .options, .option.placeholder, #playerTabContainer,
.panel-grid.slickgrid_886298.ui-widget,.slick-viewport,.grid-canvas, .comment-panel .panel-header {
color: #ddd !important;
background: #272727 !important;
}
.player-tab-item.comment, .player-tab-item.ng,.button.ng-register-button,.select-box.comment-type,.text, .options,.comment,.context-menu,.copy-message,
.menu,.favVideoOwner, .player-tab-item.comment.active, .player-tab-item.ng.active,.player-tab-item.comment:hover, .player-tab-item.ng:hover,
.player-tab-item.comment.active:hover, .player-tab-item.ng.active:hover,.button.ng-register-button:hover,.select-box.comment-type:hover,.text:hover,
.favVideoOwner:hover, .comment-panel .select-box .options.li:hover{
color: #fff !important;
background:#333 !important;
border: 0px solid #ccc !important;
}
.player-tab-item.comment.active, .player-tab-item.ng.active,.player-tab-item.comment:hover, .player-tab-item.ng:hover,.player-tab-item.comment.active:hover,
.player-tab-item.ng.active:hover,.button.ng-register-button:hover,.select-box.comment-type:hover,.text:hover,.favVideoOwner:hover,
.nicolib-SuggestSearch-suggestion-suggest-items.suggestItem li:hover, .comment-panel .context-menu .menu li:hover{
background: #373737 !important;
}
.player-panel-tabs .player-tab-header .player-tab-item:first-child, .player-panel-tabs .player-tab-header .player-tab-item.active:first-child, .player-panel-tabs .player-tab-header .player-tab-item,
#playerAlignmentArea.size_medium #playerContainer.controll_panel #playerTabWrapper{
border-top: solid 1px #444 !important;
border-left: solid 1px #444 !important;
border-right: solid 1px #444 !important;
border-bottom: solid 1px #444 !important;
}
#playerAlignmentArea.size_normal { width: 898px; }
#playerAlignmentArea.size_normal #playerContainer.appli_panel #playerTabContainer { bottom: 0px !important; }
#playerAlignmentArea.size_medium #playerContainer.controll_panel #playerTabWrapper { height: 461px !important; }
#playerAlignmentArea.size_medium #playerContainer.controll_panel #playerTabWrapper>#playerTabContainer>.playerTabContent { height: 411px !important; }
#playerAlignmentArea.size_medium #playerContainer.appli_panel #playerTabContainer { bottom: 0px !important; }
.player-panel-tabs .player-tab-content { top: 43px !important; }
.panel-body { top: 30px !important; }
div.panel-grid div.slick-viewport { height: 357px !important; }
div.ng-grid div.slick-viewport { height: 347px !important; }
.player-tab-content {
bottom: 5px !important;
padding: 0 5px !important;
}
#playerContainer, #playerContainerSlideArea{
margin-left: auto !important;
margin-right: auto !important;
}
.outer { margin: 0 auto 0px !important; }
.userProfile { margin-top: -30px !important; }
.videoThumb{ height:30px; }
#videoInfo .videoMainInfoContainer {
padding-bottom: 0px !important;
margin-bottom: 0px !important;
border-bottom: #bbb solid 0px !important;
}
div.videoDescription > a,.mylistLinkButton {
color: #D2691E !important;
}
.videoTitle, .originalVideoTitle, .videoHeaderTitle, .log-target-info a{
text-shadow:#D2691E 1px 1px 2px;
font-size:17px !important;
}
#videoInfo{
width:900px;
padding: 15px;
font-weight:700;
text-decoration: none;
z-index: 1 !important;
}
#videoInfoHead{
color: #ddd !important;
}
#playerContainerWrapper{
padding: 0px !important;
margin-bottom: 0px !important;
margin-top: 15px !important;
}
#content{
padding: 0px !important;
margin-bottom: 0px !important;
margin-top: 15px !important;
}
#playerContainerWrapper{
height: auto !important;
}
#root > div.d_flex.flex-d_column.min-w_\[max-content\].min-h_svh > main > div.py_x2.flex-g_1 > section > div.grid-area_\[sidebar\] > div.d_flex.flex-d_column.gap_x2 > div.d_flex.flex-d_column.gap_x2.h_var\(--watch-player-with-actionbar-height\) > section > div{
height: 600px !important;
}
#root > div.d_flex.flex-d_column.min-w_\[max-content\].min-h_svh > main > div.py_x2.flex-g_1 > section > div.grid-area_\[sidebar\] > div.d_flex.flex-d_column.gap_x2{
margin-top: 50px;
}
}
@-moz-document url-prefix("https://www.nicovideo.jp/watch/") {
.simplebar-content,
.FooterContainer,
.MainContainer-marquee,
.VideoPaymentContainer,
.PreVideoStartPremiumLinkOnEconomyTimeContainer,
.CommonHeader{ display: none;}
.ControllerBoxContainer,
.HeaderContainer
{
opacity: 0.0;
transition: opacity 0.3s;
}
.simplebar-content:hover,
.FooterContainer:hover,
.ControllerBoxContainer:hover,
.HeaderContainer:hover
{
opacity: 1;
}
.WakutkoolHeaderContainer,
.FooterContainer-additionals,
.FooterContainer-information{
display: none !important;
}
.MainContainer{
box-shadow:none;
}
#siteHeader,
.MainContainer-commentPanel,
.MainContainer-playerPanel
{
opacity: 0;
transition: opacity 0.3s;
}
#siteHeader:hover,
.MainContainer-playerPanel:hover,
.MainContainer-commentPanel:hover
{
opacity: 1;
}
}
@-moz-document url-prefix("https://www.nicovideo.jp") {
.top_\[\{sizes\.commonHeader\.fixedHeight\}\]{
opacity: 0;
transition: opacity 0.3s;
}
.top_\[\{sizes\.commonHeader\.fixedHeight\}\]:hover{
opacity: 1;
}
#CommonHeader{
margin-top: -60px !important;
}
a[href*="https://account.nicovideo.jp/premium"],
.common-header-m5ds7e,
div[class="common-header-1fxu773"],
.EasyCommentContainer,
#VideoMenuDrawer-app,
.WakutkoolHeaderContainer,
.FooterContainer-additionals,
.FooterContainer-information,
.EasyCommentContainer,
.VideoErrorContainer,
.NC-CreatorSupportAccepting_top,
.MarqueeContainer{ display: none !important;}
.ExpandBoxButton-overlay{
background: rgba(0,0,0,0);
}
.UserDetailsContainer:after{
background-color: #2c2c2c !important;
}
.UserDetailsContainer,
.NiconicoPoint,
.CrossSearch-rowSelector,
.SubMenuLink-link,
.MainMenuItem.NC-Tab,
.TimelineActorFilterButton-actorName,
.TimelineItem-contentTitle,
.TimelineItem-content{
background-color: #000 !important;
color: #c3c5ce;
}
.RankingHeaderContainer-header_sticky,
.NC-MutedVideoCard, .NC-SensitiveCard, .VideoItem.NC-Card{
background-color: #242527 !important;
color: #c3c5ce;
}
.column.sub
{
opacity: 0;
transition: opacity 0.3s;
}
.column.sub:hover
{
opacity: 1;
}
}
メニュー全非表示
動画とコメ入力欄以外を全て非表示にするCSS。
動画以外の情報が見たい時は、マウスホバーで表示する。
動画だけに集中したい上級者向け。
自分はいつもこれで視聴している。
構造は下記ように書くだけで簡単なので、他動画サイトでも使用している。
.hoge {
opacity: 0.0;
transition: opacity 0.3s;
}
.hoge:hover {
opacity: 1;
}
ソースコード
@-moz-document url-prefix("https://www.nicovideo.jp/watch") {
.d_flex.flex_column.gap_x2{
margin-top: 30px;
}
.d_flex.flex_column.gap_x2,
.top_\[\{sizes\.commonHeader\.fixedHeight\}\],
#CommonHeader,
button[data-element-name="share"],
.grid-area_\[meta\]{
opacity: 0.0;
transition: opacity 0.3s;
}
.d_flex.flex_column.gap_x2:hover,
#CommonHeader:hover,
.top_\[\{sizes\.commonHeader\.fixedHeight\}\]:hover,
.grid-area_\[meta\]:hover,
.grid-area_\[sidebar\]:hover{
opacity: 1;
}
.FooterContainer,
.MainContainer-marquee,
.VideoPaymentContainer,
.PreVideoStartPremiumLinkOnEconomyTimeContainer,
.CommonHeader{ display: none;}
.ControllerBoxContainer
{
opacity: 0.0;
transition: opacity 0.3s;
}
.FooterContainer:hover,
.ControllerBoxContainer:hover
{
opacity: 1;
}
#siteHeader,
.MainContainer-commentPanel,
.MainContainer-playerPanel
{
opacity: 0;
transition: opacity 0.3s;
}
#siteHeader:hover,
.MainContainer-playerPanel:hover,
.MainContainer-commentPanel:hover
{
opacity: 1;
}
}
リンク
スクショの動画はこちら。
【ARMORED CORE VI】紲星あかりの名前のない実況【A.I.VOICE実況プレイ】part10 - ニコニコ動画