お知らせの日付にtimeタグを追加する【上級者用】

Home » 上級者用 » お知らせの日付にtimeタグを追加する【上級者用】

JavaScriptを使用して、クラス名が「info_date」に設定されている日付情報へ、自動的にtimeタグ・datetime属性をを追加する方法を説明します。

timeタグを追加することで、ページ上の日付が機械的に認識しやすい形式になります。

<time>タグとは
<time>タグは、HTMLの中で「ここは日付や時刻の情報です」と、ブラウザや検索エンジンに伝えるためのタグです。

datetime属性とは
datetime属性は、日付や時刻をコンピューターが正しく理解できる形式で記述するためのものです。

変更前と変更後のHTML

変更前

<span class="info_date">　[2026.07.08更新]</span>

JavaScript実行後

<span class="info_date"><time datetime="2026-07-08">[2026.07.08更新]</time></span>

画面上に表示される日付の形式は変更せず、timeタグのdatetime属性には「YYYY-MM-DD」形式の日付が設定されます。

JavaScriptを追加する

以下のJavaScriptをページに追加します。


  // ページのHTMLがすべて読み込まれてから処理を実行する
  document.addEventListener('DOMContentLoaded', function() {
      // クラス名が "info_date" の要素をすべて取得
      const dateSpans = document.querySelectorAll('.info_date');

      dateSpans.forEach(span => {
          // 前後の余白（全角スペースなど）を取り除く
          const text = span.textContent.trim();

          // 正規表現で「YYYY.MM.DD」の形式を抽出
          const match = text.match(/(\d{4})\.(\d{2})\.(\d{2})/);

          if (match) {
              // 抽出した年・月・日を取得
              const year = match[1];
              const month = match[2];
              const day = match[3];

              // datetime属性用の文字列（YYYY-MM-DD）を作成
              const datetime = `${year}-${month}-${day}`;

              // HTMLを書き換えて <time> タグで囲む
              span.innerHTML = `<time datetime="${datetime}">${text}</time>`;
          }
      });
  });

JavaScriptの詳しい追加方法は、以下のマニュアルを確認してください。

サポートセンター

Mail：[email protected]
Tel：0120-154-198
電話受付時間：平日 9:30～17:30