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

2017年4月28日

当ページのリンクには広告が含まれています。

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

通常の表示とhtml
-（ハイフン）を/（スラッシュ）に変える
○年○月○日の日本語表記に変える
年-月-日の順番を変える
曜日を表示させる
- 表示文字を変更する
- 追加変更されたhtml
月を数字ではなく英名で表示
投稿日にプラスして更新日を表示
まとめ

通常の表示と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を実際の表示させると↓のように。（テーマなどにより装飾は変わります。）

2017–04–26

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

–（ハイフン）を/（スラッシュ）に変える

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

2017–04–26

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

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

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

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

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: '日';
}

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

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

2017–04–26

.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便利！

曜日を表示させる

2017–04–27Thu

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

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

<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でのカスタマイズがし易いですね。こんな表示もできます。

2017–04–27Thu

.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など英語で表示する方法です。

2017–04–26

これも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>