
次をご覧ください: 画像で見られる全オーバーレイギャラリーを利用するか、下のカスタムテンプレートや取り込み機能をご覧ください。
配信にぴったりのテンプレートを見つけましょう
3つのブラウザソースに統一した見た目を適用できます。ギャラリーで次を選びます: おそろいのセットを使うを選んでセッション情報を入力し、OBS用リンクをコピーしてください。動きは任意です。








ドキュメント、サンプル画像、ガイドが付属するテーマ一式
色をカスタマイズでき、なめらかな切り替えを備えた洗練されたアニメーションテーマ。ゲーム配信に最適です。
クラシックなウィンドウと細かなピクセル表現を備えた、懐かしいWindows 3.1風チャットオーバーレイ。
なめらかなアニメーションと高い読みやすさを備えた、すっきりしたモダンなデザイン。配色を変更できます。
セッションIDを指定するだけで使えるテンプレート
必要な機能を備えた、すっきりした軽量テンプレート。カスタマイズの出発点に最適です。
なめらかなアニメーションと視覚効果を使った上品なデザイン。目を引きつつ、視聴を邪魔しません。
ゲーム配信用に設計された、くっきりした高コントラストのテーマ。展開の速い映像でも見やすく表示できます。
なめらかなアニメーションと印象的なエモート表示を備えた、洗練されたリキッドガラス風チャットオーバーレイ。
YouTube向けCSSスタイルを使用できるテンプレート
YouTubeと同じ構造のオーバーレイページで、YouTube向けCSSを使えます。Septapusのスタイルにも対応しています。
独自のカスタムオーバーレイを作るためのひな形
一から独自のオーバーレイを作るための最小限のコード。開発者やLLMを使ったコーディングに適しています。
コメントとドキュメントが付いた、より充実したひな形です。独自のオーバーレイ作成に役立ちます。
Social Stream Ninja用のすてきなテンプレートができたら、GitHubリポジトリへプルリクエストを送り、コミュニティと共有してください。
GitHubで投稿取り込みは初めてですか? チャットスキンの完全ガイドを読む でウィジェットファイルの探し方、対応形式、OBSの設定、問題の解決方法を確認できます。
SSNのWindowsデスクトップアプリとChrome拡張機能の両方で動作し、コードの編集は不要です。
SSNアプリまたは拡張機能でプラットフォームのソースを開き、テストメッセージを送信します。SSNドックに表示されてから次へ進んでください。
ウィジェットのデザイナーが提供するZIP、フォルダー、ファイルを使ってください。通常、適切な書き出しにはHTML、CSS、JavaScript、fields/data、アセットが含まれます。スクリーンショットやStreamElementsのオーバーレイURLだけでは不十分です。
SSNポップアップから取り込みツールを開くと、セッションIDとパスワードが自動入力されます。直接開いた場合は、次からコピーしてください: セッションオプション(Session Options) をアプリまたは拡張機能で確認します。セッションIDは取り込みツールで一度入力すると、ダウンロードしたファイル内に保存されます。
取り込んだウィジェットに対応する設定があれば、次を使います: メッセージ履歴(Message history) で、時間経過による削除を無効にしたり、画面に残すメッセージ数を変更したりできます。これはウィジェットの設定を変えるもので、コードは変更しません。
デモプレビュー(Demo Preview) はサンプルメッセージでデザインを確認します。 ライブプレビュー(Live Preview) は起動中のSSNアプリまたは拡張機能からの実際のチャットでセッションを確認します。
クリックする項目: OBS用HTMLをダウンロード(Download OBS HTML)。OBSにブラウザソースを追加し、次を有効にします: ローカルファイルを有効にして、ダウンロードしたHTMLファイルを選択します。 OBSでセッションIDを追加したりURLを編集したりしないでください。 配信中はSSNを起動したままにしてください。取り込みツールとStreamElementsは閉じてもかまいません。
取り込みツールが検出したファイルを確認し、HTML、CSS、JavaScriptの選択が間違っていた場合はAdvanced file selectionを使ってください。
チャットがSSNドックに届き、セッションIDと任意のパスワードが完全に一致していることを確認してください。
取り込みツールのページ、元のZIP、StreamElements URLではなく、ダウンロードしたHTMLファイルを使用し、OBSブラウザソースを更新してください。
次の簡単な手順で始められます
テンプレートライブラリから配信の雰囲気に合うものを選んでください。スクリーンショットギャラリーでデザインを比較できます。多くの組み込みテンプレートはURLから直接使え、ダウンロードは不要です。
置き換える値: YOURSESSIONID をテンプレートURL内で、SSNアプリまたは拡張機能のSession Optionsにある実際のSocial Stream NinjaセッションIDへ置き換えます。パスワードを使用するセッションでは、それも含めてください。
https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID
変更したURLを配信ソフトのブラウザソースとして追加します:
次のいずれかの方法で、カスタムCSSを使ってオーバーレイを調整できます:
&css=URL_TO_YOUR_CSS_FILE をテンプレートURLへ追加します&b64css=YOUR_BASE64_ENCODED_CSS動作するオーバーレイを出発点に、見た目を変更します。
OBSブラウザソースを使用する カスタムCSS で色、余白、文字のスタイルを変更できます。元のSSN URLと接続は維持してください。
StreamElementsのチャットウィジェットの書き出しファイルをお持ちですか? StreamElements変換ツールを開くへ取り込み、プレビューしてからOBS用HTMLをダウンロードします。スクリーンショットやオーバーレイURLではなく、元のZIPまたはファイルを使用してください。 下の設定手順を見る.
トリガーに応じた動作には、まず次を確認してください: Event Flowエディタ および アラートエフェクトのルール 。新しいオーバーレイを書く前に確認してください。
出発点を選んでプロンプトをコピーし、角括弧内のデザイン指定を書き換えてください。AIがリンクを読めない場合はソースファイルを添付してください。非公開のセッションIDとパスワードは会話に含めないでください。
複雑なウィジェットを変換する場合 StreamElements / Streamlabs変換用の完全なプロンプトを使う.
AIの支援を使ったカスタムチャットオーバーレイの作成方法を学ぶ