ステータスバッジの使い方は？
1. 基本設定：勤務タイムゾーン、勤務時間、稼働日を設定します。
2. ステータス文言：稼働中 / 休憩中の表示文字をカスタマイズします。
3. コードをコピー：README には Markdown スニペット、Webサイトやメール署名には HTML 画像スニペットを使用します。
埋め込みバッジジェネレーター
埋め込みステータスバッジ
基本設定
外観・スタイル
祝日の除外
リアルタイムプレビュー
プレビューは選択した日付のバッジをシミュレートします。週末や祝日に切り替えると休憩状態を確認できます。
ライト背景
ダーク背景
[](http://localhost/)
<a href="http://localhost/"><img src="http://localhost/api/badge.svg?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=%E5%8B%A4%E5%8B%99%E4%B8%AD&unavailableText=%E4%BC%91%E6%86%A9%E4%B8%AD&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&style=flat" alt="勤務中" height="20"></a>
ライブプレビュー
img タグが使える場所ならどこでも表示でき、CSP frame-src の設定は不要です。バッジは国ページへのリンクで包まれています。SVG はキャッシュされます（CDN で約5分、GitHub の camo では数時間）。自サイトで分単位のリアルタイム更新が必要な場合は、下の iframe スニペットをご利用ください。
<iframe src="http://localhost/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=%E5%8B%A4%E5%8B%99%E4%B8%AD&unavailableText=%E4%BC%91%E6%86%A9%E4%B8%AD&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff" width="320" height="60" frameborder="0" style="border: none; background: transparent;"></iframe>
使用手順
- 勤務タイムゾーン、勤務時間、稼働日、ステータス文言を設定します。
- Markdown スニペットを GitHub / npm の README に貼り付けます。
- HTML バッジスニペット（リンク付き画像）を Webサイトやメール署名に貼り付けます。
- ステータスは CDN キャッシュにより約5分ごとに自動更新されます。
Frequently Asked Questions
バッジの特徴は？
リアルタイム表示：設定した勤務時間に応じて「稼働中」/「休憩中」を自動表示します。
軽量：JavaScript を含まない静的 SVG 画像 1 枚だけです。
祝日判定：祝日インポートに対応し、祝日は自動的に休憩表示になります。
プレビュー：タイムゾーンと日付をシミュレートして祝日・週末の表示を確認できます。
バッジはどこで使えますか？
GitHub / npm README：Markdown スニペットを貼り付けます。
Webサイト・ブログ：HTML 画像スニペットを貼り付けます。
メール署名：リモート画像が許可された環境で HTML 画像スニペットを使用します。
注意：GitHub の画像プロキシ（camo）はバッジを数時間キャッシュする場合があります。
技術的な特徴は？
クロスドメイン：普通の画像なのでどんなサイトでも埋め込めます。
ゼロ依存：純粋な SVG で、ホストページに JavaScript は不要です。
CDN キャッシュ：キャッシュヘッダーにより約5分ごとに更新。
SEO フレンドリー：検索エンジンのクロールに影響しません。
HTTPS：完全対応。
何をカスタマイズできますか？
時間設定：勤務時間、タイムゾーン、稼働日、祝日。
文言：稼働中と休憩中の表示文字。
色：両ステータスの背景色と文字色。
形状：フラット・角丸なし・カプセル。