はてなブログの日付表示をいろいろカスタマイズ（十の位の“0”を消す、漢数字・元号表示）

はてなブログの日付表示に関しては、以前にこのようなカスタマイズ記事を書いています。

ここでは次のように書いていますが

ちなみにですが、この日付を平成（例えば、平成29年11月16日）や漢数字表示（十一月十六日）というような表示にはできません。また「01月01日」というように、どうしても二桁表示になります（つまり、『1月1日』のように一桁にならない）。

実はCSSだけでも「表示する」だけだったら出来そうです。なので、これをやってみたいと思います。

日付を年月日にして、十の位の“0”を消すCSS

まずは「01月01日」とかを「1月1日」とかにしたいと思います。前途リンク先のCSSもふくめて記載します。

/* 日付を年月日表示 */
.hyphen {
    display: none;
}
.date-year::after {
    content: "年";
}
.date-month::after {
    content: "月";
}
.date-day::after {
    content: "日";
}

/* 月日の十の位の“0”を消去 */
.date-month,
.date-day {
    display: inline-block;
}
time[datetime*="-01-"] > .date-month::first-letter,
time[datetime*="-02-"] > .date-month::first-letter,
time[datetime*="-03-"] > .date-month::first-letter,
time[datetime*="-04-"] > .date-month::first-letter,
time[datetime*="-05-"] > .date-month::first-letter,
time[datetime*="-06-"] > .date-month::first-letter,
time[datetime*="-07-"] > .date-month::first-letter,
time[datetime*="-08-"] > .date-month::first-letter,
time[datetime*="-09-"] > .date-month::first-letter {
    font-size: 0;
}
time[datetime*="01T"] > .date-day::first-letter,
time[datetime*="02T"] > .date-day::first-letter,
time[datetime*="03T"] > .date-day::first-letter,
time[datetime*="04T"] > .date-day::first-letter,
time[datetime*="05T"] > .date-day::first-letter,
time[datetime*="06T"] > .date-day::first-letter,
time[datetime*="07T"] > .date-day::first-letter,
time[datetime*="08T"] > .date-day::first-letter,
time[datetime*="09T"] > .date-day::first-letter {
    font-size: 0;
}

この方法は、属性セレクタを使って10の位が“0”かどうか判別しています。CSSでは「任意の1文字どれか（ワイルドカード）」というようなマッチングはできませんので、上記のように個々で判別するようにするしかないようです。

ただ、この方法には欠点があって、それは『はてなブログの仕様の変更などによっては、datetime属性での判別ができなくなる可能性がある』というものです。

とは言っても、timeタグを使っているからにはdatetime属性は使うでしょうし、この要素はそう簡単には変更しないとは思います。なので、その点では安心できるんじゃないでしょうか。

日付を漢数字・元号表示にするCSS

次に元号や漢数字での表示です。

元号・日付全部を漢数字表記にするとなると、CSSがけっこう長く、ややこしくなります。なので実際に使う状況を考えると、日付に漢数字表示がないブログサービス等で、CSSしか変更できず、そんな状況でどうしても漢数字に変更したい、という場合で使えそうです。そんな状況あるのでしょうか？

兎にも角にも、はてなブログの日付を漢数字・元号表示にするCSSです。ちょっと長いですが、仕組はシンプル。属性セレクタを使ってプログラムの条件分岐のようなことをしています。

ただ仕組みの関係で同じクラスを何回も指定していますので、CSSの処理の仕様上、重たくなることが考えられます。

/* ハイフン・数字を消す */
.hyphen {
    display: none;
}
.date-year,
.date-month,
.date-day {
    font-size: 0;
}

/* 漢数字表示の準備（フォントサイズを絶対値で指定） */
.date-year::after,
.date-month::after,
.date-day::before,
.date-day::after {
    font-size: 1rem;
}

/* 年の表示 */
time[datetime^="2019"] > .date-year::after {
    content: "令和元年";
}
time[datetime^="2019-04"] > .date-year::after,
time[datetime^="2019-03"] > .date-year::after,
time[datetime^="2019-02"] > .date-year::after,
time[datetime^="2019-01"] > .date-year::after {
    content: "平成三十一年";
}
time[datetime^="2018"] > .date-year::after {
    content: "平成三十年";
}
time[datetime^="2018"] > .date-year::after {
    content: "平成二十九年";
}
time[datetime^="2020"] > .date-year::after {
    content: "令和二年";
}
time[datetime^="2021"] > .date-year::after {
    content: "令和三年";
}

/* 月の表示 */
time[datetime*="-01-"] > .date-month::after {
    content: "一月";
}
time[datetime*="-02-"] > .date-month::after {
    content: "二月";
}
time[datetime*="-03-"] > .date-month::after {
    content: "三月";
}
time[datetime*="-04-"] > .date-month::after {
    content: "四月";
}
time[datetime*="-05-"] > .date-month::after {
    content: "五月";
}
time[datetime*="-06-"] > .date-month::after {
    content: "六月";
}
time[datetime*="-07-"] > .date-month::after {
    content: "七月";
}
time[datetime*="-08-"] > .date-month::after {
    content: "八月";
}
time[datetime*="-09-"] > .date-month::after {
    content: "九月";
}
time[datetime*="-10-"] > .date-month::after {
    content: "十月";
}
time[datetime*="-11-"] > .date-month::after {
    content: "十一月";
}
time[datetime*="-12-"] > .date-month::after {
    content: "十二月";
}

/* 日の一の位の表示 */
time[datetime*="1T"] > .date-day::after {
    content: "一日";
}
time[datetime*="2T"] > .date-day::after {
    content: "二日";
}
time[datetime*="3T"] > .date-day::after {
    content: "三日";
}
time[datetime*="4T"] > .date-day::after {
    content: "四日";
}
time[datetime*="5T"] > .date-day::after {
    content: "五日";
}
time[datetime*="6T"] > .date-day::after {
    content: "六日";
}
time[datetime*="7T"] > .date-day::after {
    content: "七日";
}
time[datetime*="8T"] > .date-day::after {
    content: "八日";
}
time[datetime*="9T"] > .date-day::after {
    content: "九日";
}
time[datetime*="0T"] > .date-day::after {
    content: "日";
}

/* 日の十の位の表示 */
time[datetime*="-1"] > .date-day::before {
    content: "十";
}
time[datetime*="-2"] > .date-day::before {
    content: "二十";
}
time[datetime*="-3"] > .date-day::before {
    content: "三十";
}
time[datetime*="-10-0"] > .date-day::before,
time[datetime*="-11-0"] > .date-day::before,
time[datetime*="-12-0"] > .date-day::before {
    content: none;
}

記事が公開後日付を変えないというのなら、それほど長くならないのですが、「全ての記事に対応させる」となると上記のようなCSSになると思います。他にもっと良い方法があるかもしれませんけど。

また年を元号じゃなくて漢数字にしたい場合、次のCSSを年のところに置き換えたらいけるはずです。

/* 年の表示 */
time[datetime^="2017"] > .date-year::after {
    content: "二〇一七年";
}
time[datetime^="2018"] > .date-year::after {
    content: "二〇一八年";
}
time[datetime^="2019"] > .date-year::after {
    content: "二〇一九年";
}
time[datetime^="2020"] > .date-year::after {
    content: "二〇二〇年";
}
time[datetime^="2021"] > .date-year::after {
    content: "二〇二一年";
}