はてなブログ

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

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種類しかありませんが、これだけカスタマイズできれば自由自在ですね。今回は表示のみで見た目のカスタマイズは行いませんでしたが、表示内容が変化すればデザインのパターンも増えてきそうです。

著者近影 Shunta MIYAGISHIMA

茨城県つくば市在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。