【Twitch/OBS対応】星降るコメントCSS｜Stardust Parade（Social Stream Ninja用・5色）

Twitchのコメント表示を、星粒と流れ星が浮かぶ、幻想的でやわらかな発光デザインに変えられる配信用コメントCSSセットです。

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

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

■ v2.0.1 表示品質改善

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

カード本体より外へ装飾がはみ出さないようにし、名前・アイコン・バッジの配置を featured / dock、右寄せ、コンパクト表示を含む複数の表示構成で安定化しました。

featured と dock の両方を実際の対象DOMで検証済みです。

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

■ v2.0.0 プレミアム全面改訂

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

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

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

■ 内容物

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

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

・導入説明テキスト

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

・サンプル画像

・利用規約

収録カラー

・ミッドナイト

・オーロラ

・月光

・流星ブルー

・プラネットピンク

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

■ このデザインの特徴

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

・星粒を散らした奥行きのあるカード

・流れ星のきらめきアニメーション

・夜配信や歌配信に合うやさしいグロー

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

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

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

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

■ 対応環境

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

・TwitchチャットをSocial Stream Ninjaで表示する配信

・OBS Studioのブラウザソース

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

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

※ Twitchのバッジ・エモートを隠さず、流量が多い時も読みやすい余白を確保しています。

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

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

■ 導入の概要

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

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

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

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

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

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

■ 利用について

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

【OK】

・Twitch配信での利用

・収益化配信での利用

・OBS上での利用

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

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

【NG】

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

・購入者以外への共有

・自作発言

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

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