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

**URL:** <https://forum.onecomme.com/t/topic/927>\
**Category:** カスタマイズ\
**Tags:** 解決済\
**Created:** [2023 年 1 月 20 日午後 6:20 UTC](https://forum.onecomme.com/t/topic/927 "2023-01-20T18:20:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 20 日午後 6:20 UTC](https://forum.onecomme.com/t/topic/927/1 "2023-01-20T18:20:26Z")

</div>

> [@テンプレート表示アレンジ用cssシェア（投稿歓迎）](https://forum.onecomme.com/t/topic/746/3):
>
> CSSだけで各コメントの配信サイトのそれっぽい目印を表示！

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

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

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

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

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 20 日午後 6:44 UTC](https://forum.onecomme.com/t/topic/927/2 "2023-01-20T18:44:23Z")

</div>

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

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

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

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

＜追記＞

> [@only](#):
>
> 返信ありがとうございます。そうすると匿名の部分が透明ではなく、白っぽくなりました。

> [@コメントユーザーの名前の前に配信サイトごとのアイコン画像をつけたい](https://forum.onecomme.com/t/topic/849/9):
>
> なるほど、縁取りの部分が想定から抜けていました。  
> あとは同じところで縁取りの指定を無しにするといい感じになるかと思います。
> 
> `color:transparent;`  
> に加えて  
> `text-shadow: none;`  
> も追加してみてください。

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 21 日午前 3:43 UTC](https://forum.onecomme.com/t/topic/927/3 "2023-01-21T03:43:14Z")

</div>

返信ありがとうございます。そうすると匿名の部分が透明ではなく、白っぽくなりました。  
 ![bandicam 2023-01-21 12-41-06-837](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/8d60d94ad8469054f7a49bd0843bdacdd863cb8c.png)

---

<div class="post-metadata">

**Author:** ![burikiyasan](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/burikiyasan/32/885_2.png) [@burikiyasan](https://forum.onecomme.com/u/burikiyasan)\
**Post date:** [2023 年 1 月 21 日午前 4:30 UTC](https://forum.onecomme.com/t/topic/927/4 "2023-01-21T04:30:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 21 日午前 5:38 UTC](https://forum.onecomme.com/t/topic/927/5 "2023-01-21T05:38:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 21 日午前 6:37 UTC](https://forum.onecomme.com/t/topic/927/6 "2023-01-21T06:37:49Z")

</div>

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

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

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

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

* * *

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 21 日午前 7:55 UTC](https://forum.onecomme.com/t/topic/927/7 "2023-01-21T07:55:12Z")

</div>

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

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

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

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

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 21 日午前 8:33 UTC](https://forum.onecomme.com/t/topic/927/8 "2023-01-21T08:33:29Z")

</div>

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

同じところにさらに

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

```

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

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

* * *

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

* * *

> [@コメントユーザーの名前の前に配信サイトごとのアイコン画像をつけたい](https://forum.onecomme.com/t/topic/849/10):
>
> シェアはどのようにやったらいいですか？

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

> [@only](#):
>
> [data-service=“niconama”][data-user=“匿名”] .name{display:none;}

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 21 日午前 9:00 UTC](https://forum.onecomme.com/t/topic/927/9 "2023-01-21T09:00:09Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 21 日午前 9:25 UTC](https://forum.onecomme.com/t/topic/927/10 "2023-01-21T09:25:43Z")

</div>

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

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

* * *

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

> **（取り下げた追記）**
>
> ＜追記＞  
> あ、縁取り（text-shadow）を切っていましたので、184に掛けたい場合は:afterの中で改めて指定する必要がありそうです。  
> 設定値はburikiyasanさんが持って来て下さった
> 
> > [@burikiyasan](#):
> >
> > 名前の縁取りを無色(縁取り無し)にするために  
> > –lcv-name-shadow-color: rgba(255,255,255,0);  
> > （下の方にあります。）  
> > に書き換えてみてください。
> 
> 「–lcv-name-shadow-color」という値が使えそうですので、184に縁取りを付けたい場合はtext-shadowにこの値を設定すると良さそうですね。

* * *

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 21 日午後 5:33 UTC](https://forum.onecomme.com/t/topic/927/11 "2023-01-21T17:33:04Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 21 日午後 6:46 UTC](https://forum.onecomme.com/t/topic/927/12 "2023-01-21T18:46:31Z")

</div>

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

> ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/49b4a92ebda33b4a965dc5ee9a258e618d6cb446.png)

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

* * *

> [@コメントユーザーの名前の前に配信サイトごとのアイコン画像をつけたい](https://forum.onecomme.com/t/topic/849/14):
>
> 匿名のままでした。

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

> [@only](#):
>
> ちなみにこの【匿名】の部分は、透明にした状態なので（実際は【匿名】という文字があるので）隙間が空いている状態ですが、この隙間を埋める事はできないですよね？  
> また、【匿名】の部分を【１８４】にするなど別の名前にすることは可能でしょうか？

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

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

* * *

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 22 日午前 2:41 UTC](https://forum.onecomme.com/t/topic/927/13 "2023-01-22T02:41:48Z")

</div>

ありがとうございます。  
まず  
[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; }  
にしましたが、透明のままでした。

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 22 日午前 6:48 UTC](https://forum.onecomme.com/t/topic/927/14 "2023-01-22T06:48:08Z")

</div>

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

「co **nn** tent」ではなく正しくは「co **n** tent」になります。（※該当箇所修正しました）  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/42ec7e3907ff056a9a7774f4afa8762fa3ddb3c3.png)

* * *

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

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

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 22 日午前 11:19 UTC](https://forum.onecomme.com/t/topic/927/15 "2023-01-22T11:19:25Z")

</div>

ありがとうございます。  
①まずこれで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; }

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 22 日午後 12:08 UTC](https://forum.onecomme.com/t/topic/927/16 "2023-01-22T12:08:10Z")

</div>

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

* * *

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

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

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

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

* * *

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 22 日午後 3:22 UTC](https://forum.onecomme.com/t/topic/927/17 "2023-01-22T15:22:05Z")

</div>

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

[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](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/78860afe384ce24195f80802cfac055badf35de0.png)

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

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

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

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 22 日午後 4:41 UTC](https://forum.onecomme.com/t/topic/927/18 "2023-01-22T16:41:57Z")

</div>

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

[https://forum.onecomme.com/t/topic/849/20?u=only](https://forum.onecomme.com/t/topic/849/20)

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2023 年 1 月 22 日午後 6:12 UTC](https://forum.onecomme.com/t/topic/927/19 "2023-01-22T18:12:24Z")

</div>

> [@コメントユーザーの名前の前に配信サイトごとのアイコン画像をつけたい](https://forum.onecomme.com/t/topic/849/20):
>
> お陰様でここまでできました。

おめでとうございます👍

* * *

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

１．まず、

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

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

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

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

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

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

となります。

* * *

> [@コメントユーザーの名前の前に配信サイトごとのアイコン画像をつけたい](https://forum.onecomme.com/t/topic/849/21):
>
> 184の位置については.name:afterに translateY(10px);を入れたら調整できました。（これでいいかは分かりません）

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

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

---

<div class="post-metadata">

**Author:** ![only](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@only](https://forum.onecomme.com/u/only)\
**Post date:** [2023 年 1 月 23 日午前 4:36 UTC](https://forum.onecomme.com/t/topic/927/20 "2023-01-23T04:36:12Z")

</div>

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

> [@コメントユーザーの名前の前に配信サイトごとのアイコン画像をつけたい](https://forum.onecomme.com/t/topic/849/22):
>
> 縁取りに関しては２点ございます。
> 
> １．まず、
> 
> > [@sikozon](#):
> >
> > 「–lcv-name-shadow-color」という値が使えそうですので、184に縁取りを付けたい場合は **text-shadow** にこの値を設定すると良さそうですね。
> 
> の通り、縁取りに関する設定は **text-shadow** となっております。
> 
> そしてtext-shadowの値（右辺）は事前に「none」で消してしているので、:afterでは再度text-shadowの値（右辺）をデフォルトの「値」に設定しなおすという流れになります。
> 
> ここまでは良かったのですが、
> 
> ２．デフォルトの「値」に関しては私の認識に誤りがありまして、縁取りを元に戻すための値は、  
> 先に出ていた「`--lcv-name-shadow-color`」で良いだろうと思っていたのですが、  
> _（※ → text-shadow:var(–lcv-name-shadow-color) ）_  
> こちらの記載では（ややこしいですが「値」の中で使われるさらに細かな「値」であったため）不十分だったようです。  
> 実際のデフォルトの値は「`--lcv-name-shadow`」でしたので、:afterの影を復活させる部分の記述は、
> 
> > `text-shadow: var(--lcv-name-shadow);`
> 
> となります。
> 
> * * *

[次のページ](https://forum.onecomme.com/t/topic/927.md?page=2)