はてなブログの日付表示（月名）をcssで英語表記にしてみる

2017年8月30日

当ページのリンクには広告が含まれています。

f:id:c-miya:20170830055441p:plain
以前、似たようなネタで日付表示をいろいろカスタマイズする方法を紹介したのですが、よくよく考えてみれば月名を英語にするだけだったらcssだけでできることに気づきました。

以前の記事はコチラ。

デモ

2017–08–28

html

もともとの日付部分のhtmlはこんな感じになっています。

<div class="entry-date date first">
<a href="http://www.foxism.jp/archive/2017/08/28" rel="nofollow">
<time pubdate="" datetime="2017-08-28T10:44:57Z" title="2017-08-28T10:44:57Z">
<span class="date-year">2017</span><span class="hyphen">-</span><span class="date-month">08</span><span class="hyphen">-</span><span class="date-day">28</span>
</time>
</a>
</div>

divとかaタグとか消して、実際に表示させると↓
2017–08–28

css

使ったcssは以下のとおりです。

.date-month{font-size: 1%;}
.date-month::before{font-size: 10000%;}
time[title*="-01-"] .date-month::before{content: 'JAN';}
time[title*="-02-"] .date-month::before{content: 'FEB';}
time[title*="-03-"] .date-month::before{content: 'MAR';}
time[title*="-04-"] .date-month::before{content: 'APR';}
time[title*="-05-"] .date-month::before{content: 'MAY';}
time[title*="-06-"] .date-month::before{content: 'JUN';}
time[title*="-07-"] .date-month::before{content: 'JUL';}
time[title*="-08-"] .date-month::before{content: 'AUG';}
time[title*="-09-"] .date-month::before{content: 'SEP';}
time[title*="-10-"] .date-month::before{content: 'OCT';}
time[title*="-11-"] .date-month::before{content: 'NOV';}
time[title*="-12-"] .date-month::before{content: 'DEC';}

contentの中身を変えてもらえれば、英名じゃなくても睦月や如月などの和名にも変更できます。

ちょっとした解説

cssの属性セレクタE[foo*="bar"]を使っています。これはfoo属性にbarが含まれているE要素に適用させるというものです。今回の場合、日付の部分がtimeタグが埋め込まれており、そのtitle属性に日付が入っているのでそれを利用しています。

title属性の日付に-08-と入っていれば8月ですからね。元の月を表示する部分がdate-monthクラスのspanでマークアップされているので、その部分のフォントサイズを1%にしてほぼ見えない状態に。そして::beforeで好きな表示を書き加えています。そのままではフォントサイズが1%のままなので、それを元に戻すためにfont-size: 10000%;としています。数値が決まっていればそのフォントサイズを入力しても構いません。