わたしと納豆ごはん

納豆、Web、雑記など

トップ > Web > 【超小技】はてなブログで日付の表示形式を“年月日“などにするCSS

【超小技】はてなブログで日付の表示形式を“年月日“などにするCSS

Web はてなブログ HTML・CSS 小ワザ

はてなブログで記事の投稿日時は「 yy（年）- mm（月）- dd（日）」という風にハイフン（ - ）区切りで表示しています。

細かいところまで気にするなら、この表示形式も変えたい所です。例えば「2017年11月16日」という風に変えると和っぽいイメージのテーマに合いそうです。

ですが、はてなブログでは設定などで日付の表示形式を変えることは出来ません。

なのでCSSとかで変更するという方法になるのですが、以前はHTMLの仕様上、アーカイブやカテゴリーのページでの変更が難しかった（というかCSSでは出来なかった）のです。

ですが、いつのまにか日付のHTMLの仕様が統一していました。最近変わったのかな？

これで、とても簡単なCSSで変更できるようになりました。

今回はその方法についての記事です。

（、追記）

スポンサーリンク

はてなブログの日付の表示形式を変えるCSS

はてなブログで日付は、次のようなHTMLになっています。

<time datetime="2017-11-16" title="2017-11-16">
  <span class="date-year">2017</span>
  <span class="hyphen">-</span>
  <span class="date-month">11</span>
  <span class="hyphen">-</span>
  <span class="date-day">16</span>
</time>

上記HTMLの日付はこの記事の投稿日（）にしています。

このように細かくクラスが設定されていますので、これらにスタイルを指定するだけで超簡単に表示形式を変更できます。

例えば、さきほど出てきました「2017年11月16日」という風に年月日で表示させるには、CSSを次のようにすればオッケーです。

.hyphen {
    display: none;
}
.date-year::after {
    content: "年";
}
.date-month::after {
    content: "月";
}
.date-day::after {
    content: "日";
}

また、「 2017/11/16 」のようなスラッシュ（/）もいけます。一例としては次のようなCSSです

.hyphen {
    display: none;
}
.date-year::after,
.date-month::after {
    content: "/";
}

工夫次第ではいろいろ出来そうです。

サンプルとして、このブログで紹介したCSSなどの確認用ブログの方を「年月日」の表示にしました。よろしければご確認ください。現在は表示していません。

※追記

全部の日付のスタイルに適応するかと思いきや、現在（）記事下の設定で表示・非表示ができる関連記事や、サイドバーの最新記事などの日付には、スタイルが適応しません。

これは関連記事やサイドバーの日付のHTMLが、<time>2017-11-19</time>となっているためです。

このように全部にスタイルが反映される訳ではないので、この点にはご注意ください。

余談

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

これらを実現するにはHTML自体を変更しなくてはいけません。つまり JavaScript を使って変更するなどの方法になるかと思います。

ですが、日付の表示形式を変えるだけにわざわざ JavaScript を使うのもなぁ…と思い、カスタマイズしなかった記憶が過去にあります。

というのも、前述しましたが以前のはてなブログでは、アーカイブやカテゴリーなどのページで、日付のHTMLが先ほどのように細かく<span>で分かれていることはなく、<time>2017-11-16</time>というように一つのテキストだけでHTMLが書かれたいたためです。

以前、検索ボックスのプレースホルダーの文字が昔と今で変わっていることを以前の記事でも書きましたが、最近のはてなブログはいろいろ活発に改変しているようです。

こういう所がはてなブログのいいところですね。どんどん改善してほしい。まあ、今回のように細かい所でも大なり小なり何か変更点の告知っぽい知らせなどが欲しいところですが。実はしていて、わたしが知らないだけかも？

とにかく、このような改善は大賛成なので、スタッフの方々にはどんどん頑張っていただきたい所存です（笑）

【 追記】

今回の記事の続きのような記事も書いています。
tomotan.hateblo.jp

スポンサーリンク