スカイブルー × ピンクのポップでかわいい配信オーバーレイです。丸みのあるデザインと星の装飾が特徴。OBS の「ブラウザソース」に読み込んで使用します。すべての設定はブラウザ内に保存されるため、外部ファイルは不要です。
| 操作 | 内容 |
|---|---|
| ダブルクリック | 何もない場所でパーツ追加メニューを開く |
| ヘッダーをドラッグ | ボックスを移動する |
| 長押し（0.2秒） | ボックス内のどこでも長押し → そのままドラッグで移動 |
| 角・辺のハンドル | ホバーで表示、ドラッグでリサイズ |
| ≡ ボタン | ボックス右上に出現 → 複製・文字サイズ・色変更・削除 |
| ヘッダー文字 | クリックで直接編集できます |
| パーツ名 | 説明 |
|---|---|
| 🔴 配信中バッジ | 点滅する LIVE ラベル。文字は直接編集可能。丸みのあるピル形状 |
| 👤 プロフィール欄 | 複数行を自動スクロール表示。ダブルクリックで編集 |
| ✉️ メッセージ入力欄 | 自由にテキストを入力できる横長バー |
| 🕐 時計（バー埋め込み型） | 日付＋時刻を常時表示する時計バー |
| パーツ名 | 説明 |
|---|---|
| 🕐 時計（独立） | 自由配置できる独立した時計ボックス |
| ⏱ ストップウォッチ | ▶ 開始・⏸ 停止・↺ リセット付きのタイマー |
| 🔢 カウンター | ＋／－／リセット付き。ステップ値を変更可能 |
| 📝 メモボックス | メモ用テキスト入力ボックス |
| ▭ テキスト入力 | ヘッダーなしのシンプルなテキスト欄 |
| ◻ 図形（四角形） | リサイズ・色変更できる角丸四角形 |
| ○ 図形（円） | リサイズ・色変更できる円形 |
| 🏷 タイトルボックス | 大きな文字のタイトル表示ボックス |
| 🖼 画像ボックス | クリックまたはドラッグ＆ドロップで画像を表示 |
pop-overlay-config_日時.json
としてダウンロードします。PC 間の移行やバックアップに使用できます。パーツメニューの「表示更新」を押すと、今の編集内容を同じURLで開いている別タブへ即座に反映できます。編集用タブと配信確認用タブを並べて作業したいときに便利です。
2つのタブが同じオリジン（同じURL）で開かれている必要があります。ファイルをダブルクリックして file://
で直接開いた場合、ブラウザによっては2タブ間でデータが共有されず、この機能が動作しません。http:// または https://
経由で開いてください。
サーバー起動.bat をダブルクリックする（要 Python）。このPCにPythonが入っていない場合、サーバー起動.bat を実行してもエラーになります。python.org
からダウンロード・インストールしてください（インストール時に「Add python.exe to PATH」に必ずチェック）。インストール後、
サーバー起動.bat を再度実行すれば起動します。
OBSの「Custom Browser Dock」と「ブラウザソース」の両方に同じ公開URLを設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。
ファイル上部の const CONFIG = { ... } ブロックを編集することで、色・テキスト・アニメーション速度などを変更できます。
| 設定項目 | 初期値 | 説明 |
|---|---|---|
color.accent |
#7ec8e3 |
枠線・バッジなどのメインカラー（スカイブルー） |
color.sub |
#ff9ecb |
コーナー星・サブカラー（ピンク） |
color.liveBadge |
#5bb3d8 |
配信中バッジの背景色 |
color.background |
#f0faff |
画面の背景色（水色） |
color.bodyText |
#3a8bb5 |
コメント・メモの文字色 |
text.liveBadge |
LIVE |
バッジに表示する文字 |
text.titleBoxHeader |
タイトル ★ |
タイトルボックスのヘッダー |
text.commentBoxHeader |
コメント ✨ |
コメントボックスのヘッダー |
text.memoBoxHeader |
メモ 📝 |
メモボックスのヘッダー |
profile |
3行の配列 | プロフィール欄に表示する文字列リスト |
animation.starSpeed |
8s |
コーナー星の回転速度 |
animation.profileInterval |
3000（ms） |
プロフィールの切替間隔 |
features.autoLoad |
true |
ページを開いたとき保存済み設定を自動で読み込む（false にすると手動のみ） |
features.saveConfigEnabled |
true |
設定の保存・読み込み機能を有効にする（false で「設定を保存」ボタン非表示） |
pop.html を選択する（このフォルダ内のファイル）body { background-color: transparent !important; }
を追加し、「ページが表示されていない場合にソースをシャットダウン」のチェックを外してください。
ヘッダー・ラベル・ボタンに使用。丸みのある太字でポップな印象を演出。
本文・入力テキストに使用。Quicksandと相性抜群の可愛らしいゴシック体。