ニコニコダークテーマCSSの話
なんとなくから始まったよくわからないものの解説的なものです。
どうでもいいQ＆A
・そもそもこれはなに？
ニコニコの主要サービスページを最近はやりのダークテーマ化するなにかです。
・拡張機能とかではないの？
Niconico Darkmodeという拡張機能がありますがこちらはStylusという拡張機能にインストールして利用するものです。
拡張機能で作ったほうがやれることは多いけど作り方がよくわからないのでStylusの機能でできる限りのことをしています。
・インストールページにグダグダ書いてるけどカスタマイズ機能ってなに？
コンフィグ的なものです（？）。環境に合わせて文字色やらプレイヤーのサイズやらを自由に設定できるようにします。
・これじゃなくてよくない？
中身を自由にいじりやすいのが拡張機能と比べての利点だと思います。アップデートすると上書きされちゃうからなんともですが……
自分が使いたいように作っているので、あんまり期待はしないでほしいです。
・別の拡張機能入れたら表示がおかしくなるところがあるんだが？
CSSで指定している部分が一部競合する可能性がある記述が含まれているので仕方ありません。我慢して使うかどちらかの利用を止める、もしくは該当すると思わしき部分の記述を削除するという方法で対処してください。
・静画対応するって言ってしないけど？
めんどくささに対して利用頻度が低いページなので積極的に作る気が起きません……背景を画像で指定している部分も多く差し替えするのも面倒です。
・1日の間に何回更新してるの？
気まぐれで追加したものがよくよく使ってみるとおかしくなるところがあったりしてその修正をしたりしていると更新回数が多くなってしまいます……
余計な機能を追加したりしていますがなるべくアップデート前と使用感が変わらないようにしているのであまり気づかないかもしれません。
・謎のカスタマイズ大杉
このnoteでどんな用途かを説明します。
カスタマイズ機能の目的みたいな話
もともとカスタマイズ機能は広告消せたり、ちょっと文字色変えたりとほんのりな変更をできるようなものを目的としていました。しかし自分が使いたいものをどんどこ追加していくと、どういう経緯で追加されたかよくわからない謎の機能を無理やり使わされることになるため（そのうえ面倒なのでgitでバージョン管理をしていないゆえに旧バージョンを利用できないという問題もあり）なるべく記述の追加があってもそれまでの使用感を損なわないために（また使いたい機能を選択できるように）カスタマイズ機能に違法増築めいたことをしています。
どうもあまりにもカスタマイズ機能を書く部分に詰め込むと途中から機能しなくなるらしいので違法増築し続けると限界が来てしまうようですが今のところは問題なさそうなのでとりあえず続けていきます。あんまりにも手詰まりになったら拡張機能化を目指すかもしれません（制限少なそうだし）。
カスタマイズ機能解説
もともとサラッと配布ページで解説はしていますがこちらではガッツリ（？）と解説していきます。
・広告
ニコニコ動画のバナー広告をdisplay:noneという存在を消す（？）プロパティで見た目だけ消してます。しかしいきなり動画紹介は消せないためぶっちゃけ無駄です。正直拡張機能入れてCSSでわざわざ消すくらいならublockを入れたほうがよいでしょう。ぶっちゃけ必要性が怪しいので記述そのものの削除も考えています。
・かんたんコメントエリア
見た目上コメントを増やすしょうもない機能を問答無用で消しています。使いたい人がいるかもしれないので一応表示オプションもありますが汎用コメントで埋まった動画ほど悲しいものはないと思います。全然コメントがスクロールされないのに画面は埋まってるっておかしいでしょ。
・動画コントロールボタンのフラット化
記述ミスを誤魔化すために作られたカスタマイズ機能。でもはっきりとボタンの判定がわかるのはそれはそれで悪くないかもということで残っています。
・要素の再配置
もともとオリジナルとなったスタイルは動画部分を上に移動して説明欄を下に移動するものだったのでそれを継承していましたがもしかしたら従来表示のほうがいいって人もいるのか…？ということでわりと最近追加しました。
正直動画説明欄が上にある理由がわからない。
・自動設定の拡大サイズをより大きく
自動設定だと拡大サイズが1280？とかそこらへんまでしか大きくならないのでインストール時点では1440pxまで拡大されるようにしていますが1920pxまで拡大するとエコノミーだと画面がどうなんだろう…ということでカスタマイズ機能に分類しています。正直デカすぎるのもどうかと思う。
・ニコる / シリーズ
表示非表示をするだけ。実装したときは邪魔だと思っていたけどシリーズは普通に便利だということに気づいた。
・[実験的]シリーズを動画説明欄と並べる
何が実験的なんだろうと言われそうだけど、実際その通りで別に実験的にする必要はない。全部実験してるようなものだし。
シリーズが動画説明欄下部にあり、なんだかスペースの無駄な気がしたのでとりあえずつけてみた。そのせいで動画説明文は横幅を制限しているがまあ気にならない程度になるように設定しているので問題はないはず。AAとか書く人は知らないけどどうせ環境次第で崩れるから気にしない。
・マーキーエリア
ニュースとか流れるけどublockを入れていると何も流れてこなくなる（たぶん）。プレ垢はこの部分を消せるらしいけど正直どうとでもなるのでプレ垢にも見せつけておけばいいのではと思う。なんとなくなくなるとしっくりこないのでそのままにしているけど、どれくらいの人が非表示にしているんだろう。
・シリーズ欄をハイライト
配色センスのなさが光るカスタマイズ。でもどうしようもない。とりあえず見やすくしておこうで設定した色を引きずってずっとこのままになっている。
・ニコるランクの色
"nicoru-rank"みたいなclass名だったのでそのまま「ニコるランクの色」という名前にしたけど正直これでわかるのだろうか。わかるんだろうけど不親切な気もする。でももう慣れてしまったしたぶんわかってくれると思う。相変わらず配色センスのかけらもないことが判明してしまうので自由に変えられるようにしたというカスタマイズ。
・動画コントロールボタンホバー時の色 / ボリュームバーとシークバーの色
青色は正直ダークテーマとあまり相性がよくないと思い変えられるようにしている。というか青って目に痛い、ような気がする。ブルーライト。
・[実験的]シークバーを自動的に隠す
タスクバーを自動的に隠すの親戚、というわけではない。youtubeは確かホバー中にしか出なかった気がしたので（確認してない？）そのようにしてみた。ついでに動画コントロールボタンも隠せるようにしたけどかなり無理のある状態になったのであまりおすすめしない（そもそも再生時間が見えないのが痛い）。
・[実験的]動画再生ボタンの判定を広げる / 動画再生停止ボタンをプレイヤーを覆うようにする
youtubeは確か動画プレイヤー部分をクリックするだけで再生、停止が行えたはずなのでそれにならってみた。そもそも動画コントロールボタンの端にある小さい再生、停止ボタンまでカーソルを持っていくのも面倒だしサクッとCSS側でできるくらいのことなのだからニコニコも公式で対応してほしいところである。せめて再生ボタンは判定を最初から広げておいてほしい。
・詰めるだけと併用 （マイページ）
新マイページが公開されたころに公開されたガバガバな構成をキュッとしてくれるスタイルと併用するときに使うカスタマイズ。自分が使っていたので併用できるようにちょちょっとしたことをしている。
CSSぜんぜんわからん勢と言いながらヘルプをちょっと出していたら助けてくれた奇特な人だった…（何の話？）
・赤文字部分の色が変えられます （マイページ）
これでわかるのだろうか……？
・More Dark Theme（より暗く）
なんでMoreって言われるかもしれないので予防線を張っているカスタマイズ。バカだからです……
・オレンジテーマ化
これに関してはカスタマイズ機能ではなくそのまま追加してしまってもいい気もしているけどなんとなくカスタマイズに置きっぱなし。
実はホバーボタンの一つが対応していないけどたぶん誰も気にしていないので自分も気にしないことにした。
おわりに
違法増築を繰り返し続けた結果、便利なのか不便なのかよくわからない状態になってしまったけれど8月に公開場所をuserstyles.orgからuserstyles.worldに変えた後でもすでに100インストール以上してもらっています。
もともとStylus自体の知名度が低く、ダークモード拡張機能も存在しているためこちらに気づいてもらえることは少ないしこちらを選ぶ理由もそこまでない気もしますがそれでも使い続けてくれている人がいることに感謝しています。
相変わらずCSSぜんぜんわからん勢なのにも関わらずよくわからんけど動いてるからヨシ！なノリでどうこうしていくのでニコニコに飽きるかどうしようもなくなるまでは更新を続けていくと思うのでお付き合いください。
もし気に入ったらカンパしてくれたらうれしいです（直球）。
この記事が気に入ったらサポートをしてみませんか？