# スパチャコメントの背景色を消す/任意の色に変更する方法

**URL:** <https://forum.onecomme.com/t/topic/2809>\
**Category:** カスタマイズ\
**Created:** [2026 年 2 月 16 日午前 8:44 UTC](https://forum.onecomme.com/t/topic/2809 "2026-02-16T08:44:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![0u0](https://avatars.discourse-cdn.com/v4/letter/0/67e7ee/32.png) [@0u0](https://forum.onecomme.com/u/0u0)\
**Post date:** [2026 年 2 月 16 日午前 8:44 UTC](https://forum.onecomme.com/t/topic/2809/1 "2026-02-16T08:44:38Z")

</div>

## 対象

出来ればどのテンプレートでも出来ると有難いです

## 対象となるサービス

YouTube

## 内容

Youtubeのスーパーチャットやメンバーコメント（背景が緑の月一で打てるコメントのやつです……！）の背景色を透明にする/不透明度を調整する/任意のカラーに変更する方法はございますでしょうか……？

---

<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:** [2026 年 2 月 16 日午前 10:03 UTC](https://forum.onecomme.com/t/topic/2809/2 "2026-02-16T10:03:39Z")

</div>

一例としては、以下のような方法で変更することは可能です。

HTMLファイル

```html
:data-gift-type="comment.data.giftType"
:data-tier="comment.data.tier"

```

を追記

CSSファイル

```auto
[data-tier="1"],
[data-tier="2"],
[data-tier="3"] {
    background: transparent;
}
[data-tier="4"],
[data-tier="5"],
[data-tier="6"],
[data-tier="7"] {
    background: #999;
}

[data-gift-type="milestonechat"] {
    background: #00f;
}

```

この状態だと、以下のようなパターンになります。

 ![スクリーンショット 2026-02-16 184506](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/f/f4444861f81af1786af0514c74d46528f136d8c0.png)

▼サンプルテンプレートのDL  
[https://nvl-game.tokyo/uploads/onecomme/templates/basic-change-gift-color-forum-2809.zip](https://nvl-game.tokyo/uploads/onecomme/templates/basic-change-gift-color-forum-2809.zip)

* * *

スーパーチャットとステッカーは、Tierとしては以下のようなパターンを持っています。

Tier1：～199円  
Tier2：200～499円  
Tier3：500～999円  
Tier4：1000～1999円  
Tier5：2000～4999円  
Tier6：5000～9999円  
Tier7：10000円～

* * *

また、giftTypeとして、以下のようなデータを持っているため、それでも切り分けは可能です。

superchat：スーパーチャット  
superstiker：スーパーステッカー  
milestonechat：マイルストーンチャット/メンバーシップへの加入  
sponsorgift：メンバーシップギフト（送り主）  
giftreceived：メンバーシップギフト（贈られた側）

* * *

HTMLファイルへの追記と、CSSへのカスタマイズで、ここまでは可能です。

そのため、同じ金額帯（同じTier）でも、スパチャとステッカーで色を変えることも可能になっています。

ただ、上記だけの切り分けだと、

```auto
milestonechat：マイルストーンチャット/メンバーシップへの加入

```

は同一のものとして扱われるため、より詳細に切り分けるとなるともっと手を加える必要はあるでしょう。

参考になれば幸いです。