日別アーカイブ: 2026年5月22日

いやあ、驚きです。

Geminiを開いて

コードをカスタムHTMLに貼れる形で出力するようにお願いして

WordPressにログインして、

コードをWordPressのカスタムHTMLに貼り付けて

この感想など書き込んで

30分かかりませんでした。

因みに作ってもらったコードは下記の通りです。

<div class="date-counter-container">
    <!-- 冒頭の解説・サンプル表示 -->
    <div class="counter-explanation">
        <p><strong>【表示例】</strong></p>
        <p>例えば、ターゲットとなる日付に「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>