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