Clock | ももちょこの素材部屋

使い方

0. OBSで配信をしている方は下記のリンクをコピーしてブラウザソースのURLの項目に貼り付ける

↓リンクはこちら↓
https://www.momochoco.net/app/clock/clockLink.html

1. 表示項目のタブから表示するものを選択する

2. フォントのタブからフォントを選択する
※漢字や太さが対応してないものもあります

3. デザインのタブからデザインをカスタマイズする

4. カスタムCSSのタブからカスタムCSSを生成してコピーをする

5. ブラウザソースのカスタムCSSの項目に貼り付ける

※設定が面倒くさい方はデザインした上の時計をそのままキャプチャーしてもらってもかまいません

表示項目

Year Month Day

大きさ

間隔

/ /

大きさ

間隔

Week:Japanese Week:English

大きさ

間隔

曜日

大きさ

間隔

Hour Minute Second

大きさ

間隔

: :

大きさ

間隔

フォント

※漢字や太さが対応してないものもあります。

太さ

500

Hachi Maru Pop Yusei Magic Noto Serif JP

M PLUS Rounded 1c Monomaniac One Dela Gothic One

Kaisei Decol Zen Kurenaido Mochiy Pop One

RocknRoll One DotGothic16 Aoboshi One

デザイン

文字

色

文字の影

上下

左右

ぼかし

色

背景

色

背景の大きさ

上

下

左

右

境界線

非表示実線粗い点点線

2重線谷線山線内線外線

太さ

丸角

色

背景の影

上下

左右

ぼかし

広さ

色

カスタムCSS

↓生成＆コピーしてブラウザソースのカスタムCSSの項目に貼り付ける↓
生成コピー

↓URLがまだの方は↓

↓リンクをコピーしてブラウザソースのURLの項目に貼り付ける↓
https://www.momochoco.net/app/clock/clockLink.html

プリセット

シンプル

.clockArea{ width:fit-content; padding: 0px 10px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 0px none rgb(0, 0, 0); border-radius: 10px; box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; font-weight: 900; font-family: "M PLUS Rounded 1c"; } .flex{ display:flex; justify-content:center; align-items:baseline; } #nowYear{ display: none; margin: 0px; font-size: 32px; } #nowMonth{ display: block; margin: 0px; font-size: 32px; } #nowDay{ display: block; margin: 0px; font-size: 32px; } #s1{ display: none; margin: 0px; font-size: 32px; } #s2{ display: block; margin: 0px; font-size: 32px; } #nowWeekJP{ display: none; margin: 0px 0px 0px 10px; font-size: 32px; } #yobi{ display: none; margin: 0px; font-size: 16px; } #nowWeekENG{ display: block; margin: 0px 0px 0px 10px; font-size: 32px; } #nowHour{ display: block; margin: 0px; font-size: 32px; } #nowMin{ display: block; margin: 0px; font-size: 32px; } #nowSec{ display: block; margin: 0px; font-size: 32px; } #c1{ display: block; margin: 0px 3px; font-size: 32px; } #c2{ display: block; margin: 0px 3px; font-size: 32px; }
コピー

Created By ももちょこ

かわいい

.clockArea{ width:fit-content; padding: 0px 9px 7px 10px; color: rgb(255, 255, 255); background-color: rgb(255, 195, 195); border: 5px dashed rgb(255, 234, 234); border-radius: 10px; box-shadow: rgb(255, 195, 195) 0px 0px 0px 10px; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; font-weight: 900; font-family: "Hachi Maru Pop"; } .flex{ display:flex; justify-content:center; align-items:baseline; } #nowYear{ display: none; margin: 0px; font-size: 32px; } #nowMonth{ display: block; margin: 0px; font-size: 32px; } #nowDay{ display: block; margin: 0px; font-size: 32px; } #s1{ display: none; margin: 0px; font-size: 32px; } #s2{ display: block; margin: 0px; font-size: 32px; } #nowWeekJP{ display: none; margin: 0px 0px 0px 10px; font-size: 32px; } #yobi{ display: none; margin: 0px; font-size: 16px; } #nowWeekENG{ display: block; margin: 0px 0px 0px 10px; font-size: 32px; } #nowHour{ display: block; margin: 0px; font-size: 32px; } #nowMin{ display: block; margin: 0px; font-size: 32px; } #nowSec{ display: block; margin: 0px; font-size: 32px; } #c1{ display: block; margin: 0px 3px; font-size: 32px; } #c2{ display: block; margin: 0px 3px; font-size: 32px; }
コピー

Created By ももちょこ

ネオン

.clockArea{ width:fit-content; padding: 0px; color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0); border: 0px none rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(255, 0, 0) 0px 0px 0px 0px; text-shadow: rgb(0, 0, 255) 0px 0px 10px; font-weight: 500; font-family: "Monomaniac One"; } .flex{ display:flex; justify-content:center; align-items:baseline; } #nowYear{ display: none; margin: 0px; font-size: 50px; } #nowMonth{ display: none; margin: 0px; font-size: 50px; } #nowDay{ display: none; margin: 0px; font-size: 50px; } #s1{ display: none; margin: 0px; font-size: 16px; } #s2{ display: none; margin: 0px; font-size: 16px; } #nowWeekJP{ display: none; margin: 0px; font-size: 16px; } #yobi{ display: none; margin: 0px; font-size: 16px; } #nowWeekENG{ display: none; margin: 0px; font-size: 16px; } #nowHour{ display: block; margin: 0px; font-size: 32px; } #nowMin{ display: block; margin: 0px; font-size: 32px; } #nowSec{ display: block; margin: 0px; font-size: 32px; } #c1{ display: block; margin: 0px; font-size: 32px; } #c2{ display: block; margin: 0px; font-size: 32px; }
コピー

Created By ももちょこ

クリスマス

.clockArea{ width:fit-content; padding: 0px 10px 3px; color: rgb(255, 255, 255); background-color: rgb(252, 41, 71); border: 2px dashed rgb(255, 234, 32); border-radius: 10px; box-shadow: rgb(55, 146, 55) 0px 0px 0px 10px; text-shadow: rgb(0, 0, 0) 3px 3px 0px; font-weight: 900; font-family: "Kaisei Decol"; } .flex{ display:flex; justify-content:center; align-items:baseline; } #nowYear{ display: none; margin: 0px; font-size: 32px; } #nowMonth{ display: block; margin: 0px; font-size: 32px; } #nowDay{ display: block; margin: 0px; font-size: 32px; } #s1{ display: none; margin: 0px; font-size: 32px; } #s2{ display: block; margin: 0px; font-size: 32px; } #nowWeekJP{ display: none; margin: 0px 0px 0px 10px; font-size: 32px; } #yobi{ display: none; margin: 0px; font-size: 16px; } #nowWeekENG{ display: block; margin: 0px 0px 0px 10px; font-size: 32px; } #nowHour{ display: block; margin: 0px; font-size: 32px; } #nowMin{ display: block; margin: 0px; font-size: 32px; } #nowSec{ display: block; margin: 0px; font-size: 32px; } #c1{ display: block; margin: 0px 5px; font-size: 32px; } #c2{ display: block; margin: 0px 5px; font-size: 32px; }
コピー

Created By ももちょこ

プリセット登録して欲しいデザインができたら連絡してください！
可能な限り対応します！

連絡はX(Twitter)のDMかたまにツイートするのでリプまでお願いします