Webエンジニア猫の日常

試行錯誤しながらエンジニア(プログラマー)として働く猫のブログ。技術的な話や、働き方の話、読書録とか、試行錯誤している日常の話。

ニコ動やニコ生で画面が眩しいのでナイトモード(夜間モード)にしたい

ニコ動やニコ生にナイトモードが欲しい

夜間に見るとニコニコ動画やニコニコ生放送の画面が眩しいからナイトモード(夜間モード)が欲しいという要望があるようです。

これに関して、Stylishというブラウザプラグインを導入することで、ナイトモードにすることが可能なので紹介します。ただし、今回の方法はPC版のニコニコ動画限定の方法です。

f:id:yoshiki_utakata:20180226205036p:plain

Stylishのインストール

StylishはGoogle ChromeとFirefoxで利用できるプラグインです。サイトの見た目を改造できるプラグインです。

Google Chromeの方はこちらからインストール

Stylish - ウェブサイト用カスタムテーマ - Chrome ウェブストア

リンク先から「Chromeに追加」をクリックしてください。

Firefoxの方はこちらからインストール

Stylish - Custom themes for any website – 🦊 Firefox (ja) 向け拡張機能を入手

リンク先から「Firefoxに追加」をクリックしてください。

Stylishを使ってニコ動をナイトモードにする

1. 右上にStylishのアイコンが出ていることを確認する

下の図のようなアイコンが出ていない場合はアドオンがオフになっているかもしれないのでブラウザの設定でアドオンをオンにしてください。

f:id:yoshiki_utakata:20180226203149p:plain

画像はGoogle Chromeのものですが、Firefoxでも同じようなアイコンが出ているかと思います。

2. ナイトモードのスタイルをインストールする

例えば以下の「KURO NICO」というスタイルをインストールします。

userstyles.org

上記ページに飛んで「Install Style」をクリックします。

f:id:yoshiki_utakata:20180226203709p:plain

インストールできたら「Style Installed」の表示に切り替わります。

f:id:yoshiki_utakata:20180226203844p:plain

3. ナイトモードの有効/無効を切り替える

http://www.nicovideo.jp/watch/sm19340914 などの動画視聴ページに移動するとナイトモードが有効になっているかと思います。

もし有効になっていない場合、右上のStylishのアイコンをクリックしてください。

  • Stylishの画面右上が「Stylish ON」になっていることを確認してください。
    • ONになっていない場合はクリックしてONにしてください。
  • 見づらいですが「インストールされたスタイル」をクリックします。
    • 出てきた「KURO NICO」のボタンが「無効にする」になっている場合はスタイルが有効になっています。クリックでナイトモードをオフにできます。
    • 「KURO NICO」のボタンが「有効にする」になっている場合、クリックして有効にしてください。ナイトモードがオンになります。もう一回クリックするとオフになります。

f:id:yoshiki_utakata:20180226204158p:plain

「KURO NICO」のナイトモードの色味が気に入らないんだけど

「KURO NICO」以外にも色んな人がStylishでニコニコ動画のナイトモードを公開しています。

以下のリンクから、好みのナイトモードを探してみてください。モノによっては「ニコニコ生放送」にしか対応していなかったりするので注意してください。

userstyles.org

好きなスタイルをインストールしたら、Stylishのアイコンからスタイルを切り替えられます。