[CSS] 日時の書式をCSSで統一する方法

CSSを利用して日時の表記を統一する方法です。

日時の表記には、漢字(年月日)、/(スラッシュ)、.(ドット)など、色々なパターンがあります。
これを直接記事に書いても問題ありませんが、CSSで統一しておくと後の修正が楽です。

例えば100個の記事に直接日時を記述してる場合、書式の修正が発生すると全部の記事に修正が必要です。
これをCSSを利用して記述すれば、CSSの修正のみで、全ての記事の書式を変更できます。

管理人

ある日突然、気が変わってデザインを変えたい時はありませんか？ 僕は結構あります。

りさ

その突然が多すぎるのも問題だよ。

[20240825]::beforeを使うパターンを追加しました。

コードを追加する

::afterパターン

次のようなCSSを追加します。

time span.year::after {
  display: inline;
  content: '年';
}
time span.month::after {
  display: inline;
  content: '月';
}
time span.day::after {
  display: inline;
  content: '日';
}
time span.hour::after {
  display: inline;
  content: '時';
}
time span.minute::after {
  display: inline;
  content: '分';
}
time span.second::after {
  display: inline;
  content: '秒';
}

displayを書いてるのは表示/非表示を制御するためです。実際、このサイトのCSSはこんな感じです。

time span.year::after {
  display: inline;
  content: '.';
}
time span.month::after {
  display: inline;
  content: '.';
}
time span.day::after {
  display: none;
  content: '';
}
time span.hour::after {
  display: inline;
  content: ':';
}
time span.minute::after {
  display: inline;
  content: ':';
}
time span.second::after {
  display: none;
  content: '';
}

管理人

区切り文字は好みで変えてください。後、flexとorderを利用すれば順番も制御できると思います。

りさ

アメリカみたいに月や日から表示したい人は改造してね。

参考サイトhttps://tomotan.hateblo.jp/entry/web-hatenablog-date-format

::beforeパターン

表示するフォーマットによってはbeforeを使ったほうが有利です。
このサイトも最初はafterで記述してましたが、現在はbeforeに変更済みです。

time span.year::before {
  display: none;
  content: '';
}
time span.month::before {
  display: inline;
  content: '.';
}
time span.day::before {
  display: inline;
  content: '.';
}
time span.hour::before {
  display: none;
  content: '';
}
time span.minute::before {
  display: inline;
  content: ':';
}
time span.second::before {
  display: inline;
  content: ':';
}

管理人

こうすると年月までしか記述しない場合にゴミが残らない。

りさ

自分のサイトに合わせて調整してね。

使い方

先程のCSSを利用するためには、記事内にも特殊な記述が必要になります。
書式を統一したい部分の日時を全て、次のようなHTML形式で記述します。

<time datetime="2712-07-07 01:23:45">
  <span class="year">2712</span><span class="month">07</span><span class="day">07</span><span class="hour">01</span><span class="minute">23</span><span class="second">45</span>
</time>

日付と時刻の間に隙間が必要なら普通にスペースを書いてください。
後、大抵は日付しかいらないと思うので、その場合は日付だけ書きます。

<time datetime="2712-07-07">
  <span class="year">2712</span><span class="month">07</span><span class="day">07</span>
</time>

なお、この仕組みで制御できるのは記事内の自分で書く文章部分です。
例えばWordPressが出力する投稿日時や更新日時の書式はコントロールできません。

管理人

この形式で記述した日時だけがCSSの対象になります。

あとがき

自分で考えたんじゃなくて、参考サイトを見て改造しました。
はてなブログはCSSで改造できるように、こんな感じの出力になってるらしい。

管理人

なるほどなぁ。