桜・竹・格子をモチーフにした和風ストリーミングオーバーレイです。OBS の「ブラウザソース」に読み込んで使用します。すべての設定はブラウザ内に保存されるため、外部ファイルは不要です。
| 操作 | 内容 |
|---|---|
| ダブルクリック | 何もない場所でパーツ追加メニューを開く |
| ヘッダーをドラッグ | ボックスを移動する |
| 長押し（0.2秒） | ボックス内のどこでも長押し → そのままドラッグで移動 |
| 角・辺のハンドル | ホバーで表示、ドラッグでリサイズ |
| ≡ ボタン | ボックス右上に出現 → 複製・文字サイズ・色変更・削除 |
| ヘッダー文字 | クリックで直接編集できます |
| パーツ名 | 説明 |
|---|---|
| 🔴 配信中バッジ | 点滅する「配信中」ラベル。文字は直接編集可能 |
| 👤 プロフィール欄 | 複数行を自動スクロール表示。ダブルクリックで編集 |
| ✉️ メッセージ入力欄 | 自由にテキストを入力できる横長バー |
| 🕐 時計（バー埋め込み型） | 日付＋時刻を常時表示する時計バー |
| パーツ名 | 説明 |
|---|---|
| 🕐 時計（独立） | 自由配置できる独立した時計ボックス |
| ⏱ ストップウォッチ | 開始・停止・リセット付きのタイマー |
| 🔢 カウンター | ＋／－／リセット付き。ステップ値を変更可能 |
| 📝 覚書ボックス | メモ用テキスト入力ボックス |
| ▭ テキスト入力 | ヘッダーなしのシンプルなテキスト欄 |
| ◻ 図形（四角形） | リサイズ・色変更できる四角形 |
| ○ 図形（円） | リサイズ・色変更できる円形 |
| 🏷 演目ボックス | タイトル表示用の大きな文字ボックス |
| 🖼 画像ボックス | クリックまたはドラッグ＆ドロップで画像を表示 |
wa-overlay-config_日時.json としてダウンロードします。PC 間の移行やバックアップに使用できます。ファイル上部の const CONFIG = { ... } ブロックを編集することで、色・テキスト・アニメーション間隔などを変更できます。
| 設定項目 | 初期値 | 説明 |
|---|---|---|
color.accent | #b5627e | 枠線・バッジなどのメインカラー（桜色） |
color.liveBadge | #8b3a56 | 配信中バッジの背景色 |
color.background | #faf6f0 | 画面の背景色（和紙風クリーム） |
color.bodyText | #5a3a4a | コメント・メモの文字色 |
text.liveBadge | 配信中 | バッジに表示する文字 |
text.titleBoxHeader | 演目 | 演目ボックスのヘッダー |
text.commentBoxHeader | 声 | コメントボックスのヘッダー |
text.memoBoxHeader | 覚書 | 覚書ボックスのヘッダー |
profile | 3行の配列 | プロフィール欄に表示する文字列リスト |
animation.profileInterval | 3000（ms） | プロフィールの切替間隔 |
features.autoLoad | true | ページを開いたとき保存済み設定を自動で読み込む（false にすると手動のみ） |
features.saveConfigEnabled | true | 設定の保存・読み込み機能を有効にする（false で「設定を保存」ボタン非表示） |
wa.html を選択する（このフォルダ内のファイル）body { background-color: transparent !important; } を追加し、「ページが表示されていない場合にソースをシャットダウン」のチェックを外してください。
ヘッダー・ラベル・装飾テキストに使用。明朝体で和の雰囲気を演出。
本文・入力テキストに使用。可読性の高いゴシック体。