サイバーピンクの配信バー【OBS】時計・日付・LIVE表示｜VTuber・ゲーム配信の素材（6色・設定画面つき）

CYBER PINK STREAM BAR — OBS用の配信バー（HTMLウィジェット）

配信画面に、時計とかわいいを1本で。

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

■ こんな素材です

時計・日付・LIVE表示・ゲーム名・SNSのIDを、横長のバー1本にまとめた

配信画面用の素材です。OBS Studio の［ブラウザ］に読み込んで、

画面の上か下のふちに置いてお使いください。

画像ではなく HTML でできているので、時計は実際に動きます。

大きくしたいときは、OBS の［幅］［高さ］を、同じ倍率で大きくしてください。

（例: 幅1200 高さ96 → 幅2400 高さ192）。高さだけ上げるとバーの両端が切れます。

バーの高さは［高さ］96 で 60 px、192 で 116 px、288 で 172 px になります。

その方法なら文字はぼけません（配信画面で角を引っぱって伸ばすとぼけます）。

⚠ ［高さ］288 より大きくしても、バーはそれ以上大きくなりません

（配信画面いっぱいにならないよう上限を付けています）。

HTML や CSS の知識はいりません。

付属の設定画面で、色はボタンで選び、文字は打ち込むだけで変えられます。

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

■ 特徴

・時計が実際に動きます（パソコンの時計をそのまま表示）

・OBS の［幅］［高さ］を大きくすれば、大きくしても文字がぼけません（画像ではなく HTML）

・背景は透過。配信の映像の上にそのまま重ねられます

・設定画面つき。HTML を書きかえる必要はありません

・外部のサーバーにつながりません（インターネットが切れても動きます）

・会員登録・APIキー・追加のソフトは不要です

・長い配信でも目が疲れないよう、動きは控えめに作ってあります

・パソコン側で「アニメーションを減らす」設定にしている方には、動きが自動で止まります

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

■ この商品に入っているもの

【カラーテーマ 6色】

PINK / PURPLE / BLUE / GREEN / WHITE / DARK

ボタンを押すだけで切り替わります。

【時計】

24時間表示 / 12時間表示（AM・PM）

秒の表示を出す・出さない

【日付】4通りの書き方

09.16 WED（月日と曜日）

2026.09.16（年月日）

09.16（月日だけ）

SEP 16（英語の月）

日付そのものを出さないことも選べます

【LIVE表示】

「LIVE」「ON AIR」「配信中」など、文字は自由に変えられます（16文字まで）

【カスタムテキスト】

好きな言葉をひとつ入れられます（日本語も入ります・40文字まで）

⚠ 長すぎるときは、バーの中で「…」と省略されます

【NOW PLAYING】

小さな見出しと中身の2段組み。

見出し（NOW PLAYING）も中身（ゲーム名）も自由入力です（見出し 24文字・中身 40文字まで）

⚠ 中身が長すぎるときは、バーの中で「…」と省略されます

【SNSのID】

@あなたのID を表示できます（32文字まで）

⚠ 長すぎるときは、バーの中で「…」と省略されます

【アニメーション 5種類】

なし / ゆっくり点滅 / スライド / タイピング / グリッチ

どれも配信の邪魔にならない量にしてあります

【表示の大きさ】3段階（小・中・大）

⚠ 文字だけでなくバー全体が大きくなります（［高さ］96 のとき 高さ 53 / 60 / 68.4 px）

【透明度】0〜100%

【設定画面】settings.html をダブルクリックするだけで開きます

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

■ 導入方法

1. ZIP を解凍します

2. settings.html をダブルクリックして、色と文字を決めます

3. 「アドレスをコピー」を押します

4. OBS の［ソース］の ＋ →［ブラウザ］を選びます

5. ［ローカルファイル］のチェックを外し、［URL］にアドレスを貼ります

6. ［幅］1200 ／［高さ］96 を入れて OK

7. 配信画面でドラッグして位置を合わせます

（大きくしたいときは、角を引っぱらずに 6 の［幅］［高さ］を大きくしてください）

くわしい手順は、同梱の README.html に書いてあります。

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

■ 動作環境

・動作を確かめた環境: OBS Studio 32.1.2 / Windows 11

・これより前の版の OBS Studio・Mac では確かめていません

・インターネット接続は不要です

・会員登録・APIキー・追加のソフトは不要です

・Adobe などの有料ソフトは必要ありません

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

■ ファイルの内容（全 21 ファイル）

PRO/

index.html OBS に読み込む本体

settings.html 設定画面

css/ js/ assets/ ほか 中身のファイル（触らなくて大丈夫です）

README.html くわしい説明（ブラウザで開きます）

README.txt 文字だけの説明

LICENSE.txt ご利用の範囲

PREVIEW/

preview.html 6色と主な設定を1ページで見比べられる確認用

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

■ ご利用の範囲（くわしくは同梱の LICENSE.txt）

○ 個人でのご利用

○ 配信でのご利用（YouTube / Twitch / ニコニコ生放送 / TikTok など）

○ 収益化しているチャンネルでのご利用

○ 法人・企業案件配信でのご利用

○ 色・大きさ・文字などの変更

× 再配布・転売

× 素材そのものの販売・配布

× ご購入者以外への配布

（制作を手伝う方への一時的な受け渡しを除く／くわしくは LICENSE.txt）

× 自作発言

著作権は Enyeart design（michew）にあります。

クレジット表記は必須ではありません。

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

■ ご注意

・デジタル商品のため、ご購入後の返品・返金は承っておりません。

・ZIP を解凍してからお使いください。中のファイルだけを取り出すと動きません。

・時刻はお使いのパソコンの時計を表示します。

・フォントのファイルは同梱していません（パソコンに入っている字で表示します）。

・OBS Studio をはじめ各ソフトの仕様変更により、表示が変わる場合があります。

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

ご不明な点は、この商品ページのメッセージからお気軽にどうぞ。