# neonテンプレでアイコンを表示できるようにしたうえで、匿名アイコンを指定画像に置き換えたい

**URL:** <https://forum.onecomme.com/t/topic/1352>\
**Category:** カスタマイズ\
**Created:** [2023 年 10 月 9 日午前 8:17 UTC](https://forum.onecomme.com/t/topic/1352 "2023-10-09T08:17:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![wankomeyuza2023\_9485](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/wankomeyuza2023_9485/32/1278_2.png) [@wankomeyuza2023\_9485](https://forum.onecomme.com/u/wankomeyuza2023_9485)\
**Post date:** [2023 年 10 月 9 日午前 8:17 UTC](https://forum.onecomme.com/t/topic/1352/1 "2023-10-09T08:17:39Z")

</div>

## 対象

わんコメ / テンプレート /

## 利用OS

Windows または MacOS  
Windows

## 利用バージョン: Windows、わんコメやOBSのバージョン

Windows: 11  
わんコメ： 5.0.4  
OBS: 29.1.3

## PRO版を利用

している

## 過去ログ確認 ([検索はこちらから](https://forum.onecomme.com/search))

した

## ドキュメント確認 ([公式サイト](https://onecomme.com/docs/faq/))

した

## 内容

neonテンプレでアイコンを表示できるようにしたうえで、ニコ生の匿名アイコンを指定画像に置き換えたい

---

<div class="post-metadata">

**Author:** ![shinkunoshizuku](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/shinkunoshizuku/32/913_2.png) [@shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)\
**Post date:** [2023 年 10 月 10 日午前 10:20 UTC](https://forum.onecomme.com/t/topic/1352/2 "2023-10-10T10:20:10Z")

</div>

ご存知かとも思いますが、neonのテンプレートにはもともとアイコンを表示させるための構造にはなっていません。  
そのため、ご希望の動作をさせるのであれば、HTMLファイルからカスタマイズが必要になってきます。

ただこの場合、アイコンをどのような場所に表示させるイメージをお持ちなのかはっきりさせておかないと、カスタマイズのご提案が難しくなってしまいます。  
画像も活用いただき、どんな場所にどんな形でアイコンを挿入させたいのか、イメージを伝えていただいたほうがアドバイスいただきやすくなるかもしれません。

---

<div class="post-metadata">

**Author:** ![wankomeyuza2023\_9485](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/wankomeyuza2023_9485/32/1278_2.png) [@wankomeyuza2023\_9485](https://forum.onecomme.com/u/wankomeyuza2023_9485)\
**Post date:** [2023 年 10 月 10 日午後 3:20 UTC](https://forum.onecomme.com/t/topic/1352/3 "2023-10-10T15:20:30Z")

</div>

イメージ的には画像のような感じです（雑ですいません）。  
あと趣旨と少しズレますが、わんコメ自体に匿名アイコンをローカルの指定した画像にする、  
という項目があれば助かる人が多い気がします（HTMLをみんなが書き換えれるわけではないので）。

 ![5](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/9/9cf0dc4f2f2a1b5b82214d46c2234a490408b37b.jpeg)

---

<div class="post-metadata">

**Author:** ![shinkunoshizuku](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/shinkunoshizuku/32/913_2.png) [@shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)\
**Post date:** [2023 年 10 月 11 日午前 4:39 UTC](https://forum.onecomme.com/t/topic/1352/4 "2023-10-11T04:39:17Z")

</div>

カスタマイズするとしたら、こんな感じのイメージでしょうか？

 ![スクリーンショット 2023-10-11 125326](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/f/ff618ca0655da21ab3dbfa33776a5ac3e1fc209e.png)

コメント取得のためにお借りした配信はこちら。

> **[ふりーせる・すぱいだー　30分くらい　(╯⊙ ⊱ ⊙╰ )　#ネギラーメン配信](https://live.nicovideo.jp/watch/lv343048475)**
>
> ＜10がつのきろく＞ふり　　くりあ　　　28/30　べすと　　　141秒くも　くりあ　　　20/29　べすと　　　80秒

* * *

下準備として、neonテンプレートのフォルダごとcustomフォルダ内にコピーするなどして、 **わんコメのアップデート時に上書きがなされないようにしてから作業する** 必要があります。

* * *

HTMLには39行目に以下のものを追記します。

```auto
<div class="avatar">
  <img alt="" v-if="comment.data.profileImage" :src="comment.data.profileImage" />
</div>

```

あとからの読みやすさも考え、42行目に`<div class="name">`が見えるようになっていればよいかと思います。

* * *

CSSには、以下のようなものを追加します。

```auto
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
:root {
    --neon-color: rgba(255,255,255,1);
    --neon-base-color: rgba(255,255,255,0);
    --lcv-neon-shadow: var(--neon-base-color);
}
body {
    font-family: 'Dela Gothic One', sans-serif;
}
.avatar {
    display: inline-block;
    margin-top: .5rem;
    margin-left: 1rem;
    margin-right: -.5rem;
    --lcv-avatar-size: 24px;
}
.name {
    display: inline-block;
}
[data-user="匿名"] .avatar {
    background-image: url(./184.png);
    background-size: cover;
    width: var(--lcv-avatar-size);
}
[data-user="匿名"] .avatar img {
    display: none;
}

```

フォントには仮にDela Gothic Oneが指定してあり、匿名のアイコン（アバター）は184.pngのローカルファイルを参照するように記述してある例です。  
また、わんコメで行うニコ生の匿名表記の設定（例では「匿名」）で判別させているだけのため、「匿名」というリスナー名の方がいたら匿名として扱われてしまう欠点はあります。

 ![スクリーンショット 2023-10-11 125326](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/f/ff618ca0655da21ab3dbfa33776a5ac3e1fc209e.png)

このスクリーンショットでは背景が黒ですが、白いフォントの文字を読みやすくするため一時的に変更してあるだけのため、上記CSSには背景色の変更は含めていません。

* * *

結構無理やり作っているので、イメージと違っていたり、ご自身で手を加えてもっとうまく作れたということがあれば、共有いただければ幸いです 😅

* * *

一応、ここまでの内容を含んだ配布用のテンプレートとしては以下のような形式になります。  
今後当方で調整の上、別途配布するかもしれませんのでご理解ください 🙏

[https://nvl-game.tokyo/uploads/onecomme/templates/neon-custom-184.zip](https://nvl-game.tokyo/uploads/onecomme/templates/neon-custom-184.zip)

---

<div class="post-metadata">

**Author:** ![wankomeyuza2023\_9485](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/wankomeyuza2023_9485/32/1278_2.png) [@wankomeyuza2023\_9485](https://forum.onecomme.com/u/wankomeyuza2023_9485)\
**Post date:** [2023 年 10 月 11 日午後 1:03 UTC](https://forum.onecomme.com/t/topic/1352/5 "2023-10-11T13:03:53Z")

</div>

希望通りのレイアウトと動作でした、ありがとうございます。  
フォントを変更した場合にコメントと名前表示の間の間が少し空きすぎる調整もできれ、  
より良いと思いました。  
重ね重ねありがとうございました。

---

<div class="post-metadata">

**Author:** ![wankomeyuza2023\_9485](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/wankomeyuza2023_9485/32/1278_2.png) [@wankomeyuza2023\_9485](https://forum.onecomme.com/u/wankomeyuza2023_9485)\
**Post date:** [2023 年 10 月 11 日午後 1:10 UTC](https://forum.onecomme.com/t/topic/1352/6 "2023-10-11T13:10:48Z")

</div>

カスタムCSSに  
/\* テンプレカスタム ここから \*/  
@font-face {  
font-family: “Kosugi Maru”;  
font-style: normal;  
font-weight: 400;  
font-display: swap;  
src: url([https://fonts.gstatic.com/s/kosugimaru/v14/0nksC9PgP\_wGh21A2KeqGiTv4ur\_mWjfXWdNMtg65zwIiCccFzPAsA.2.woff2](https://fonts.gstatic.com/s/kosugimaru/v14/0nksC9PgP_wGh21A2KeqGiTv4ur_mWjfXWdNMtg65zwIiCccFzPAsA.2.woff2))format(“woff2”);  
unicode-range: U+ffd7,U+ffda-ffdc,U+ffe0-ffe2,U+ffe4,U+ffe6,U+ffe8-ffee,U+1f100-1f10c,U+1f110-1f16c,U+1f170-1f1ac,U+1f200-1f202,U+1f210-1f234  
}  
以下略  
を入力して使用しているのですが、コメントと名前の間を少しだけ縮めれたらと  
思った程度で、アイコンサイズやコメントサイズ・名前サイズを変更して利用しても  
問題なく動いています。

---

<div class="post-metadata">

**Author:** ![wankomeyuza2023\_9485](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/wankomeyuza2023_9485/32/1278_2.png) [@wankomeyuza2023\_9485](https://forum.onecomme.com/u/wankomeyuza2023_9485)\
**Post date:** [2023 年 10 月 11 日午後 1:13 UTC](https://forum.onecomme.com/t/topic/1352/7 "2023-10-11T13:13:41Z")

</div>

追記：  
私はかなりこういう方面に疎いので、カスタムCSSの記述には  
かなり無駄があると思います。  
それでも隙間を調整したい程度で問題ないです。

---

<div class="post-metadata">

**Author:** ![shinkunoshizuku](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/shinkunoshizuku/32/913_2.png) [@shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)\
**Post date:** [2023 年 10 月 11 日午後 2:00 UTC](https://forum.onecomme.com/t/topic/1352/8 "2023-10-11T14:00:11Z")

</div>

コメントの行と、アイコン（アバター）や名前などの行を詰めたいのであれば、このような手法も考えられます。

* * *

CSSに追記するコード

```auto
.marquee-container {
    margin-bottom: -1.5rem;
}

```

`-1.5rem`の数値を調整することで、コメントの行を移動させ、お好みの隙間に調整は可能になるかと思います。

ここの数値は好みやサイズ変更により微調整が必要となるため、お手元で好きな数値に調整してください。  
もちろん指定さえすれば、px単位での調整も可能です。