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

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により何日前(何時間前)という表示に変更されるのですが、それをさらに投稿日時に書き換えるというわけです。

参考になるブログ・Webサイト

はてなブログで記事下の投稿からの経過日数を投稿日に変更する方法
はてなブログで記事下にある投稿からの経過日数を投稿日に変更する方法です。 規定値でははてなブログでは記事下に表示されるのは投稿してからの経過日数が表示されます。 これを少し編集して投稿日に変えます。