OBS配信用の手書き風デジタル時計オーバーレイです。 OBSに読み込むだけですぐに使えます。プラグインのインストールは不要です。 ◆ 手書き「フォント」ではありません この時計は、手書き風のフォントを表示しているのではありません。 数字を構成する7セグメントの一画ずつを、手描きのストロークとして描いています。 しかも0.18秒ごとに引き直しているので、時刻が変わらない間も線が揺れ続けます。 同じ「20:45」でも、1秒前と1秒後では線のかたちが違います。 配信画面の中で、時計だけがずっと生きているように見えます。 ◆ 秒あり／秒なし、どちらも入っています 「秒が動くのが気になる」「時間と分だけでいい」という方のために、 秒を出さない版（時：分の4桁）を全種類ぶん用意しました。 秒なし版も、線が0.18秒ごとに引き直されるのは同じです。 数字が変わらない間もずっと揺れ続けるので、止まって見えることはありません。 ◆ 特徴 ・数字の線を0.18秒ごとに描き直す、常時アニメーション ・画材6種（マーカー／クレヨン／鉛筆／チョーク／筆ペン／ボールペン） 　それぞれ、かすれ・粒・にじみ・線の抑揚を作り分けています ・秒あり版（時：分：秒）と秒なし版（時：分）の両方を収録 ・背景あり版と背景なし（透過）版の両方を収録 ・背景なし版は線に縁取りを入れてあり、明るい画面でも暗い画面でも読めます ・日付あり版と日付なし版の両方を収録 ・インターネット接続が無くても時計は表示されます 　（日付あり版は、接続が無いと日付の書体だけPCの書体になります） ・CSS変数で色・線の太さ・揺れ方を変更可能 ・48種すべて 500×120px のワイド型 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 収録内容（48種） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 画材6種 × 背景あり／なし × 日付あり／なし × 秒あり／なし ＝ 48フォルダ フォルダ名の読み方 <画材>_<bg か nobg>[_nodate][_nosec] bg 紙・黒板などの背景あり nobg 背景なし（透過） nodate 日付を出さない（時計だけ） nosec 秒を出さない（時と分だけ） 例）marker_nobg_nodate_nosec マーカー ／ 背景なし ／ 日付なし ／ 時と分だけ ■ マーカー（黒）── 太い主線に薄い重ね線。インクの厚みが出るタイプ 　　　　　　　　　　背景あり版は紙の地色 ■ クレヨン（赤）── 蝋が紙目に乗るザラつき。粒が線に沿って乗ります 　　　　　　　　　　背景あり版は画用紙の地色 ■ 鉛筆（グレー）── 細く薄い線と二度書きの重なり。芯の粉っぽさ 　　　　　　　　　　背景あり版は紙の地色 ■ チョーク（白）── 粉のかすれ。背景あり版は黒板になります ■ 筆ペン（黒）── 線の太細に抑揚。始点が太く終点が細くなります 　　　　　　　　　背景あり版は和紙風の地色 ■ ボールペン（青）── 細く均一な線。背景あり版はノートの罫線が入ります ※ 上の6種それぞれに、bg／nobg・日付あり／nodate・秒あり／nosec の 　 組み合わせで8通りずつ入っています（6 × 8 ＝ 48種）。 　 お好みのフォルダを1つ選んで使います。CSSを書き換える必要はありません。 　 48種すべてのフォルダ名は、同梱の README.txt と preview.html で確認できます。 このほかに、48種を1ページで見比べられる preview.html、README.txt、 LICENSE.txt が入っています。preview.html はインターネット接続なしで開けます。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 使い方 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OBSの「ブラウザソース」という機能を使います。 ブラウザソースは、HTMLファイルを配信画面に表示する機能です。 1. ダウンロードしたZIPファイルを解凍します。 （解凍せずにZIPの中を直接開くと、preview.html が正しく動きません） 2. 同梱の preview.html をブラウザで開いて、48種を見比べます。 気に入ったデザインのフォルダ名を控えてください。 （例：黒いマーカーで背景なし・秒なしなら「marker_nobg_nosec」） 3. OBS Studioを開き、「ソース」欄の「＋」ボタンを押します。 4. 一覧から「ブラウザ」を選び、名前を付けて「OK」を押します。 5. 設定画面で以下のように設定します： ・「ローカルファイル」にチェックを入れる ・「参照」ボタンを押して、選んだフォルダの中にある index.html というファイルを選択する ・「幅」を 500、「高さ」を 120 にする ・「表示されていないときにソースをシャットダウン」のチェックを外す 6. 「OK」を押すと時計が表示されます。 ドラッグで好きな位置に移動できます。 ◆ うまく表示されないときは ・時計が出ない → index.html のファイルパスが正しいか確認してください。 フォルダごと移動・コピーして使ってください。 ・preview.html を開いても時計が出ない → ZIPを解凍してから開いてください。 ・シーン切替のたびに時計がリセットされる → ブラウザソースのプロパティで 「表示されていないときにソースをシャットダウン」のチェックを 外してください。 ・日付の書体が違う → 日付の書体はGoogle Fontsから読み込んでいます。オフラインのときは PCにある書体で表示されます（時計そのものは変わりません）。 日付なし（_nodate）のフォルダは外部の読み込みが無いので、 オフラインでも見た目が変わりません。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 色や線を変えたい場合（上級者向け） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 各フォルダの style.css をテキストエディタで開くと、先頭の :root{ } の中に 設定が並んでいます。値を書き換えるだけで変更できます。 以下は marker_nobg（マーカー・背景なし）の値です。数値はフォルダごとに違います。 --ink:#141414 ← 線の色 --ink-opacity:.95 ← 線の濃さ（0.0〜1.0） --stroke-w:9 ← 線の太さ --outline:#FBF9F5 ← 縁取りの色 --outline-w:4 ← 縁取りの太さ（0 で縁取りなし） --wobble-ms:180 ← 線を引き直す間隔（ミリ秒） --wobble-corner:2.2 ← 角の揺れの大きさ --wobble-bend:5 ← 線のたわみの大きさ --wobble-rot:1.6 ← 数字全体の傾きの揺れ 日付ありのフォルダには --date-color / --date-size もあります。 秒なし（_nosec）のフォルダには --show-seconds:0 が入っています。 1 に変えると秒あり（6桁）に戻ります。 また、線のふちに紙目のギザつきを足す表示を用意しています（既定はオフ）。 style.css の --paper-filter を 0 から 1 に変えると有効になります。 鉛筆・ボールペン・マーカーのような均一な線に効果が出ます。 ※ style.css は改行なしの1行で書いてあります。エディタの折り返しを有効にするか、 　 検索機能で設定名を探してください。 ※ 編集前にファイルのバックアップを取ることをおすすめします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 注意事項 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ・本商品はデジタルデータ（HTML + CSS ファイル）です。動画・画像は含みません。 ・時刻はPCの時計を自動取得して表示します（24時間表記）。 ・秒なし版は時と分だけを表示します。数字の大きさは秒あり版と同じで、 　4桁が 500×120px の中央に並びます。 ・日付は「2026年8月4日(火)」の形式で表示します。 ・日付あり版は日付の書体だけ Google Fonts から読み込みます。読み込めない環境でも 　時計は表示されます（日付がPCの書体になるだけです）。 　日付なし版は外部の読み込みが無いため、オフラインでも見た目が変わりません。 ・OBS Studio / Streamlabs OBS で動作します。 ・配信・アーカイブ・切り抜き・収益化での利用は、個人・法人を問わず可能です。 　クレジット表記は不要です。改変も自由です。 ・ファイルそのものの再配布・転売・共有はできません。 　時計部分を画像や動画として書き出して素材配布・販売することもできません。 ・詳しいご利用条件は、同梱の LICENSE.txt に記載しています。