【OBS】配信用シンプルストップウォッチ「SIMPLE STOPWATCH」【耐久・タイム計測/HTML】

OBSのカスタムブラウザドックに入れる事が出来るシンプルなストップウォッチです。ブラウザソースとしても読み込む事が出来るので、経過時間の表示にも使用できます。

=========================

■ 2025/06/13 ファイル追加しました

=========================

長時間対応版として、12時間以上が表示出来るエクストラバージョンを追加しました。テスト機能付です。テストボタンを表示するには、右上の歯車を押してください。リロードしても値を保存するようにしました。

OBS内への設定方法

OBSのメニューの中にある、「ドック」の中のカスタムブラウザドックを開きます。

ドック名は自由に指定してもらい、URLの項目にファイルのパスを入力します。

フロートパネルになるので、好きな場所に設置してください。

■ ファイルパスの取得方法

ファイルパスは、Windowsの場合、ファイルをシフトキーを押しながら右クリックすると「パスのコピー」の項目が増えているので、クリックすると、ファイルパスがコピーされますので、そのファイルから前後の[ " ]マークを削除してURLの箇所にいれてください。

配信画面へ表示する場合

通常のソースと同様に、[ stopwatch.html ]をOBSへドラッグ＆ドロップしてください。

表示された後にサイズ調整をしてください。フォントサイズは横幅に合わせて可変します。

■ 操作方法

ストップウォッチは[ 対話 (操作) ]をクリックすると操作出来るようになります。

■ カラーを変更する

カスタムCSSで下記の色の変更が可能です。

--background_color (バックグラウンドの色)

--main_color (メインのカラー)

--timer_color (タイマーの文字の色)

--disabled_color (無効時の色[変更しなくて良いと思います])

デフォルト設定

:root {

--background_color: #2B2E38;

--main_color: #FFAD31;

--timer_color: #ffffff;

--disabled_color: #666;

}

その他の素材もチェックしてね！

VTuberさん向け雑談配信画面用素材セット「Calm chatter」BGM付

https://kentax.booth.pm/items/4449291

VTuberさん向けスティンガーセット「CYBER STINGER vol.01」シーン切替え映像

https://kentax.booth.pm/items/4545340

有償でオリジナル配信画面制作受付中

あなただけの配信画面をまとめて作成します

ココナラで受付中！1点でもOKです。ココナラにてご相談ください。

https://coconala.com/services/2557386

有償でオリジナルスティンガー制作受付中

ココナラであなただけのスティンガー制作を受付中！ネームロゴや立ち絵などをご提供いただければあなた専用スティンガーが作れます！

詳しくは下記にて。

https://coconala.com/services/2682934

有償でオリジナル配信画面制作受付中

あなただけの配信画面をまとめて作成します

ココナラで受付中！1点でもOKです。ココナラにてご相談ください。

https://coconala.com/services/2557386

有償でオリジナルスティンガー制作受付中

ココナラであなただけのスティンガー制作を受付中！ネームロゴや立ち絵などをご提供いただければあなた専用スティンガーが作れます！

詳しくは下記にて。

https://coconala.com/services/2682934