【OBS】デジタル時計ウィジェット【24通り / 色改変可能 / フォント11書体同梱】HTML Digital Clock 配信用 カスタムCSS不要 背景透過

配信画面に置ける、デジタル時計のウィジェットです。

OBSの「ブラウザ」ソースに index.html を指定するだけで使えます。

わんコメなど、他のソフトへの接続は必要ありません。

用意された色から選ぶだけの時計ではありません。

同梱の設定パネルで、色も、フォントも、表示する項目も、置き方も、自分で決められます。

CSSやHTMLを書き換える必要はありません。

■ テーマ8種 × 配色3種 = 24通り

夜空 / 陽だまり / ネオン / 木目 / 水晶 / レトロLCD / 墨 / ターミナル

それぞれに3つの配色があり、組み合わせて24通りから選べます。

どれも色を変えただけのものではなく、背景・枠・文字の質感を個別に作っています。

■ 背景を透過できます

カードの背景・枠線・影を消して、数字などの文字だけを表示できます。

配信の映像や立ち絵の上に、そのまま重ねられます。

透過したときは、どんな背景の上でも文字が読めるように、

テーマ本来の背景色が文字の縁取りとして自動的に付きます。

■ 色を自分で変えられます

・本体の数字（時・分）の色

・副次テキスト（年・日付・曜日・秒・午前/午後）の色

・縁取りの色

・縁取りの太さ（0.25〜4倍）

指定しなかった項目はテーマ本来の色のままです。

「配信の色に合わせたいけど、用意された配色だと少し違う」を埋められます。

■ 表示する項目を選べます

年 … 表示ON/OFF。西暦のほか、独自の年号を自由な文字列で組み立てられます

例）「配信歴3年（西暦2026年）」のような表示も作れます

日付 … 9月7日 / 09/07 / 2026-09-07

曜日 … 月曜日 / 月 / Mon

時刻 … 12時間表示（午前・午後）／ 秒の表示ON/OFF ／ 区切り記号の点滅 ／

時のゼロ埋め ／ 区切り記号の変更（: ： . など）

■ 置き方も選べます

位置 … 画面内9か所

文字サイズ … 小 / 中 / 大

向き … 横向き / 縦向き

フォント … 11書体を同梱（下記）。PCに入っているフォントも選べます

テーマごとの既定フォントにおまかせにもできます

■ フォント11書体を同梱（インストール不要）

配信画面の雰囲気を大きく変えられるよう、Windowsに標準で入っていない書体を同梱しました。

設定パネルの一覧からそのまま選べます。買った人が別途インストールする必要はありません。

DotGothic16 ドット絵。レトロLCDテーマと合わせると往年のデジタル時計に

Dela Gothic One 極太。数字を主役にしたいとき

Reggae One 立体的で目を引く

Train One ステンシル調

Stick 細い直線で構成された軽い印象

RocknRoll One カジュアル

Zen Maru Gothic 丸ゴシック。やわらかい配信画面に

Yusei Magic 手書きのマーカー風

Yomogi 手書き

Hachi Maru Pop かわいい手書き

Zen Antique レトロな明朝

もちろん、お使いのPCに入っているフォントを指定することもできます。

※ フォントは、はじめは「テーマにおまかせ」になっています。

テーマごとに似合う書体が選ばれ、「レトロLCD」と「ターミナル」には

DotGothic16（ドット絵）が使われます。

自分で選べばどのテーマでもその指定が優先され、

設定パネルの「テーマにおまかせに戻す」でいつでも元に戻せます。

■ 設定は専用パネルで

同梱の panel.html をブラウザで開いて選ぶだけです。プレビューにすぐ反映されます。

Chrome / Edge なら、フォルダを選んでおけば config.js に直接保存できます。

（他のブラウザの場合は config.js をダウンロードして差し替えてください）

■ 導入は3ステップ

1. zipを解凍して、好きな場所に置く（フォルダ名は変えても構いません）

2. panel.html をブラウザで開いて設定する

3. OBSで「ブラウザ」ソースを追加し、URLに index.html のフルパスを

file:/// を付けて指定する

例）file:///C:/streaming/デジタル時計ウィジェット/index.html

※ 設定を変えたあとは、OBSのブラウザソースを右クリック →「更新」してください。

file:// で動作するため、config.js を保存しても自動では反映されません。

■ 同梱物

index.html OBSに指定する本体

panel.html 設定パネル

config.js 設定ファイル

css / js スタイルとスクリプト

fonts/ 同梱フォント11書体（各フォルダにライセンス全文を同梱）

README.txt 説明書

LICENSE.txt ライセンス

※ フォントを含むため、ダウンロードファイルは約20MBあります。

■ 動作環境

OBS Studio のブラウザソース

設定パネルは Chrome / Edge を推奨（フォルダへの直接保存に対応しているため）

インターネット接続・外部サービスへの登録は不要です

■ ライセンス

購入者本人の配信画面、およびその改変版で利用できます。

本商品または改変版を、素材集・テンプレート集として再配布・販売・転売することはできません。

同梱フォント11書体は上記の対象外で、それぞれ SIL Open Font License 1.1 に従います。

各フォントのライセンス全文と著作権表示は fonts/ の各フォルダに同梱しています。