【YouTube/OBS対応】ミッドナイトグラスコメントCSS｜Midnight Glass（Social Stream Ninja用・5色）

YouTube Liveのコメント表示を、黒ガラスと細い光のラインで、画面を邪魔せず洗練させるミニマルデザインに変えられる配信用コメントCSSセットです。

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

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

■ v2.0.1 表示品質改善

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

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

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

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

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

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

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

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

■ 内容物

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

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

・導入説明テキスト

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

・サンプル画像

・利用規約

収録カラー

・コバルトグラス

・バイオレットグラス

・エメラルドグラス

・ワイングラス

・スレートグラス

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

■ このデザインの特徴

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

・余白を活かした黒ガラス風レイアウト

・細いハイライトラインの静かなアニメーション

・FPS・ホラー・大人っぽい雑談配信に合う控えめな高級感

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

・アニメーションを抑えるための 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】

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

・購入者以外への共有

・自作発言

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

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