ニコニコ動画の再生画面をYouTubeっぽく使いやすく！

kaizen

Youtube 全盛の時代でも、ふと戻りたくなるのがニコニコ動画。

しかし、YouTube や BiliBili 動画などのよくできたサイトと比べると、ニコニコ動画の再生画面は少し使いにくく感じます。

CSS を上書きして、YouTube っぽいレイアウトにしてみましょう。

現在はニコニコもモダンなデザインに変更されました。

改造内容

レイアウトの変更

【東方】Bad Apple!! ＰＶ【影絵】

YouTube っぽく、タイトルと投稿者コメントが動画の下に来るようにしました。

動画を開くたびに少し下へスクロールするのが地味に面倒だったので、まずここを変えます。

レスポンシブ化

動画のアスペクト比を 16:9 で固定し、画面幅に合わせて動くようにします。

画面が細くなると、コメント欄が動画の下に移動します。

その他細かい調整とおまけ

ついでに、画面上部の ニコニコニュース と プレミアムへの催促 ポップアップも非表示にしています。

導入

Chrome 拡張機能の Stylus を使って CSS を上書きします。

Stylus をインストール

Stylus を Chrome ウェブストアからインストールします。

CSS を書き込む

ニコニコ動画に行き、ブラウザ上部の Chrome 拡張機能のアイコンをクリックします。

上の画像のように表示されたら、URL が書かれた部分をクリックします。あとは下の CSS を貼り付けて保存すれば完了です。

/* ニュース非表示 */
.MainContainer-marquee {
  display: none;
}

/* プレミアム登録催促バナー非表示 */
.VideoOverlayContainer * {
  display: none;
}

/* 動画サイズレスポンシブに */
.PlayerContainer > .VideoContainer {
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
}

@media screen and (min-width: 1286px) and (min-height: 590px) {
  body.is-autoResize:not(.is-fullscreen) .VideoContainer {
    width: auto;
    height: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media screen and (min-width: 1392px) and (min-height: 650px) {
  body.is-autoResize:not(.is-fullscreen) .VideoContainer {
    width: auto;
    height: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* YouTube風なレイアウトに */
.MainContainer {
  margin-top: 3em;
}

.WatchAppContainer-main {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1736px) and (min-height: 850px),
  screen and (min-width: 1392px) and (min-height: 650px),
  screen and (min-width: 1286px) and (min-height: 590px) {
  body.is-autoResize .WatchAppContainer-main {
    display: flex;
    flex-direction: column;
  }
}

.HeaderContainer {
  display: flex;
  flex-direction: column;
  order: 1;
  padding: 0;
}

.BottomContainer {
  order: 2;
}

/* タイトル、投稿者、コメントの並び替え */
.HeaderContainer-topArea {
  order: 2;
}

.HeaderContainer-row {
  order: 3;
}

.TagContainer {
  order: 1;
}

.VideoDescriptionContainer {
  order: 4;
}

/* コメントをレスポンシブに */
@media screen and (max-width: 1286px) {
  .MainContainer-playerPanel {
    position: relative;
    width: 100%;
    height: 25vh;
  }

  .MainContainer-player {
    width: 100%;
  }
}

/* 下部レスポンシブ */
@media screen and (max-width: 1286px) {
  .BottomContainer-main {
    flex-direction: column;
  }

  .BottomSideContainer {
    width: 100%;
  }

  .BottomMainContainer {
    padding-right: initial;
  }

  .BottomContainer {
    width: 100%;
  }

  .VideoGenreMeta,
  .GenreRankMeta {
    display: none;
  }

  .MainContainer {
    margin-top: 0;
  }
}

.FooterContainer {
  min-width: initial;
}

.FooterContainer-informationInner {
  width: 100%;
}

.FooterContainer-additionalsInner {
  width: 100%;
}

/* その他調整 */
body,
html {
  min-width: initial;
}

.WatchAppContainer-main {
  width: 100%;
  max-width: 1920px;
}

@media screen and (min-width: 1736px) and (min-height: 850px) {
  body.is-autoResize .WatchAppContainer-main {
    width: min(80vw, 1920px);
  }
}

.nico-CommonHeaderRoot .common-header-h0l8yl {
  max-width: initial;
  min-width: initial;
  width: clamp(100px, 100%, 1024px);
}

.VideoDescriptionContainer {
  width: 100%;
}

.BottomContainer {
  margin-top: 3em;
}

.baselayout {
  overflow: hidden;
}

さらに使いやすく。おすすめ拡張機能

あわせて、以下の拡張機能も入れています。

# 関連ページ