Birthday Checker
- Digital500 JPY
このツールは、クリックで日付を埋めていくだけで進捗が一目でわかるカレンダー型のチェックツールです。OBSに読み込むだけで、残り日数や未達成の日付が自動で表示されます。 耐久配信などの企画の可視化に最適！！ 色も自由に変更できるので、配信画面に合わせたカスタマイズも可能です！ ■ どんなことができるの？ • 365日対応のカレンダー進捗表：1年分のマスを順番に埋められる • クリックで達成マーク：「済み」扱いになり、色が自動で変化 • 残り日数カウンター：「残り○日」でゴールまでの距離をリアルタイム表示 • 進捗スライドバー：未チェック日を自動で右側に流して表示 • 全月コンプリート演出：「COMPLETE!」が点灯して達成感を演出 • リセット確認モーダル：誤操作防止の確認ダイアログ付き • ローカル保存：リロードしても進捗を自動で保持 • テスト機能：「ランダム10個選択」で動作確認や演出調整も簡単
設定方法
■ 1. OBSへの読み込み 展開したフォルダ内のファイル( ktx_tools_birthday_checker.html ) をOBSのブラウザソースにドラッグ＆ドロップ。 または「ソースを追加 → ブラウザ → ローカルファイル指定」から読み込みます。 ■ 2. サイズと配置 ソースをダブルクリック、もしくは右クリックしてプロパティを開き、横幅を調整してください。 ──── 推奨サイズ：横1200 / 縦750 ──── ※下部の管理エリアを消さないようにしてください。 ■ 3. トリミング（クロップ）の方法 配信画面には不要なので管理エリアを以下の手順でトリミングしてください。 ──── a. OBSでソースを選択 b. Altキーを押しながらドラッグ すると、端を切り取ることができます c. 下にある管理エリアを切り取ってください ──── ※トリミング後にサイズを再調整することで、見やすい配置にできます。 ■ 4. 対話画面の表示 読み込んだソースを右クリックすると出るメニュー、またはソース選択時に上部に表示される [ 対話 ] ボタン をクリックしてください。ここから各種日付をクリック、テストやリセットなどを操作できます。 ■ 5. 操作方法 • シングルクリック：達成マーク（ON） • ダブルクリック：取り消し（OFF） • リセット：確認モーダルで全削除
カスタマイズ
色のカスタマイズは、OBSのカスタムCSSに以下のものを追加してください。 ■ 紫 :root { --ktx-main:#c9aaff; /* メインカラー */ --ktx-month-completed-label-color: #c9aaff; /* コンプリートした月のラベルのテキスト色 */ --ktx-completion-indicator-bg: #c9aaff; /* コンプリート表示の背景色 */ --ktx-completion-indicator-color: #fff; /* コンプリート表示のテキスト色 */ --ktx-main-bg: repeating-linear-gradient(135deg, #f0f5fe 5% 10%, #fff 10% 15%, #fdf2ff 15% 20%, #fff 20% 25%); /* メインの背景グラデーション */ --ktx-clicked-color: #f2f2f2; /* クリックされた日付の背景色 */ --ktx-default-button-bg: var(--ktx-main); /* デフォルトボタンの背景色 */ --ktx-default-button-text: #fff; /* デフォルトボタンのテキスト色 */ --ktx-border-color: #e5e7eb; /* ボーダー色 */ --ktx-header-bg: transparent; /* ヘッダーの背景色 */ --ktx-header-text: var(--ktx-main); /* ヘッダーのテキスト色 */ --ktx-tooltip-bg: #aa90d5; /* ツールチップの背景色 */ --ktx-tooltip-text: #ffffff; /* ツールチップのテキスト色 */ --ktx-button-primary-bg: #8b5ed9; /* プライマリボタンの背景色 */ --ktx-button-primary-hover-bg: #8b5ed9; /* プライマリボタンのホバー時の背景色 */ --ktx-button-text-color: #ffffff; /* ボタンのテキスト色 */ --ktx-info-right-bg:#c9aaff;/* スクロールの背景色 */ --ktx-scroll-color:#fff; /* スクロールのテキスト色 */ --ktx-fonts: "Jost", sans-serif; /* 使用するフォントファミリー */ } ■ 青 :root { --ktx-main:#0168b7; /* メインカラー */ --ktx-month-completed-label-color: #0168b7; /* コンプリートした月のラベルのテキスト色 */ --ktx-completion-indicator-bg: #0168b7; /* コンプリート表示の背景色 */ --ktx-completion-indicator-color: #fff; /* コンプリート表示のテキスト色 */ --ktx-main-bg: repeating-linear-gradient(135deg, #d6f2f0 5% 10%, #fff 10% 15%, #eaf7fe 15% 20%, #fff 20% 25%); /* メインの背景グラデーション */ --ktx-clicked-color: #f2f2f2; /* クリックされた日付の背景色 */ --ktx-default-button-bg: var(--ktx-main); /* デフォルトボタンの背景色 */ --ktx-default-button-text: #fff; /* デフォルトボタンのテキスト色 */ --ktx-border-color: #e5e7eb; /* ボーダー色 */ --ktx-header-bg: transparent; /* ヘッダーの背景色 */ --ktx-header-text: var(--ktx-main); /* ヘッダーのテキスト色 */ --ktx-tooltip-bg: #000; /* ツールチップの背景色 */ --ktx-tooltip-text: #ffffff; /* ツールチップのテキスト色 */ --ktx-button-primary-bg: #000; /* プライマリボタンの背景色 */ --ktx-button-primary-hover-bg: #000; /* プライマリボタンのホバー時の背景色 */ --ktx-button-text-color: #ffffff; /* ボタンのテキスト色 */ --ktx-fonts: "Jost", sans-serif; /* 使用するフォントファミリー */ } ■ 赤 :root { --ktx-main: #ff6b6b; /* メインカラー */ --ktx-month-completed-label-color: #ff6b6b; /* コンプリートした月のラベルのテキスト色 */ --ktx-completion-indicator-bg: #ff6b6b; /* コンプリート表示の背景色 */ --ktx-completion-indicator-color: #fff; /* コンプリート表示のテキスト色 */ --ktx-main-bg: repeating-linear-gradient(135deg, #fff0f0 5% 10%, #ffffff 10% 15%, #ffe6e6 15% 20%, #ffffff 20% 25%); /* メインの背景グラデーション */ --ktx-clicked-color: #f9dada; /* クリックされた日付の背景色 */ --ktx-default-button-bg: var(--ktx-main); /* デフォルトボタンの背景色 */ --ktx-default-button-text: #fff; /* デフォルトボタンのテキスト色 */ --ktx-border-color: #e5e7eb; /* ボーダー色 */ --ktx-header-bg: transparent; /* ヘッダーの背景色 */ --ktx-header-text: var(--ktx-main); /* ヘッダーのテキスト色 */ --ktx-tooltip-bg: #e85c5c; /* ツールチップの背景色 */ --ktx-tooltip-text: #ffffff; /* ツールチップのテキスト色 */ --ktx-button-primary-bg: #d94a4a; /* プライマリボタンの背景色 */ --ktx-button-primary-hover-bg: #c93c3c; /* プライマリボタンのホバー時の背景色 */ --ktx-button-text-color: #ffffff; /* ボタンのテキスト色 */ --ktx-info-right-bg:#ff6b6b;/* スクロールの背景色 */ --ktx-scroll-color:#ffffff; /* スクロールのテキスト色 */ --ktx-fonts: "Jost", sans-serif; /* 使用するフォントファミリー */ } ■ 緑 :root { --ktx-main: #66cc99; /* メインカラー */ --ktx-month-completed-label-color: #66cc99; /* コンプリートした月のラベルのテキスト色 */ --ktx-completion-indicator-bg: #66cc99; /* コンプリート表示の背景色 */ --ktx-completion-indicator-color: #ffffff; /* コンプリート表示のテキスト色 */ --ktx-main-bg: repeating-linear-gradient(135deg, #f0fff5 5% 10%, #ffffff 10% 15%, #e6fff0 15% 20%, #ffffff 20% 25%); /* メインの背景グラデーション */ --ktx-clicked-color: #e0f8ea; /* クリックされた日付の背景色 */ --ktx-default-button-bg: var(--ktx-main); /* デフォルトボタンの背景色 */ --ktx-default-button-text: #ffffff; /* デフォルトボタンのテキスト色 */ --ktx-border-color: #e5e7eb; /* ボーダー色 */ --ktx-header-bg: transparent; /* ヘッダーの背景色 */ --ktx-header-text: var(--ktx-main); /* ヘッダーのテキスト色 */ --ktx-tooltip-bg: #55b888; /* ツールチップの背景色 */ --ktx-tooltip-text: #ffffff; /* ツールチップのテキスト色 */ --ktx-button-primary-bg: #4caf82; /* プライマリボタンの背景色 */ --ktx-button-primary-hover-bg: #3e946e; /* プライマリボタンのホバー時の背景色 */ --ktx-button-text-color: #ffffff; /* ボタンのテキスト色 */ --ktx-info-right-bg:#66cc99;/* スクロールの背景色 */ --ktx-scroll-color:#ffffff; /* スクロールのテキスト色 */ --ktx-fonts: "Jost", sans-serif; /* 使用するフォントファミリー */ } ■ 黒 :root { --ktx-main: #ffffff; /* メインカラー */ --ktx-month-completed-label-color: #ffffff; /* コンプリートした月のラベルのテキスト色 */ --ktx-completion-indicator-bg: #333333; /* コンプリート表示の背景色 */ --ktx-completion-indicator-color: #ffffff; /* コンプリート表示のテキスト色 */ --ktx-main-bg: repeating-linear-gradient(135deg, #0d0d0d 5% 10%, #1a1a1a 10% 15%, #121212 15% 20%, #1a1a1a 20% 25%); /* メインの背景グラデーション */ --ktx-clicked-color: #2a2a2a; /* クリックされた日付の背景色 */ --ktx-default-button-bg: #ffffff; /* デフォルトボタンの背景色 */ --ktx-default-button-text: #333333; /* デフォルトボタンのテキスト色 */ --ktx-border-color: #3a3a3a; /* ボーダー色 */ --ktx-header-bg: transparent; /* ヘッダーの背景色 */ --ktx-header-text: #f0f0f0; /* ヘッダーのテキスト色 */ --ktx-tooltip-bg: #cccccc; /* ツールチップの背景色 */ --ktx-tooltip-text: #ffffff; /* ツールチップのテキスト色 */ --ktx-button-primary-bg: #333333; /* プライマリボタンの背景色 */ --ktx-button-primary-hover-bg: #ffffff; /* プライマリボタンのホバー時の背景色 */ --ktx-button-text-color: #ffffff; /* ボタンのテキスト色 */ --ktx-info-right-bg:#333333;/* スクロールの背景色 */ --ktx-scroll-color:#ffffff; /* スクロールのテキスト色 */ --ktx-fonts: "Jost", sans-serif; /* 使用するフォントファミリー */ }
オーダー制作について
本製品は、カスタマイズオーダーおよびフルオーダーに対応しています。 デザインや色味の調整、オリジナル要素の追加など、ご希望に合わせた制作が可能です。 ■ カスタマイズオーダー • 既存デザインをベースに、色や一部要素を変更したい場合にご依頼ください。 • 例：オリジナルの配色に変更したいが、CSSがわからない場合など • 費用：税別 2,000円 • ご依頼方法：XのDM・リプライ、またはお問い合わせフォームより ■ フルオーダー • テキスト・装飾・レイアウトなどをすべてオリジナル仕様で制作します。 • 世界観や配信テーマに合わせた完全新規デザインをご希望の方におすすめです。 • 費用：税別 20,000円～（内容により変動） • ご依頼方法：XのDM・リプライ、またはお問い合わせフォームより
kentax design 全製品共通利用規約
■ ご利用について • 本製品は、個人・法人を問わずご利用いただけます。 • OBS配信・動画制作・ウェブサイト・商用コンテンツなどへの使用も可能です。 ■ クレジット表記について • 製品名・制作者名・リンクなどの明記は不要です。 • 任意でクレジットを記載していただく場合の例は、以下の通りです。 • 例：素材提供：kentax design ■ 禁止事項 以下の行為を禁止いたします。 • 素材やデータの再配布・転売・譲渡 • 自作発言・加工品としての再販売 • 公序良俗に反する、または誹謗中傷・差別的な表現を伴う利用 • 政治的・宗教的な主張・啓発・勧誘などを目的とした利用 • AI学習や自動生成素材への組み込み利用 • 当方が不適切と判断した内容・コンテンツへの使用 ■ 改変・カスタマイズについて • 色やサイズなど、個人の配信・動画演出の範囲での加工・改変は自由です。 • ただし、加工後のデータを第三者へ配布・販売する行為は禁止となります。 ■ 免責事項 • 本製品の使用により発生したトラブル・損害について、制作者は一切の責任を負いません。 • 仕様変更・販売停止などは予告なく行う場合があります。 ■ その他 ガイドラインに関するご質問や、商用・法人案件での特別利用については、BOOTHメッセージまたは公式サイト、XのDMやリプライよりお問い合わせください。