画像の挿入＆変更方法
honori
WELUCA
PR
ホームページやブログで経過日数を表示する方法
honori
記事内に商品プロモーションを含む場合があります
経過日数を表示する方法はいくつかあります。
ここでは、WordPressの「カスタムHTML」に追加するだけ表示できる、最も簡単な方法を紹介します。
コード紹介
下記コードを「カスタムHTML」に貼り付けるだけで、指定の日付からの経過日数を自動で表示させることができます。
<p>
◆（開始から <span id="start date"></span>日）
</p>
<script>
// 関数: 指定された日付から現在日までの経過日数を計算
function calculateDays(startDate, elementId) {
var currentDate = new Date();
var startDateObj = new Date(startDate);
var daysDiff = Math.ceil((currentDate - startDateObj) / (24 * 60 * 60 * 1000));
// 計算結果をHTMLに表示
document.getElementById(elementId).textContent = daysDiff;
}
// 開始日からの計算と表示
calculateDays("2024/01/01", "start date");
</script>「カスタムHTML」の場所
WordPressでは「カスタムHTML」というものがあり、任意の場所にHTMLを表示させることができます。
段落でスラッシュ「/」を打つか、右側にある「＋」をクリック
「カスタムHTML」ブロックを探してクリック
「カスタムHTML」が挿入されていることを確認して完了
コードの解説
重要な部分は次の2点です。
- 開始日の設定場所
- 表示される言葉
開始日の設定場所
// 開始日からの計算と表示
calculateDays("2024/01/01", "start date");ここの「2024/01/01」となっているところが、指定する開始日です。
ここで指定した日付から、現在までの経過日数が自動で表示されます。
日付の隣にある「start date」がidクラスになっており、このidを使ってテキストで表示させます。
テキスト（文言）の変え方
<p>
◆（開始から <span id="start date"></span>日）
</p>ここのコードが、ホームページに実際に表示される部分です。
簡単にコードの役割を説明します。
- <p>タグ：ここは「テキスト」ですよ、というコード
- <span>タグ：指定したデータをここで表示しますよ、というコード
- 開始から〜日：ここの部分を自由に変更できます
経過日数の自動表示は、様々な応用ができると思います。
コードをコピーして、「カスタムHTML」でお好きなところに貼り付けてみてください。
