* 使い方
FirefoxでStylusをインストールして、新規にこのUserCSSを新規作成して貼り付ける。
Stylus – 🦊 Firefox (ja) 向け拡張機能を入手
https://addons.mozilla.org/ja/firefox/addon/styl-us/
* 解説
色々改善してるうちにこのバージョンが安定と見て完成の形に。
デバックついでの分かりやすさのためにも色をつけているので、好みで味付け可能。意外と気に入っている。
高さ調整でピクセル設定を妥協で39に設定ニコるボタンと数字の干渉のため。気にしなければ35pxくらいまで詰められる。35〜45pxでお好み設定で。
色は「#000000」「#FFFFFF」などのRGB設定の方が良いかも。
ポイントは、コメント欄に表示されるコメントがPタグなため、ここの幅を強制的に広くすることで改行をさせない手法。ニコるボタンは隠れて見えないが、コメントをクリックすれば細かい情報が出てくるのでそこで「ニコる」することが出来る。
* 改善版(1.3.0)
/* ==UserStyle==
@name ニコニココメント欄調整
@namespace github.com/openstyles/stylus
@version 1.3.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: 32px;
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: 32px;
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: 32px;
background: #FFFFAA;
}
/* ニコる13回以上 */
.hover\:bg-c_layer\.background.bdr_s.bg-c_commentList\.nicoruLv3.py_base.px_x1_5.w_100\%.gap_x2.ai_center.jc_space-between.d_flex.cursor_pointer {
height: 32px;
background: #FFFF77;
}
/* ニコる33以上*/
.hover\:bg-c_layer\.background.bdr_s.bg-c_commentList\.nicoruLv4.py_base.px_x1_5.w_100\%.gap_x2.ai_center.jc_space-between.d_flex.cursor_pointer {
height: 32px;
background: #FFFFDD;
}
/* コメント改行対策 */
.pl_x2.py_x0_5.flex-g_1 {
p {
width : 1200px;
}
}
/* コメント欄のスクロール時にスクロールバーが表示されるのを防止 */
.custom-scrollbar_true.ovs-b_contain.contain_strict.h_100\%.w_100\% > .pos_relative {
overflow-y: scroll; /* 縦だけ残す */
/*縦表示ごと消したい時 scrollbar-width: none; */
}
}
* 完成形(1.0.0)
/* ==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;
}
}
}
* 感想
オレンジなら緑がいいかなって何となく決めたらかぼちゃカラーになってた。