【配信】カレンダー 12デザイン｜今日／今週／今月を切り替え｜背景は透過・配信予定日に丸・土日に色・OBS用・設定ボタン(⚙)つき・登録不要

配信画面のすみに置きっぱなしにするカレンダーです。日付はPCの時計から取るので、入力も更新も要りません。0時をまたぐと、その場で勝手に切り替わります。同じ機能のまま、見た目だけ違うものを12デザインそろえました。

出しかたは3つ。「今日だけ（日めくり風）」「今週の7日」「今月のカレンダー」を、⚙で切り替えられます。今日はどの出しかたでも強調されます。

背景は最初から透過です。OBSのブラウザソースに入れて、そのまま映像やゲーム画面の上に重ねられます。

動画ファイルではありません。画像も1枚も使っていないので、どんな大きさに拡げてもにじみません。

単一HTML・インストール不要・アカウント不要・オフライン動作。日本語／English 切替対応。

━━━━━━━━━━━━━━━━━━

◆ 収録している12デザイン

━━━━━━━━━━━━━━━━━━

・dailyflip.html … 日めくり（紙の札に赤い帯とミシン目）

・minimal.html … ミニマル（板を敷かず、細い罫線だけ）

・neon.html … ネオン（板を敷かず、文字が光る）

・washi.html … 和紙（紙の繊維・内側の罫・朱の落款）

・led.html … ドットマトリクス（黒い盤に発光。粒の目が入る）

・paperclip.html … クリップ留めのメモ（少し傾いた紙に金具）

・chalk.html … 黒板（木の枠と白墨のかすれ）

・terminal.html … ターミナル（窓の帯と走査線）

・pixel.html … ドット絵（太い枠と段付きの影）

・marble.html … 大理石（石の脈と光）

・blueprint.html … 製図（方眼と破線の枠）

・pop.html … 丸文字パステル（角の丸い板に泡）

12デザインとも中身と機能は同じです。見た目だけが違います。

━━━━━━━━━━━━━━━━━━

◆ 配信予定日に丸が付きます

━━━━━━━━━━━━━━━━━━

⚙の「印を付ける日」に「9/2,9/9,9/16」のように書くだけで、その日に丸が付きます。

・月間表示ではマスに丸、今週表示では数字に丸、今日だけの表示ではその日が来たときに大きな丸が付きます

・年を書かなければ「毎年その日」です（誕生日や記念日に）

・年まで決めたいときは 2026-09-02 のように書きます

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）

━━━━━━━━━━━━━━━━━━

出しかたも、色も、印を付ける日も、URLを書き換えずに設定できます。

1. ソース一覧のカレンダーを右クリック →「対話」を選ぶ

2. 画面にマウスを乗せると、右上に ⚙ が出ます（出ないときは S キー）

3. 変更して「保存して閉じる」

・普段 ⚙ は見えないので、配信画面には映りません

・設定は保存され、OBSを再起動しても残ります。「設定を初期化」で購入時の状態に戻せます

・?key=a ?key=b を付けると、同じデザインでもシーンごとに別の設定にできます

※ 設定の保存先はブラウザごとに別々です。Chromeで開いて設定してもOBS側には反映されません。OBSで使うぶんは、必ずOBSの「対話」画面の中で設定してください。

━━━━━━━━━━━━━━━━━━

◆ 12デザインすべてに共通の設定

━━━━━━━━━━━━━━━━━━

・?view=week … 出しかた（today＝今日だけ（初期）/ week＝今週 / month＝今月）

・?week=mon … 週の始まりを月曜にする（初期は日曜）

・?holiday=on … 土曜・日曜に色を付ける（初期は付けない）

・?fmt=ja … 日付の書きかた（slash＝8 / 31（初期）/ dot＝8.31 / iso＝2026-08-31 / en＝31 AUG / ja＝8月31日 / kanji＝八月三十一日）

・?label=配信予定 … いちばん上に入れる文字（空にすると消えます）

・?mark=8/31,9/2 … 印を付ける日

・?theme=sumi … 配色（デザインごとに3〜4色）

・?scale=1.4 … 大きさ（0.3〜3）

・?bg=on … 確認用の下地を敷く ※初期は透過

・?color= / ?accent= / ?bgcolor= … 色を自分で指定（#は不要。文字／今日・印・見出し／板）

・?lang=en … 英語表示 ／ ?mode=stream … ⚙を完全に出さない

・?now=2026-02-29 … 日付をその日にずらして表示する（見本を作るときの確認用）

━━━━━━━━━━━━━━━━━━

◆ OBSへの入れ方

━━━━━━━━━━━━━━━━━━

1. ソース →「＋」→「ブラウザ」

2.「ローカルファイル」にチェック → 使いたい .html を選ぶ

3. 幅・高さを入れる（目安: 今日だけ 480x300 / 今週 540x260 / 今月 500x460）

4. 画面のすみに置いて、大きさと位置を合わせる

━━━━━━━━━━━━━━━━━━

◆ ご注意

━━━━━━━━━━━━━━━━━━

・日付はお使いのPCの時計から取ります。PCの日付が間違っていると、そのまま出ます

・祝日の判定は入っていません。「土曜・日曜に色を付ける」だけです

・予定の文字（イベント名など）をマスの中に書き込む機能はありません。付けられるのは丸印だけです

・時刻（時計）は出ません。日付だけの表示です

・視聴者コメントの集計や、外部アプリ・APIとの連携機能はありません

・効果音はありません（表示のみです）

━━━━━━━━━━━━━━━━━━

◆ 特長

━━━━━━━━━━━━━━━━━━

・文字も枠も全部HTMLで描いています。画像を1枚も使っていないので、どの解像度でもにじみません

・外部への通信は一切ありません（ネット接続不要・Webフォントなし）

・日付が変わった時だけ組み直しているので、長時間つけっぱなしでもメモリが増えません

・うるう年（2月29日）や、月末が31日／30日／28日の月も正しく並びます

・Chrome／Edge で動作確認済み

・配信可・商用利用可（同梱の利用規約参照）

◆ こんな方に

・配信画面に今日の日付をずっと出しておきたい方

・待機画面や告知に、今月のカレンダーを大きく出したい方

・次の配信日を視聴者に見せておきたい方

万が一素材に不備がありましたらメッセージまでお願いします。

不具合・ご要望は BOOTH のメッセージからどうぞ。