こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
お知らせページの更新って、意外と忘れてしまいませんか。
「日付を変え忘れて古いまま」「更新したのに見た目ではわからない」ということは、飲食店・サービス業・企業サイトでもよくある課題です。
そんなときに便利なのが、自動で“今日の日付”や“ファイル更新日”を反映してくれる仕組みです。
今回は、CSSとJavaScriptだけで実現できる「お知らせ更新日」の自動反映機能を、コピペで使える形で解説していきます。
お知らせページを運用している方には特におすすめのテクニックですので、ぜひ実装してみてください。
お知らせ更新日を自動表示する仕組み
まず最初に、今回の仕組みがどう動くのかを簡単に整理しましょう。
- JavaScriptで「今日の日付」を取得。
- ページ内の指定エリアに自動で挿入。
- CSSで読みやすくデザイン。
これだけで、更新日を毎回手入力する必要がなくなり、更新ミス防止にも役立ちます。
HTMLの準備
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
「更新日」を表示したい場所に、次のHTMLを配置します。
<div class="update-date"> 最終更新日：<span id="js-update-date"></span> </div> CSSでデザインする
.update-date {
font-size: 14px;
color: #555;
background: #f7f7f7;
padding: 8px 12px;
border-left: 4px solid #0078ff;
border-radius: 4px;
display: inline-block;
}必要に応じて自由にアレンジできます。
JavaScriptで今日の日付を自動挿入
document.addEventListener("DOMContentLoaded", function () {
const dateEl = document.getElementById("js-update-date");
const today = new Date();
const y = today.getFullYear();
const m = String(today.getMonth() + 1).padStart(2, "0");
const d = String(today.getDate()).padStart(2, "0");
dateEl.textContent = `${y}-${m}-${d}`;
});WordPressで「記事更新日」を使う応用編
WordPressなら、次のような応用も可能です。
- PHPで記事の更新日を取得。
- HTMLに出力。
- CSSでデザインを整える。
WordPressテーマ内に配置する例：
<div class="update-date"> 最終更新日：<span><?php the_modified_date('Y-m-d'); ?></span> </div> 自動更新日を入れるメリット
- 日付の入力漏れを防げる。
- サイト更新の信頼度がアップ。
- お知らせや新着情報ページと相性が良い。
- CMSがなくても導入できる。
まとめ
お知らせページの更新を効率化したい人にとって、
「自動で更新日を反映するしくみ」は非常に便利な機能です。
HTMLさえ書き換えられれば、静的サイトでもWordPressでも誰でも使えるので、ぜひ取り入れてみてくださいね。
satokotadesignキャンペーン実施中！
