Chat Styles

使い方

Chat Stylesとは

Chat Stylesは、YouTube Liveのチャットの見た目を変更するCSSを生成するツールです。OBS Studioのブラウザソースでカスタムスタイルを適用することで、配信画面上のチャット表示をカスタマイズできます。

基本的な使い方

1. スタイルをカスタマイズする

左側のフォームで、チャットの見た目をカスタマイズできます。以下の項目を調整できます：

アイコン
ユーザーアイコンの表示・非表示と大きさを設定します。

フォント
チャット全体で使用するフォントを選択します。システムにインストールされているフォントから選択できます。

名前
オーナー、モデレーター、メンバー、一般ユーザーそれぞれの名前の表示設定を行います。表示・非表示、大きさ、色、アウトラインを個別に設定できます。

メッセージ
チャットメッセージのテキストサイズと色、アウトラインを設定します。

ステッカー
スーパーチャットなどに含まれるステッカーの大きさと、テキストの表示・非表示を設定します。

その他
入室メッセージ、スーパーチャットの背景、メンバー登録アナウンスの背景の表示設定を行います。

2. CSSをコピーする

右下の「カスタムCSS」セクションに生成されたCSSが表示されます。「コピーする」ボタンをクリックしてCSSをクリップボードにコピーします。

3. OBS Studioで使用する

コピーしたCSSをOBS Studioで使用します：

ブラウザソースの追加

  1. OBS Studioで「ソース」の「+」ボタンをクリック
  2. 「ブラウザ」を選択
  3. 任意の名前を入力して「OK」をクリック

URLの設定

「URL」フィールドに、YouTube LiveのチャットページのポップアウトURLを入力します。URLは以下の形式です：

https://www.youtube.com/live_chat?v=VIDEO_ID&is_popout=1

カスタムCSSの適用

「カスタムCSS」フィールドに、先ほどコピーしたCSSを貼り付けます。

その他の設定

  • 「幅」と「高さ」を配信画面に合わせて調整
  • 「シャットダウン時にブラウザを更新」をチェック
  • 「OK」をクリックして設定を保存

より良い結果を得るためのヒント

  • フォントは、配信で使用するPCにインストールされている必要があります。
  • アウトラインの太さを調整することで、テキストの視認性を向上させることができます。
  • 背景色と文字色のコントラストに注意して、読みやすさを確保してください。
  • 設定は自動的にブラウザに保存されるため、次回訪問時にも同じ設定を使用できます。
  • プレビュー画面で実際の見た目を確認しながら調整できます。

よくある質問

Q: 設定はどこに保存されますか？
A: 設定はブラウザのローカルストレージに保存されます。サーバーには送信されません。

Q: 別のデバイスで同じ設定を使用できますか？
A: ローカルストレージに保存されるため、デバイス間での同期はされません。設定を移行したい場合は、生成されたCSSをコピーして保存しておくことをお勧めします。

Q: プレビューと実際のYouTube Liveチャットの見た目が異なる場合があります。
A: プレビューは参考程度にご覧ください。YouTubeのチャットUIが更新されると、実際の表示が変わる可能性があります。実際の配信環境で確認することをお勧めします。

お問い合わせ

ご質問やフィードバックがある場合は、GitHubのリポジトリからIssueを作成してください。