説明書 — GAMING theme

gaming Streaming Overlay ♡ Created by donnma

注意：二次配布および改変しての配布を禁じます。

HOW TO ADD TO OBS

ブラウザソースとして追加 / ADD AS BROWSER SOURCE

OBSを起動し、使用したいシーンを選択する。
Launch OBS Studio and select the target scene.
「ソース」パネルの＋をクリックし、「ブラウザ」 を選択する。
Click + in Sources and choose Browser.
「ローカルファイル」 にチェックを入れ、gaming.html を選択する。
Check "Local File" and browse to gaming.html.
幅: 1920、高さ: 1080 に設定する。
Set Width: 1920, Height: 1080.
「カスタムCSS」欄は空欄のままにする。
Leave Custom CSS empty.
「OK」をクリックして完了。
Click "OK" to finish.

操作するには「対話」を有効化: ソースを右クリック → 「対話」を選択。対話ウィンドウ内でクリック・ドラッグ操作ができます。
Enable "Interact": Right-click the source → "Interact". All clicks and drags work inside the Interact window.

推奨設定 / RECOMMENDED SETTINGS

設定項目 / Setting	推奨値 / Value
幅 / Width	1920
高さ / Height	1080
カスタムCSS / Custom CSS	空欄 / Empty

基本操作

BASIC OPERATIONS

✏️

テキスト編集

テキスト部分をクリックすると直接編集できます。
Click any text to edit directly.

📋

メニューを開く

空白エリアをダブルクリックするとメニューが表示されます。
Double-click any empty area for the context menu.

✋

ボックス移動

ボックスのヘッダーをドラッグして位置を変更できます。
Drag the box header to move it.

☰

ボックスメニュー

ボックス右上の ≡ ボタンでオプションを表示します。
Click ≡ on a box for its options.

メニュー機能

MENU FEATURES

ダブルクリックメニュー / DOUBLE-CLICK MENU

項目 / Item	説明 / Description
ボックス追加 `Add Box`	テキストボックスを追加します。タイトル・メモ・コメント欄として自由に使えます。 Adds a movable text box for titles, memos, comments, etc.
図形追加 `Add Shape`	サブメニューから形を選んで図形を追加します。 Adds a shape — select the type from the submenu. □ 四角形 / Rectangle ○ 円 / Circle
背景色 `Background Color`	画面全体の背景色を変更します。カラーピッカーが開きます。 Changes the screen background. Opens a color picker.
背景クリア `Clear Background`	背景を透明に戻します。 Resets background to transparent.

≡ メニュー (ボックス・図形共通) / BOX & SHAPE OPTIONS

操作 / Action	説明 / Description
リサイズ / `Resize`	ハンドルをドラッグしてサイズを変更します。 Drag the edge/corner handles to resize.
回転 / `Rotate`	スライダーで -180°〜+180° の範囲で回転します。 Slider controls rotation from -180° to +180°.
塗り色 / `Fill Color`	背景色を変更します。 Changes the fill/background color.
枠色 / `Border Color`	枠線の色を変更します。 Changes the border color.
削除 / `Delete`	要素を削除します。 Removes the element.

カスタマイズ設定 (CONFIG)

CUSTOMIZATION

HTMLファイルをテキストエディタで開き、ファイル上部の CONFIG ブロックを編集してください。
Open the HTML file in a text editor and edit the CONFIG block near the top.

const CONFIG = {
                color: {
                accent: '#00fff7', // メインカラー（枠線・発光） / Main color
                liveBadge: '#ff3c3c', // LIVEバッジ色 / LIVE badge color
                background: '#0a0a0f', // 背景色 / Background color
                bodyText: '#c0c0c8', // テキスト色 / Text color
                },
                text: {
                liveBadge: 'LIVE',
                titleBoxHeader: 'TITLE',
                titleBoxContent: 'LIVE配信用オーバーレイ画面',
                commentBoxHeader: 'COMMENT',
                memoBoxHeader: 'MEMO',
                memoBoxContent: '空白ダブルクリックでメニュー選択可能',
                messagePlaceholder: 'メッセージを入力...',
                memoPlaceholder: 'メモを入力...',
                },
                profile: [
                'あなたの名前 / Your Name',
                'WEB: yourwebsite.com',
                'X: @yourhandle',
                ],
                animation: {
                profileInterval: 3000, // プロフィール切替間隔(ms)
                },
                };

カラー設定 / COLOR SETTINGS

キー / Key	説明 / Description	初期値 / Default
`color.accent`	枠線・発光カラー Border & glow color	`'#00fff7'`
`color.liveBadge`	LIVEバッジ背景色 LIVE badge background	`'#ff3c3c'`
`color.background`	画面背景色 Screen background	`'#0a0a0f'`
`color.bodyText`	テキスト色 Text color	`'#c0c0c8'`

プロフィール / PROFILE

上部バーに順番に表示されるテキストの配列です。
An array of texts displayed in rotation in the top bar.

profile: [
                'ゲーマー名',
                'GAME: タイトル',
                'X: @yourhandle',
                // 行を追加するほど増やせます / Add more lines freely
                ],

ヒント: 色はHEX（#00fff7）またはRGBA（rgba(0,255,247,0.5)）形式で指定できます。
Tip: Colors accept HEX or RGBA format.

機能設定 / FEATURES

キー / Key	説明 / Description	初期値 / Default
`features.autoLoad`	ページを開いたとき保存済み設定を自動で読み込む。 `false` にすると「保存を読み込む」を手動で押す必要があります。 Auto-load saved config on page open. Set `false` for manual load only.	`true`
`features.saveConfigEnabled`	設定の保存・読み込み機能を有効にする。 `false` にすると「設定を保存」ボタンが非表示になります。 Enable save/load config. Set `false` to hide the save button.	`true`

トラブル対処

TROUBLESHOOTING

症状 / Symptom	対処法 / Solution
クリックに反応しない No response to clicks	OBSでソース右クリック → 「対話」を選択。 Right-click source in OBS → "Interact".
画面が真っ黒 Black screen	「ローカルファイル」にチェックが入っているか確認。 Verify "Local File" is checked.
サイズがずれる Wrong size	幅 1920・高さ 1080 を確認。 Check width=1920, height=1080.
配置が保存されない Layout lost on reload	リロードでリセットされます。`CONFIG` の直接編集で永続化できます。 Reloads reset state. Edit `CONFIG` for permanent changes.