OBSでコメントの透過表示方法[Chat v2.0 Style Generatorの使い方]
Chat v2.0 Style Generator の使い方の説明です。
アクセスは以下のURLより。
1. 最初にYOUTUBEのチャット欄のURLを確保
![](https://assets.st-note.com/img/1725152946242-OdR7v2AF71.png?width=1200)
![](https://assets.st-note.com/img/1725152996348-cKaQbnl0WU.png)
![](https://assets.st-note.com/img/1725153026241-dHhQtBODqU.png?width=1200)
Youtubeは配信毎にURLが変わるため注意が必要です!
https://www.youtube.com/live_chat?is_popout=1&v=◯◯◯ ←ここの〇〇にライブ毎のIDが割り当てられるため毎回変更してくださいね!
![](https://assets.st-note.com/img/1725153350657-NVizzmQ56H.png?width=1200)
![](https://assets.st-note.com/img/1725153574816-24fPPt3v2S.png?width=1200)
2.チャット部分のデザインを変更しよう!
有志の方がYoutubeのチャット欄を簡単にデザインできるツールをWebで公開しているため、今回はそれを利用させていただきましょう。
Chat v2.0 Style Generator 日本語版
http://css4obs.starfree.jp/
細かい設定が色々とできますが、まず最初にデフォルトのスタイルで適用してみましょう。
![](https://assets.st-note.com/img/1725153871624-8IGVo4tZxE.png?width=1200)
![](https://assets.st-note.com/img/1725154057544-TY8GMhihyQ.png?width=1200)
これで背景が透過されたチャット欄になります。
おつかれさまでした!
最後に
Youtubeがバージョンアップした場合などは、Chat v2.0 Style Generatorで作ったCSSデザインが使用できなくなる場合があります。
その場合は、Chat v2.0 Style Generatorがバージョンアップで対応してくれるため、もう一度作り直して貼り付け直してくださいね!