はてなブログで記事下の何日前(何時間前)を日付(日時)に変更

hatenaロゴ

このブログでは、記事下のIDや投稿日を非表示にしているのですが、それらをカスタマイズする記事がおもしろそうだったので、試しにやってみました。

攻めは飛車角銀桂守りは金銀三枚 - はてなブログで記事下の投稿からの経過日数を投稿日に変更する方法

でも、なぜか上記記事のコードではうまく動作しなかった(一部修正して動作した)ので、勉強がてら、自分でもコードを書いてみることにしました。

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    $('.updated').replaceWith(function() {
        var str = $(this).text().slice(0,10);
        $(this).replaceWith(str);
    });
});
</script>

トップページの表示形式により、コードを貼り付ける場所を変えます。
全文形式:フッタ(デザイン→カスタマイズ→フッタ)
一覧形式:記事下(デザイン→カスタマイズ→記事→記事下)

このコードをコピーして貼り付けると、何日前(何時間前)が日付に変わっているはず。
また、日付だけでなく時間も表示させる場合は、「.slice(0,10)」 を削除します。

記事下の投稿日のHTMLソースは、例えば、次のような感じになっています。

HTML
<span class="entry-footer-time">
<a href="https://simadzu.hatenablog.com/entry/no-adsense">
<time data-relative datetime="2019-04-08T12:25:46Z" title="2019-04-08T12:25:46Z" pubdate class="updated">2019-04-08 21:25</time>
</a>
</span>

<time > ~ </time>で囲まれた投稿日時が、はてなブログに組み込まれているJavaScriptにより何日前(何時間前)という表示に変更されるのですが、それをさらに投稿日時に書き換えるというわけです。

色白おばけさんの記事を参考にさせてもらいました。ありがとうございます。