【表示例】
例えば、「2026/05/22」時点で、ターゲットとなる日付に「2026/05/26」と入力すると、現在の日付からの残り期間が以下のように表示されます。
2026/05/26まで、0年0月4日（4日）
日付を入力するとここに結果が表示されます。
いやあ、驚きです。
Geminiを開いて
コードをカスタムHTMLに貼れる形で出力するようにお願いして
WordPressにログインして、
コードをWordPressのカスタムHTMLに貼り付けて
この感想など書き込んで
30分かかりませんでした。
因みに作ってもらったコードは下記の通りです。
<div class="date-counter-container">
<!-- 冒頭の解説・サンプル表示 -->
<div class="counter-explanation">
<p><strong>【表示例】</strong></p>
<p>例えば、「2026/05/22」時点で、ターゲットとなる日付に「2026/05/26」と入力すると、現在の日付からの残り期間が以下のように表示されます。</p>
<p class="sample-display">2026/05/26まで、0年0月4日（4日）</p>
</div>
<hr class="counter-divider">
<!-- 入力フォームと結果表示 -->
<div class="counter-input-section">
<label for="targetDate">ターゲットの日付を選択または入力してください：</label>
<input type="date" id="targetDate" class="counter-date-input">
</div>
<div class="counter-result-section">
<p id="countdownResult" class="counter-result-text">日付を入力するとここに結果が表示されます。</p>
</div>
</div>
<!-- 簡易的なデザイン調整用のスタイル（CSS） -->
<style>
.date-counter-container {
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
font-family: sans-serif;
}
.counter-explanation {
background-color: #fff;
border-left: 4px solid #0073aa;
padding: 10px 15px;
margin-bottom: 15px;
font-size: 0.95em;
}
.sample-display {
color: #c9302c;
font-weight: bold;
font-size: 1.1em;
margin-top: 5px;
}
.counter-divider {
border: 0;
border-top: 1px solid #ddd;
margin: 20px 0;
}
.counter-input-section {
margin-bottom: 15px;
}
.counter-date-input {
padding: 8px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
}
.counter-result-section {
background-color: #fff;
border: 1px dashed #bbb;
padding: 15px;
text-align: center;
min-height: 50px;
}
.counter-result-text {
font-size: 1.2em;
font-weight: bold;
color: #333;
margin: 0;
}
</style>
<!-- 計算用のプログラム（JavaScript） -->
<script>
document.getElementById('targetDate').addEventListener('input', function() {
const inputVal = this.value; // yyyy-mm-dd
if (!inputVal) {
document.getElementById('countdownResult').innerText = "日付を入力するとここに結果が表示されます。";
return;
}
// 入力された日付（終了日）のパース（ローカルタイム）
const parts = inputVal.split('-');
const year2 = parseInt(parts[0], 10);
const month2 = parseInt(parts[1], 10);
const day2 = parseInt(parts[2], 10);
const endDate = new Date(year2, month2 - 1, day2);
// 現在の日付（開始日）の時間を 00:00:00 にリセット
const now = new Date();
const startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
// 総日数の計算 (1日 = 86400000ミリ秒)
const msDiff = endDate.getTime() - startDate.getTime();
const totalDays = Math.ceil(msDiff / (1000 * 60 * 60 * 24));
// 過去の日付が入力された場合の処理
if (totalDays < 0) {
document.getElementById('countdownResult').innerText = "過去の日付が指定されています。";
return;
}
// 「x年y月d日」の詳細計算
let diffYears = year2 - startDate.getFullYear();
let diffMonths = (month2 - 1) - startDate.getMonth();
let diffDays = day2 - startDate.getDate();
// 日の繰り下がり処理
if (diffDays < 0) {
// 前月の末日を取得
const previousMonthEnd = new Date(year2, month2 - 1, 0).getDate();
diffDays += previousMonthEnd;
diffMonths--;
}
// 月の繰り下がり処理
if (diffMonths < 0) {
diffMonths += 12;
diffYears--;
}
// 表示用の日付フォーマット (yyyy/mm/dd)
const formattedTargetDate = `${year2}/${String(month2).padStart(2, '0')}/${String(day2).padStart(2, '0')}`;
// 結果の組み立て
const resultString = `${formattedTargetDate}まで、${diffYears}年${diffMonths}月${diffDays}日（${totalDays}日）`;
// 画面に表示
document.getElementById('countdownResult').innerText = resultString;
});
</script>
