猫でもわかるWebプログラミングと副業

本業エンジニアリングマネージャー。副業Webエンジニア。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のアイコンからスタイルを切り替えられます。