【YouTube/OBS対応】ステッチアトリエ コメントCSS｜Quilted Atelier｜5色＋アニメーション

YouTube Liveのコメント表示を、織り目と刺繍のステッチで、手仕事の温度を残しながら落ち着いて読める布素材デザインに変えられる配信用コメントCSSセットです。

Social Stream Ninjaの dock.html / featured.html をOBS Studioのブラウザソースで使う配信向けに、YouTube Live用のセレクタを入れています。

────────────────────

■ 初版 v1.0.0

────────────────────

カード形状、名前プレート、アバター装飾、背景レイヤー、入場／待機アニメーションをこのテーマ専用に設計した初版です。

カード外への装飾はみ出しを防ぎ、featured / dock、右寄せ、コンパクト表示、大アバター、アバターなしを実際の対象DOMで検証済みです。

────────────────────

■ 内容物

────────────────────

・YouTube Live用コメントCSS 5色（featured / dock 各5ファイル）

・導入説明テキスト

・ローカル確認用プレビューHTML 2種

・サンプル画像

・利用規約

収録カラー

・インディゴパッチ

・オックスブラッドパッチ

・サフランステッチ

・フォレストフェルト

・プラムスレッド

────────────────────

■ このデザインの特徴

────────────────────

・布パッチを重ねた控えめなキルティングカード

・織りネーム風の名前タグと刺繍枠アバター

・ステッチの上だけを短く反射する微細な動き

・長めのコメントや絵文字が混ざるチャットでも読める行間

・アニメーションを抑えるための prefers-reduced-motion 対応

・文字サイズ、余白、色をCSS変数で微調整可能

────────────────────

■ 対応環境

────────────────────

・YouTube LiveのコメントをSocial Stream Ninjaで表示する配信

・OBS Studioのブラウザソース

・Social Stream Ninja の dock.html（連続コメント）または featured.html（選択コメント）

※ Social Stream Ninja本体・コメント取得機能は商品に含まれません。

※ YouTube Shorts Liveを含むYouTube系ソースを対象にしています。

※ サービスやOBSの更新、ご利用のURLパラメータにより軽微な表示調整が必要になる場合があります。

────────────────────

■ 導入の概要

────────────────────

1. Social Stream Ninjaでコメント受信を有効化

2. dock.html または featured.html をOBSのブラウザソースに設定

3. 用途に合う dock_ または featured_ で始まる、お好きな色のCSSを「カスタムCSS」欄に貼り付け

4. 必要に応じてファイル先頭の :root で文字サイズ・余白を調整

────────────────────

■ 利用について

────────────────────

【OK】

・YouTube Live配信での利用

・収益化配信での利用

・OBS上での利用

・色、サイズ、余白などの軽微な改変

・配信画面や告知画像への使用

【NG】

・素材データの再配布、再販売

・購入者以外への共有

・自作発言

・改変後データの配布、販売

クレジット表記は任意です。