説明書 — SWEET LOLITA theme

OBS設定

HOW TO ADD TO OBS

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

OBSを起動し、使用したいシーンを選択する。
Launch OBS Studio and select the target scene.
「ソース」パネルの＋をクリックし、「ブラウザ」 を選択する。
Click + in Sources and choose Browser.
「ローカルファイル」 にチェックを入れ、sweet_lolita_rose.html を選択する。
Check "Local File" and browse to sweet_lolita_rose.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.

✋

ボックス移動

ヘッダーをドラッグ、またはボックス内を長押し（約0.2秒）してからドラッグで移動できます。
Drag the header, or long-press inside the box 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 Parts`	テーマ専用の背景装飾を追加します。 Adds decorative background effects unique to this theme. ✦ 流れ星・キラキラ / Stars 🌈 オーロラ / Aurora ○ バブル / Bubbles
背景色 `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: '#ea92c1',    // メインカラー（枠線・発光） / Main color
    liveBadge: '#df6ba6', // LIVEバッジ色 / LIVE badge color
    background: '#fff0f7',// 背景色 / Background color
    bodyText: '#7a4d6a',  // テキスト色 / Text color
  },
  text: {
    liveBadge: 'LIVE',
    titleBoxHeader: 'SWEET LOLITA',
    titleBoxContent: 'ふんわり甘ロリ配信へようこそ♡',
    commentBoxHeader: 'MESSAGE',
    memoBoxHeader: 'MEMO',
    memoBoxContent: 'ダブルクリックでメニューを開けるよ',
    messagePlaceholder: 'メルヘンなコメントを入れてね',
    memoPlaceholder: 'メモを書く...',
  },
  profile: [
    'あなたの名前 / Your Name',
    'WEB: yourwebsite.com',
    'X: @yourhandle',
    // 行を追加するほど増やせます / Add more lines freely
  ],
  animation: {
    profileInterval: 3000, // プロフィール切替間隔(ms)
  },
};

カラー設定 / COLOR SETTINGS

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

プロフィール / PROFILE

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

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

ヒント: 色はHEX（#ea92c1）またはRGBA（rgba(234,146,193,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".
画面が真っ白 White 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.