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

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


以前の記事はコチラ。

デモ


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タグとか消して、実際に表示させると↓

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%;としています。数値が決まっていればそのフォントサイズを入力しても構いません。

問題点

このtimeで書かれているtitle属性の日付(時間)って、日本時間ではなく、世界標準時なんですよね、たぶん。なので日本時間の9時間前です。

なので、投稿時間が月初の1日午前0時から9時までは、ここが前月のままになっている…と思います(未確認)。そこでこれを使うと、月名表示がおかしくなってしまいます。まぁその時間に投稿しなければいいだけの話ですが、ありえないことではないです。

こういったものを求めている人がどれだけいるかわかりませんが、まぁ軽いネタということで。属性セレクタって面白いですね。ちゃんと勉強すれば、もっといろいろ使えそうです。