【CSS】はてなブログテーマの魔改造～日付表示を日めくりカレンダー風に～

はてなブログで使ってたテーマが作者さんにより削除されてた･･･
— 桜餅 (@sakuramochi702) 2013年10月18日

今までこのブログのテーマに使ってたplatismさんの"Excalibur"というテーマが削除されました。
理由としては、

なんというか過去に作ったものって一定期間が経過すると非常に恥ずかしくなるんですよね。なんでこんなデザインにしたのかーとか。かといって大幅修正を加えるのもどうかなーと葛藤しちゃうのです。

とのこと。

まぁソースはあるし、適用もしてるからほっといても別に使えるんですが、
作者さんが恥ずかしいと感じてるみたいなので、僕としてもこれを機にテーマを変えようと思いまして、
さらに以前からCSS触りたいなと思っていたこともあったので、
せっかくだからテーマ自作してみることにしました。

はてな公式が配布している叩き台テンプレートのBoilerplateをベースに、
現在は適当にググりながら魔改造しているところなのですが、
今回はその改造内容から1つをご紹介。

日付表示形式の変更

はてなブログはデフォルトだと記事の日付は「2013-10-22」みたいに横並びにハイフン繋ぎで表示されますが、
これを日めくりカレンダー風の形式に変更するというもの。

.hyphen {
  display: none;
}
.date-year::after {
  content: '/';
}

まずはハイフンを消し、年と月の間にスラッシュを入れます。

.date {
  font-weight: bold;
  margin-bottom: 10px;
  border: 1px solid #e6e6e6;
  width: 4em;
  height: 4em;
  text-align: center;
  color: #e6e6e6;
}
.date span.date-year,
.date span.date-month {
  margin: 0;
  width: 3em;
  height: 0.8em;
  overflow: hidden;
}
.date span.date-day {
  margin: 0 auto;
  display: block;
  font-size: 270%;
  width: 1.4em;
  height: 1.0em;
  overflow: hidden;
  text-align: center;
}