CSSでニコ生の匿名コメントだけ名前を表示なしor184に差し替えしたい

お世話になっております。こちら使わせて頂いているのですが、ニコ生の匿名コメントだけ名前を表示なしにしたいのですが、できますでしょうか?

こちらのトピックを参考にして
https://forum.onecomme.com/t/topic/744/2

[data-service="niconama"][data-user="匿名"] .name{display:none;}

匿名コメントのみ名前が表示されなくなったのですが、コメント前にニコ生という表示は残したいです。

ご質問ありがとうございます。

今回のケースですと、文字色指定を透明にするといいかもしれませんね :paw_prints:

display:none;の代わりにcolor:transparent;

を使ってみるとどうでしょうか?

<追記>

返信ありがとうございます。そうすると匿名の部分が透明ではなく、白っぽくなりました。
bandicam 2023-01-21 12-41-06-837

名前の縁取りを無色(縁取り無し)にするために
–lcv-name-shadow-color: rgba(255,255,255,0);
(下の方にあります。)
に書き換えてみてください。

2 Likes

そうすると匿名だけでなく、全体の縁取りも無色になってしまいませんか?匿名だけ表示したくないだけで他は変更しないで使いたいです。

なるほど、縁取りの部分が想定から抜けていました。
あとは同じところで縁取りの指定を無しにするといい感じになるかと思います。

color:transparent;
に加えて
text-shadow:none;
も追加してみてください。

成功されましたら、その部分を先にお示しいただいた感じでシェアいただけますと幸いです :paw_prints:

以上、よろしくお願いします。


<追記>
便宜上こちらの方法を「パターンA」とします。

1 Like

返信ありがとうございます。できました!

>その部分を先にお示しいただいた感じでシェアいただけますと幸いです
シェアはどのようにやったらいいですか?

ちなみにこの【匿名】の部分は、透明にした状態なので(実際は【匿名】という文字があるので)隙間が空いている状態ですが、この隙間を埋める事はできないですよね?

また、【匿名】の部分を【184】にするなど別の名前にすることは可能でしょうか?

1 Like

なるほど、slimテンプレートであれば、確かに間が空いてしまいますね(よりによりましてw)

同じところにさらに

display: inline-block;
width: 4em;
white-space: nowrap;
overflow: hidden;

も追加してみてください。
※「4em」のところで幅を強制的に指定しています。小数点やpx単位も使えますのでお使いの環境に合わせて数値は設定してみてください。

解説(←クリックで開閉できます)

display: inline-block; で横幅を指定可能にしています。
width: 4em; で横幅を指定しています。小数点やpx単位も使えます。環境に合わせて長さを調整してください。
white-space:nowrap; で横幅に収まらない文字が自動改行されるのを防いでいます。
overflow:hidden; で幅から外に出た文字を見えないようにしています。


<追記>
こちらのパターン(便宜上「パターンB」とします)で行く場合は「匿名」の部分が丸ごと隠れるようになりますので、先の文字色を透明にしたり、縁取りを消したりといった記述は不要になるかと思われます。


シェアという言葉を使いましたが、要するに他の方がコピペ利用できるように、

こういった感じで、課題解決
(ニコ生で「匿名」の場合にサイトの目印マークは残したまま名前を非表示にしたい)
のために最終的にお使いになったスタイルの部分を記載いただけますと幸いです :paw_prints:

1 Like

ありがとうございます。隙間がないようにできました!
https://forum.onecomme.com/t/topic/849/11?u=only

それと先程も質問したのですが、匿名部分は他の表示名にすることも可能なのでしょうか?

そうですね、
「:before」は目印マークで使ってしまっていますので、
「:after」の方に記述するのがいいかもしれません。
[data-service="niconama"][data-user="匿名"] .name:after{ }
考えられるアプローチの一つとしては、
position:absolute;left:0em;content:"184";color:black;
といったところかな?っとは思いますが、
今回はアイデアだけで未検証です。
leftの値で184の位置を調整しつつ、表示幅が足りなくなるのでその分先ほどのwidthの幅を伸ばす必要(※ただし↓)が出てきます。
あるいは匿名のあった所に184がすっぽり収まる様でしたら横幅調整は不要となりますので、
その場合は先ほどの
image
の記述は使わなくてよくなりますねw

ひとまず今回はアイデアまでとうことで、お試しいただいた結果などお知らせけますと幸いです :paw_prints:


<追記2>
以下追記しておりましたが、手元のテストでも、:rootに記述する場合は作用しますが、.nameなどのピンポイントな位置に再記述しても期待する効果が発揮されませんでしたので、(なお私の方での記入ミスなどあるかもしれませんが)取り下げさせていただきます。

(取り下げた追記)

<追記>
あ、縁取り(text-shadow)を切っていましたので、184に掛けたい場合は:afterの中で改めて指定する必要がありそうです。
設定値はburikiyasanさんが持って来て下さった

「–lcv-name-shadow-color」という値が使えそうですので、184に縁取りを付けたい場合はtext-shadowにこの値を設定すると良さそうですね。


手打ちのためなんと2か所もタイプミスがあり、お手数をおかけしました。
aftter✕→after◯
conntent✕→content◯

1 Like

ありがとうございます。
とりあえず
[data-service=“niconama”][data-user=“匿名”] .name:aftter{position:absolute;left:0em;conntent:“184”;color:black; }

と入れてみたのですが、匿名のままでした。

すみません、肝心なところでタイプミスしていました。

image

「aftter」は誤りで、「t」は一つで良いので「after」が正解となります。※元の記述は訂正しました。


また、提案させていただいたアイデアは、

からの流れということで、文字を透明にした状態で、別の文字を上に乗せるというアプローチになります。

