Skip to content

dottokei manual

Jump to bottom
bookii edited this page Mar 19, 2026 · 7 revisions

dottokei 使用マニュアル

dottokei-booth

ダウンロード方法

BOOTH にて配布しています。
https://mizznoff.booth.pm/items/8099799

ダウンロードできる zip ファイルには以下の 5 つのファイルが同梱されています。
これらのファイルは必ず同じフォルダに入れたままにしてください。

  • dottokei-standard.html: 日時が縦に並んだ時計
  • dottokei-slim.html: 日時が横に並んだ時計
  • style.css: 時計の見た目を定義したファイル
  • MeltingDot-Regular.otf: 時計に使用しているフォントファイル
  • README.txt: 本ページへのリンクを記載したテキストファイル

OBS への導入手順

OBS のソース追加ボタン + から「ブラウザ」を選択してください。
以下のようなウインドウが開いたら「ローカルファイル」にチェックを入れ、使用したい html ファイルを選択してください。

スクリーンショット 2026-03-19 0 18 01

時計のアスペクト比は

  • dottokei-standard.html: 8:5
  • dottokei-slim.html: 4:1

となっているので、それに合わせて幅と高さを指定してください（と言いつつ、高さがそれより大きい分には問題ありません）。

ちなみにオススメの設定は

  • dottokei-standard.html: 幅 200, 高さ 125
  • dottokei-slim.html: 幅 240, 高さ 60

です。

見た目の変更方法

html ファイルと同じフォルダにある style.css を編集することで、見た目の変更が可能です。
ファイルは以下のようになっています。

:root {
  /* 文字と外枠のカラーコード */
  --foreground-color: #7a8999;

  /* 背景色のカラーコード */
  --background-color: #ffffff;

  /* コロンの点滅の有無 (0: 点滅なし, 1: 点滅あり) */
  --colon-blink-enabled: 1;
}

文字と外枠の色を変更したい場合は #7a8999 の部分、背景色を変更したい場合は #ffffff の部分を変更してください。
また、配布時の仕様では時刻表記の : が点滅しますが、これを無効にしたい場合は 1 の部分を 0 に書き換えてください。

📢 注意

css ファイルの変更を OBS 側に反映するためには、OBS 側でブラウザソースの「再読み込み」が必要な場合があります。

同梱されているフォントファイル MeltingDot-Regular.otf について

dottokei に使用しているフォント Melting Dot は、dottokei のために新たに制作したフォントです。
このフォントは SIL Open Font License に準拠しており、ざっくり言うと自由に使って OK です（ただしいくつかの条件つき）。

dottokei 以外の用途に向けての調整はしていないので単体での配布予定はありませんが、フォント単体での使用も大歓迎です。

SIL Open Font License について詳しく知りたい方は、たぬきフォント様の分かりやすい記事をご覧ください。
https://tanukifont.com/sil/

Clone this wiki locally