ニコニコ動画のコメント欄の縦幅が広すぎるからUserCSSで対抗 2024年11月27日〜

* 使い方
FirefoxでStylusをインストールして、新規にこのUserCSSを新規作成して貼り付ける。
Stylus – 🦊 Firefox (ja) 向け拡張機能を入手
https://addons.mozilla.org/ja/firefox/addon/styl-us/

* 解説
色々改善してるうちにこのバージョンが安定と見て完成の形に。
デバックついでの分かりやすさのためにも色をつけているので、好みで味付け可能。意外と気に入っている。
高さ調整でピクセル設定を妥協で39に設定ニコるボタンと数字の干渉のため。気にしなければ35pxくらいまで詰められる。35〜45pxでお好み設定で。
色は「#000000」「#FFFFFF」などのRGB設定の方が良いかも。
ポイントは、コメント欄に表示されるコメントがPタグなため、ここの幅を強制的に広くすることで改行をさせない手法。ニコるボタンは隠れて見えないが、コメントをクリックすれば細かい情報が出てくるのでそこで「ニコる」することが出来る。

* 完成形

/* ==UserStyle==
@name           ニコニココメント欄調整
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         ryo231
==/UserStyle== */

@-moz-document url-prefix("https://www.nicovideo.jp/watch/") {
    /* コメント欄調整 */
    .hover\:bg-c_layer\.background.bdr_s.bg-c_layer\.surfaceHighEm.py_base.px_x1_5.w_100\%.gap_x2.ai_center.jc_space-between.d_flex.cursor_pointer{
  height: 39px;
          background: orange;
    }    
    /* コメント欄調整 */
    .pl_x2.py_x0_5.flex-g_1 {
        background: green;
    }
    /* コメント欄の横幅を拡張 デフォルトは450pxくらいの環境 */
    .h_100\%.flex-d_column.d_flex.ov_hidden.bdr_m {
        width : 450px;
    }
    /* ニコる数回 */
    .hover\:bg-c_layer\.background.bdr_s.bg-c_commentList\.nicoruLv1.py_base.px_x1_5.w_100\%.gap_x2.ai_center.jc_space-between.d_flex.cursor_pointer {
        height: 39px;
        background: #EEEEAA;
    }
    /* ニコる6回くらい以上 */
    .hover\:bg-c_layer\.background.bdr_s.bg-c_commentList\.nicoruLv2.py_base.px_x1_5.w_100\%.gap_x2.ai_center.jc_space-between.d_flex.cursor_pointer {
        height: 39px;
        background: #FFFFAA;
    }
    /* コメント改行対策 */
    .pl_x2.py_x0_5.flex-g_1 {
        p {
            width : 1200px;
        }
    }
}

* 感想
オレンジなら緑がいいかなって何となく決めたらかぼちゃカラーになってた。