配信ツール：ストリーミング時計

背景透過済みで、ゲーム画面や雑談画面にそのまま重ねて使用できるデジタル時計です。色・フォント・スタイルをカスタマイズして、OBSのブラウザソースとして利用できます。

使い方

下の設定項目で色・フォント・スタイルをカスタマイズします
「コピー」ボタンでURLをクリップボードに保存します
OBSの「ソース」→「ブラウザ」を追加してURLを貼り付けます
サイズを設定（縦並び：幅800/高450、横並び：幅1200/高300）
OBS上で角をドラッグして好きなサイズに縮小して配置します

館長のアドバイス
「大きめのサイズで読み込んで縮小すると文字の輪郭がより滑らかになるよ！OBSの画面に重ねて配信をおしゃれに演出しよう🕐」

1. クッキリ縁取り

#clock-container {
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

2. ネオン発光

#clock-container {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    filter: brightness(1.2);
}

3. ゆめかわ二重縁

#clock-container {
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 6px 10px rgba(0,0,0,0.2);
}

4. 3D立体（横並び）

#clock-box { display: flex; align-items: center; gap: 20px; }
#date-area { margin-bottom: 0; }
#date-area, #clock-container {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c5c5c5, 0 5px 10px rgba(0,0,0,0.3);
}

5. スマートボーダー（横並び）

#clock-box {
    display: flex; align-items: center; gap: 20px;
    border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
    padding: 10px 40px;
}
#date-area { margin-bottom: 0; }

6. デジタル・ドット風

#clock-container {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
}

7. エレガント（横並び）

#clock-box { display: flex; align-items: center; gap: 30px; }
#date-area { margin-bottom: 0; }
#date-area, #clock-container {
    font-weight: 200; letter-spacing: 0.2em; filter: opacity(0.8);
}

8. 蛍光マーカー風

#clock-container {
    background: linear-gradient(transparent 70%, rgba(255,255,255,0.3) 70%);
    display: inline-block;
}

9. 病みかわノイズ

#clock-container {
    text-shadow: 4px 4px 0 rgba(0,0,0,0.8);
    font-style: italic;
}

10. 角丸フレーム

#clock-container {
    background: rgba(0,0,0,0.2);
    border-radius: 20px;
    padding: 10px 40px;
    backdrop-filter: blur(4px);
}

11. グラデ透過（横並び）

#clock-box {
    display: flex; align-items: center; gap: 20px;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, rgba(0,0,0,0.5) 100%);
}
#date-area { margin-bottom: 0; }

12. ゆるふわ斜め

#clock-container {
    font-family: "Yu Gothic UI", sans-serif;
    transform: rotate(-2deg);
}

他のゲームを探す

タイトル
ゲーム機
メーカー	入力した文字を含む全メーカーで検索します。下の select から選ぶと完全一致検索になります。
ジャンル
発売年
発売月

タイトル

ゲーム機

メーカー

入力した文字を含む全メーカーで検索します。下の select から選ぶと完全一致検索になります。

ジャンル

発売年

発売月

🕐 ストリーミング時計

使い方