はてなブログで日付の表示内容をカスタマイズ-曜日追加や月の英名表示など

f:id:c-miya:20170428003933p:plain
はてなブログではトップページや個別記事で投稿の日付が表示されますが、デフォルトではその形式を選んだりすることができません。なのでcssやjavascriptを使って強引にカスタマイズしてみました。

通常の表示とhtml

まずは通常の表示を確認します。はてなブログでは投稿日がいくつかの場所で表示されます。とりあえず、個別記事のヘッダー、タイトル前に表示されているのは以下のようなhtmlになっています。

<div class="entry-date date first">
    <a href="http://www.foxism.jp/archive/2017/04/26" rel="nofollow">
      <time pubdate datetime="2017-04-26T14:02:18Z" title="2017-04-26T14:02:18Z">
        <span class="date-year">2017</span><span class="hyphen">-</span><span class="date-month">04</span><span class="hyphen">-</span><span class="date-day">26</span>
      </time>
    </a>
</div>

上のhtmlを実際の表示させると↓のように。(テーマなどにより装飾は変わります。)

年-月-日と表示され、月日は1桁の場合0が先頭に付きます。全体でその日のアーカイブにリンクされています。これが基本となります。

-(ハイフン)を/(スラッシュ)に変える

通常は年-月-日と-(ハイフン)で区切られていますが、これをcssで/(スラッシュ)に変更します。

.entry-date .hyphen{ /* ハイフンを非表示 */
    display: none;
}
.entry-date .date-year::after, .entry-date .date-month::after{ /* 年と月の後ろにスラッシュを挿入 */
    content: '/';
}

ハイフンにもクラスが割り当てられているので、それをdisplay:none;で非表示にし、年と月の部分に疑似要素でスラッシュを加えているだけです。

○年○月○日の日本語表記に変える

同様に2017年04月26日といった日本語表記にもできます。

.entry-date .hyphen{ /* ハイフンを非表示 */
    display: none;
}
.entry-date .date-year::after{ /* 年の後ろに「年」を挿入 */
    content: '年';
}
.entry-date .date-month::after{ /* 月の後ろに「月」を挿入 */
    content: '月';
}
.entry-date .date-day::after{ /* 日の後ろに「日」を挿入 */
    content: '日';
}

年-月-日の順番を変える

通常の表記は年-月-日という順番ですが、これを入れ替えることができます。国によっては日本と順番が違う所ありますしね。

.entry-date time{
    display: -webkit-inline-flex;
    display: inline-flex;
}
.entry-date time span:nth-of-type(2){
    -webkit-order: 2; /* orderの数字が何番目に表示されるかを示す */
    order: 2;
}
.entry-date time span:nth-of-type(4){
    -webkit-order: 4;
    order: 4;
}
.entry-date .date-year{
    -webkit-order: 5;
    order: 5;
}
.entry-date .date-month{
    -webkit-order: 1;
    order: 1;
}
.entry-date .date-day{
    -webkit-order: 3;
    order: 3;
}

flexbox便利!

曜日を表示させる

はてなブログで曜日を表示させる方法が、すなばいじりさんの記事で書かれています。

スクリプトをアップロードされているので、それをフッタに加えるだけで利用できます。

<script src="//niyari.github.io/hatenablog-modules/date-to-week.js"charset="utf-8"></script>

表示文字を変更する

通常はMon、Friなど英字3文字表記ですが、設定を加えることでこれを変更できます。

<script src="//niyari.github.io/hatenablog-modules/date-to-week.js" charset="utf-8"></script>
<script>
//表示させる文字を変える
Htnpsne.DateToWeek.init(["日","月","火","水","木","金","土"]);
</script>

追加変更されたhtml

これを使ったときのhtmlは以下のようになります。

<div class="entry-date date first">
    <a href="http://www.foxism.jp/archive/2017/04/27" rel="nofollow">
      <time pubdate="" datetime="2017-04-27T13:05:46Z" title="2017-04-27T13:05:46Z">
        <span class="date-year">2017</span><span class="hyphen">-</span><span class="date-month">04</span><span class="hyphen">-</span><span class="date-day">27</span>
      <span class="date-week date-week-Thu">Thu</span></time>
    </a>
</div>

最後に曜日分のspanが加わっています。曜日部分としてのクラスdate-weekと、曜日それぞれのクラスdate-week-Thu等が加わっているので、cssでのカスタマイズがし易いですね。こんな表示もできます。

.entry-date time{
    display: block;
    width: 90px;
    background: #f44336;
    border-radius: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}
.entry-date span:nth-of-type(4){
    display: none;
}
.entry-date .date-day{
    display: block;
    background: #ffcdd2;
    color: #333;
    font-size: 32px;
}
.entry-date .date-week{
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 6px;
    padding: 0 0 0 6px;
}

月を数字ではなく英名で表示

標準では月の表示も数字ですが、これをMarchなど英語で表示する方法です。

これもjQueryを使う方法で、はてなブログの方法ではありませんが、以下のページを参考にできます。


はてなブログのデザイン設定から記事下に以下を加えます。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script>
(function() { 
    var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    $('.date-month').each(function() {
        var m = $(this).text();
        $(this).html(months[Number(m)-1]);
    });
})();
</script>

表記を変えたい時は上記スクリプトのvar monthsのところの表記を変更してください。英語ではなくても弥生・卯月・葉月といった表示にもできますね。
また、記事下ではなくフッタに加えれば個別記事だけでなくすべてのページでこの表記に変わります。

jQueryを読み込ませたくない場合は以下のような表記もあるようです。

<script>
document.addEventListener('DOMContentLoaded', function(){
(function() { 
    var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    $('.date-month').each(function() {
        var m = $(this).text();
        $(this).html(months[Number(m)-1]);
    });
})();
  console.log($(window).width());
});
</script>

投稿日にプラスして更新日を表示

最後に、投稿日ではありませんが、その記事を更新した日付を別で表示する方法もあります。

これは方法が2つあり、はてなブログProの方はAMPページから取得する方法、そうでない方は(あまり推奨はされていないようですが)サイトマップから取得する方法があります。これもすなばいじりさんの記事ですね。


私はAMPをオンにしていないので例は出せませんが、上記記事を参考にしてください。

まとめ

日付の表示はデフォルトでは1種類しかありませんが、これだけカスタマイズできれば自由自在ですね。今回は表示のみで見た目のカスタマイズは行いませんでしたが、表示内容が変化すればデザインのパターンも増えてきそうです。