文字の透明化との合わせ技となりますので、「パターンA」のスタイル指定も併用してみて下さい。


余談ですが、便宜上、匿名の文字を透明にする方法を「パターンA」と呼ぶことにしました。もう一方の表示領域を狭めて匿名の文字を隠す方法は「パターンB」とします。

1 Like

ありがとうございます。
まず
[data-service=“niconama”][data-user=“匿名”] .name:after{position:absolute;left:0em;conntent:“184”;color:black; }
にしましたが、匿名のままで

次に
[data-service=“niconama”][data-user=“匿名”] .name{color:transparent; text-shadow:none; display: inline-block; width: 4em; white-space: nowrap; overflow: hidden;}.name:after{position:absolute;left:0em;conntent:“184”;color:black; }
にしましたが、透明のままでした。

すみません、もう一か所タイプミスがありました :melting_face:

「conntent」ではなく正しくは「content」になります。(※該当箇所修正しました)
image


手打ち&未検証だったためお手数をおかけしました。

もう一点、フォーラムからコードをコピペする際に注意いただきたいのが、
囲い記号が「」「」となっているところは、実際のコード上の囲い記号として使う場合は誤りとなりますので、使用前にそれぞれ該当箇所の記号を「"」に直す必要があります。
上手く作動しない場合はこの点にも注意してみてください。

以上、よろしくお願いします :paw_prints:

1 Like

ありがとうございます。
①まずこれで184が表示されました。匿名の上に184が表示されている状態です。
[data-service=“niconama”][data-user=“匿名”] .name:after{position:absolute;left:4em;content:“184”;color:black; }

②次に匿名の部分を透明にしてみようとこうしたのですが、これだと匿名以外の名前も透明になってしまいます。
[data-service=“niconama”][data-user=“匿名”] .name:after{position:absolute;left:4em;content:“184”;color:black; }.name{color:transparent; text-shadow:none; }

③これだと匿名以外の名前は表示されていますが、匿名以外にも184が表示されてしまいます。
[data-service=“niconama”][data-user=“匿名”] .name{color:transparent; text-shadow:none;}.name:after{position:absolute;left:4em;content:“184”;color:black; }

挑戦ありがとうございます :paw_prints:


まず、②③に関して、
いずれも.nameの手前に[data-service=“niconama”][data-user=“匿名”]の記載がないものに関しては.name全体への指定となります。

また、②は上記加え、端的に言いますと、指定の順番が逆ということになります。
状態としては、まだ透明になっていない文字を黒色指定したうえで、あとから透明に塗り替えているという順番になってしまっているわけですね。

スタイルシートは同じところに対して複数のスタイル指定がある場合、より後ろの行に書いた方が優先されます。

今回実現したいことに関するスタイルシートの記述の流れ的には、
まず匿名の文字を透明にする方法をお示しさせていただきました。
そこからさらに、184に置き換えたいという事でしたので、
そのままだと184の記述をしても文字が透明になるため、
184の文字を追加する際に文字色も黒に指定する、という流れになっています。


(蛇足)
長丁場となっておりますが、「こういうデザインにしたい」というイメージやアイデアを発想できるのはとても素晴らしい才能だと思いますので、これに懲りずにスタイルシートの書き方などを習得されますと、今後なにかイメージをしたときに形にしやすくなり、さらに才能を生かした活動の助けになるかもしれませんね :paw_prints:

1 Like

ありがとうございます。とても勉強になります。長丁場にお付き合いさせてしまってすみません。

[data-service=“niconama”][data-user=“匿名”]
.name{color:transparent; text-shadow:none; }
[data-service=“niconama”][data-user=“匿名”] .name:after{position:absolute;left:4em;content:“184”;color:black; }

お陰様でここまでできました。
bandicam 2023-01-22 23-48-08-630

後は184の位置を縦に少し下にずらしたい事とと縁取りです。

縁取りについては補足を参考にしてみたのですが、
https://forum.onecomme.com/t/topic/849/13?u=only

.name:after{position:absolute;left:4em;content:“184”;color:black; –lcv-name-shadow-color: rgba(255,255,255,1);}

特に変化はありませんでした。

184の位置については.name:afterに translateY(10px);を入れたら調整できました。(これでいいかは分かりません)

https://forum.onecomme.com/t/topic/849/20?u=only

おめでとうございます:+1:


縁取りに関しては2点ございます。

1.まず、

の通り、縁取りに関する設定はtext-shadowとなっております。

そしてtext-shadowの値(右辺)は事前に「none」で消してしているので、:afterでは再度text-shadowの値(右辺)をデフォルトの「値」に設定しなおすという流れになります。

ここまでは良かったのですが、

2.デフォルトの「値」に関しては私の認識に誤りがありまして、縁取りを元に戻すための値は、
先に出ていた「--lcv-name-shadow-color」で良いだろうと思っていたのですが、
(※ → text-shadow:var(–lcv-name-shadow-color) )
こちらの記載では(ややこしいですが「値」の中で使われるさらに細かな「値」であったため)不十分だったようです。
実際のデフォルトの値は「--lcv-name-shadow」でしたので、:afterの影を復活させる部分の記述は、

text-shadow: var(--lcv-name-shadow);

となります。


(個人的にtranslateYは結構マニアックなプロパティだなと思うので、よく見つけられたなと感心いたしましたw)
こちらに関しては、スタイルの調整方法は1つではなく色々なアプローチがありますので、基本的に、ひとまず望んだ見た目にできていればOKかと思います。

※ちなみに、目印マークの表示と、作っていただいたコードを両方適用してみましたが、
手元のテストではそもそも、お示しの画像の様に184が上方に寄ることはありませんでした。

1 Like

ありがとうございます。
できました!長丁場にお付き合い頂き本当にありがとうございました。
いろいろと勉強になりました。