このページのアドレスをOBSのブラウザソースURLに貼り付けるだけ
デフォルトの800x600では左右が切れるので、800x400ぐらいがおすすめです
この説明文はOBS上では表示されないはず
カスタム変数を利用したカスタムCSSに対応しています
各値を指定するだけで各種計算等は自動で行われます
何種類か作ってみたのでこちらをOBSブラウザソース設定画面中のカスタムCSS欄にコピペしてみてね
気に入ったものをベースにお好みで調整してください
/* シンプル */
:root {
/*
背景色、発光色、通常色の設定
transparent:透過
#fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
rgb(255,0,0)、rgba(255,0,0,128):RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
*/
--background-color: transparent;
--drum-color: #3e4149;
--font-color: #ffffff;
--font: 'Bebas Neue'; /* Bebas Neue , BenchNine, Changa One, Stardos Stencil */
--frame-emboss: 10px; /* フレームのエンボスサイズ */
--frame-radius: 20px; /* フレームの角丸 */
--easing: 0.1; /* ドラム回転時間 0~0.5 */
--easing-function: ease-in-out /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}
/* レトロ */
:root {
/*
背景色、発光色、通常色の設定
transparent:透過
#fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
rgb(255,0,0)、rgba(255,0,0,128):RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
*/
--background-color: transparent;
--drum-color: #e7e1c5;
--font-color: #463429;
--font: 'BenchNine'; /* Bebas Neue , BenchNine, Changa One, Stardos Stencil */
--frame-emboss: 10px; /* フレームのエンボスサイズ */
--frame-radius: 40px; /* フレームの角丸 */
--easing: 0.5; /* ドラム回転時間 0~0.5 */
--easing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}
/* ポップ */
:root {
/*
背景色、発光色、通常色の設定
transparent:透過
#fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
rgb(255,0,0)、rgba(255,0,0,128):RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
*/
--background-color: transparent;
--drum-color: #ffffff;
--font-color: #f87902;
--font: 'Changa One'; /* Bebas Neue , BenchNine, Changa One , Stardos Stencil*/
--frame-emboss: 0; /* フレームのエンボスサイズ */
--frame-radius: 25px; /* フレームの角丸 */
--easing: 0.5; /* ドラム回転時間 0~0.5 */
--easing-function: cubic-bezier(0.68, 1.95, 0.01, 0.6) /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}
/* ステンシル */
:root {
/*
背景色、発光色、通常色の設定
transparent:透過
#fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
rgb(255,0,0)、rgba(255,0,0,128):RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
*/
--background-color: transparent;
--drum-color: #2e3623;
--font-color: #ffffff;
--font: 'Stardos Stencil'; /* Bebas Neue , BenchNine, Changa One, Stardos Stencil */
--frame-emboss: 2px; /* フレームのエンボスサイズ */
--frame-radius: 20px; /* フレームの角丸 */
--easing: 0.5; /* ドラム回転時間 0~0.5 */
--easing-function: steps(6, end) /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}
URLパラメータ「timezone」としてタイムゾーンを入力することで現地時間を表示することが出来ます。
https://nmnm.mn/youtube/drumclock.html?timezone=UTCとすると、UTCでの時間になります。
https://nmnm.mn/youtube/drumclock.html?timezone=Japanで日本時間になりますが、パラメータのない配布URL(https://nmnm.mn/youtube/drumclock.html)のように、パラメータが存在しない場合には自動的に「Japan」を入れるようにしていますので、日本時間で使用する場合はパラメータの指定は必要ありません。
任意の地域での時間を表示したい場合はList of tz database time zones(Wikipedia)のTZ database nameを参考にしてください。
例えばニューヨークの時間を表示したい場合は、https://nmnm.mn/youtube/drumclock.html?timezone=America/New_Yorkとなります