StreamElementsのカスタムCSSとして使用できます。
ヒント
プリセットを選ぶと、現在の設定が上書きされます。まずはプリセットを選んでから微調整するのがおすすめです。デザインを調整
左側のパネルでプリセットを選び、文字サイズや色を微調整します。
CSSをコピー
「CSSをコピー」ボタンを押して、コードをクリップボードに保存します。
StreamElementsに貼り付け
Chat Boxの設定画面にある「Enable Custom CSS」をONにし、コードを貼り付けます。
Q. Streamlabsでも使えますか?
基本的にはStreamElements専用です。Streamlabsはクラス名(HTML構造)が異なるため、そのままでは適用されません。
Q. デザインが崩れる
StreamElements側のテーマ設定(Theme)を「Custom」または「Clean」に設定しているか確認してください。
OBSのコメント欄をおしゃれにするメリット
ゲーム配信や雑談配信において、画面上に表示される「視聴者のコメント」は、配信の盛り上がりを伝える重要な要素です。 デフォルトのデザインのままでは味気ないだけでなく、背景と同化して読みづらいこともあります。
このツールを使ってデザインをカスタマイズすることで、「配信の雰囲気に合わせる」「可読性を上げる」「視聴者に自分のコメントが読まれたという満足感を与える」ことができます。
このツールの特徴
- 直感的な操作: CSSの知識がなくても、スライダーやカラーピッカーで見たままに編集できます。
- リアルタイムプレビュー: 実際の配信画面に近い背景で、どのように表示されるか即座に確認できます。
- コピペで完了: 複雑なコードを書く必要はありません。生成されたコードをコピーして貼り付けるだけです。
- 日本語フォント対応: 「明朝体」や「ドット文字」など、日本語配信にマッチするフォントを選べます。
縦書きチャットで「和風」を演出
このツールは珍しい「縦書き(Vertical Writing)」に対応しています。 「和風ホラーゲーム」や「お正月配信」、「書道配信」など、和の雰囲気を大切にしたい場面で大活躍します。 フォントを「明朝体」に設定し、レイアウトタブで「縦書きモード」をONにするだけで、一気に雰囲気が変わります。
対応している配信ソフト
本ツールは、StreamElements(ストリームエレメンツ)の「Chat Box」ウィジェット向けに最適化されています。 Streamlabs(ストリームラボ)やその他のコメントビューアーでは、HTML構造(クラス名)が異なるため、CSSが正しく適用されない場合があります。
最も汎用性が高く、サーバー負荷も軽いStreamElementsでの運用を推奨しています。