# アイコンをサイト別に自作のものに変更したい

**URL:** <https://forum.onecomme.com/t/topic/1820>\
**Category:** 質問\
**Tags:** 解決済\
**Created:** [2024 年 8 月 16 日午前 12:36 UTC](https://forum.onecomme.com/t/topic/1820 "2024-08-16T00:36:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![twist](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@twist](https://forum.onecomme.com/u/twist)\
**Post date:** [2024 年 8 月 16 日午前 12:36 UTC](https://forum.onecomme.com/t/topic/1820/1 "2024-08-16T00:36:55Z")

</div>

## 対象

わんコメ

## 利用OS

Windows

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

Windows: 10  
わんコメ：  
OBS: 6.0.0

## PRO版を利用

していない

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

した

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

した

## 内容

テンプレートのBasicを利用しています。ユーザーアイコンをPC内にある自作のものに変更したいのですが、ニコ生とTwitchのコメントで違うアイコンに変更したい場合、HTMLをどのように変更すればいいでしょうか？

---

<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:** [2024 年 8 月 16 日午前 1:02 UTC](https://forum.onecomme.com/t/topic/1820/2 "2024-08-16T01:02:08Z")

</div>

> [@twist](#):
>
> ニコ生とTwitchのコメントで違うアイコンに変更したい場合、HTMLをどのように変更すればいいでしょうか？

CSSに変更を加えることで変更が可能です。

変更例は以下のとおり。

```auto
[data-service="niconama"] .avatar {
    background-image: url(./niconama-img.png);
    background-size: cover;
    width: var(--lcv-avatar-size);
}

[data-service="twitch"] .avatar {
    background-image: url(./twitch-img.png);
    background-size: cover;
    width: var(--lcv-avatar-size);
}
[data-service="niconama"] .avatar img,
[data-service="twitch"] .avatar img {
    display: none;
}

```

この例だとテンプレートフォルダ内に置き換えたい「niconama-img.png」と「twitch-img.png」が入ることになります。

Basicだけでなく、アイコン（アバター）が出ているテンプレートであれば、同じように処理は可能です。

---

<div class="post-metadata">

**Author:** ![twist](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@twist](https://forum.onecomme.com/u/twist)\
**Post date:** [2024 年 8 月 16 日午前 7:34 UTC](https://forum.onecomme.com/t/topic/1820/3 "2024-08-16T07:34:45Z")

</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:** [2024 年 9 月 29 日午後 1:59 UTC](https://forum.onecomme.com/t/topic/1820/4 "2024-09-29T13:59:49Z")

</div>

トピッククローズ：相談解決のため