配信画面のすみっこに置ける、猫モチーフの時計オーバーレイです。 OBSのブラウザソースにHTMLファイルを読み込むだけで使えます。 猫がまばたきしたり、耳をぴくっと動かしたり、時々ひょこっと潜ったり出てきたりします。 表情は、ノーマル・にっこり・びっくり・すやすやの4種類。 時計は「時間・分・秒」を表示します。 収録内容： ・OBS用HTMLファイル ・猫時計オーバーレイ ・まばたきアニメーション ・耳ぴくアニメーション ・ひょこっと出入りするアニメーション ・表情差分 　ノーマル 　にっこり 　びっくり 　すやすや 　（出入りするたびに表情が変わります） ・時計表示 ・日付表示 ・透過背景対応 使い方： OBSを開きます。 ソース追加から「ブラウザ」を選びます。 「ローカルファイル」にチェックを入れます。 付属のHTMLファイルを選択します。 サイズや位置を調整して使用してください。 おすすめ設定： 幅：700px 高さ：360px 配信画面の右下・左下・待機画面の装飾として使いやすいサイズです。 注意事項： ・OBS Studioでの使用を想定しています。 ・HTML / CSS / JavaScriptで動作します。 ・環境によってフォントや表示位置が少し変わる場合があります。 ・二次配布、自作発言、再販売は禁止です。 ・配信や動画での使用は可能です。 ・クレジット表記は必要ありません。 短めの商品説明版： OBSのブラウザソースで使える、動く猫時計オーバーレイです。 まばたき、耳ぴく、ひょこっと出入りする動き、4種類の表情差分つき。 雑談配信・作業配信・ゲーム配信・待機画面などに置きやすい、かわいい猫モチーフの時計素材です。 CSSで色を変える場所： 色を変える場合は、HTMLファイル上部の :root 内を編集します。ファイル内にも「variables below to adjust size, colors, and spacing」とあり、サイズ・色・余白をここで調整する構造になっています。 主に触る場所はここです。 :root { --rabbit-white: #494149; --rabbit-shadow: #2e2730; --rabbit-line: #231d22; --rabbit-blush: #d996ab; --ear-inner: #c78fa4; --panel-bg: rgba(42, 44, 52, 0.97); --panel-border: rgba(96, 100, 116, 0.95); --time-window: rgba(76, 81, 98, 0.96); --time-window-soft: rgba(98, 104, 122, 0.86); --accent-pink: #9f8eaf; --accent-cream: #3a3c46; --text-brown: #f2eef6; --soft-brown: #d6cfdf; } それぞれの意味は以下です。 --rabbit-white 猫本体のメインカラーです。黒猫なら黒系、白猫なら白系、三毛猫なら薄いクリーム系にします。 --rabbit-line 猫の輪郭線、目、口などに使われる色です。黒猫の場合はかなり濃い色、白猫の場合は茶色系にすると自然です。 --rabbit-blush ほっぺや口内のピンク系の色です。猫の表情のかわいさに関わるので、少し明るめがおすすめです。 --ear-inner 耳の内側の色です。ピンク、紫寄り、ベージュ寄りなどにできます。 --panel-bg 時計枠全体の背景色です。今回の黒系フレームではここを暗いグレー系にしています。 --panel-border 時計枠の外枠の色です。枠の印象をかなり左右します。 --time-window 時刻が表示される内側の窓の色です。 --text-brown 時刻の文字色です。黒系フレームなら白〜薄紫、明るいフレームなら茶色系が見やすいです。 --soft-brown 日付の文字色です。時刻より少し控えめな色にするとまとまります。 販売ページに載せるなら、色変更についてはこのくらい短くしてもよいです。 色を変更したい場合は、HTMLファイル上部の :root 内にあるカラー変数を編集してください。 猫の色は --rabbit-white、輪郭や目の色は --rabbit-line、時計枠は --panel-bg と --panel-border、時刻の文字色は --text-brown で変更できます。 何か問題があった場合、ご連絡ください