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

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

※ 当サイトは広告を含みます。

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

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

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

管理人

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

りさ

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

コードを追加する

次のような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: '';
}
管理人

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

りさ

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

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

使い方

先程の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で改造できるように、こんな感じの出力になってるらしい。

管理人

なるほどなぁ。

この記事は参考になりましたか?

関連記事

コメント

この記事へのコメントはありません。