16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

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

今までこのブログのテーマに使ってた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;
}

日付欄の枠をborderで設定します。
また、年と月はそのまま横並びに、日のみを大きな文字で下側に表示するように変更します。

これで日めくりカレンダー風の表示への変更が完了です。


あとは改造としてはプロフィールアイコンとか参加グループ画像のhover処理なんかも行いましたが、
これについてはまた別記事で。

以上。
おわり。