「はてなブログ」でリライトした記事の『更新日時』を自動表示させました。

 

 

 

どうも! 魁堵(かいと)です!

 

記事が多くなってきた方は、過去に綴った記事を色々とリライトしたいはず。

 

ですが、更新日が表示されないのが「はてなブログ」の仕様と困ったものです。

 

そこで、リライトした日付の最終更新日を表示させる方法をサイト様を経由しながら紹介させていただきます。

少しでもご参考になれば幸いです。

 

こちらの記事は「はてなブログ」で掲載していたものになります。現在筆者はWordPressで記事を書いております。

 

 

さぁ、これでリライトしても大丈夫。

※ちなみに私の旧はてなブログのテーマは「Minimalism」でした。

 

Sponsor Link

記事(リライト)の『更新日時』を表示する設定をする。

headに要素を追加(設定)

 

「jQuery」「Font Awesome」をちゃんと読み込ませないと表示されないので、headに下記の要素を追加します。

 

<!--「jQuery」参照URL--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!--「Font Awesome」参照URL--><link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

 

  1.  はてなブログ管理画面「ダッシュボード」⇒「設定」⇒「詳細設定」⇒「headに要素を追加」に張り付けます。
    ※既に上記コードを既に記載されている方は飛ばしてもらって結構です。

 

Sponsor Link

HTMLの設定(記事下)


つばさノート様が公開されているJavaScriptが有名ではありますが、「はてなブログ」の仕様変更に伴い更新日付表示に加えて「HH:mm:ss+09:09」という時間、分、秒、タイムゾーンまで表示されるようになってしまいました。

ですが、漆うしる様が運営されております「元IT土方の供述」のブログにて最新コードが表記されておりますので、そちらのJavaScriptをお借りすると解決します。

※更新されているかもしれませんので、常にチェックをお願いします。

元IT土方の供述

みんなー!うしるだよー☆ 今回はねえ!はてなブログで記事の「最終更新日」を自動表示させる方法を紹介しちゃうんだ! 刮目し…

 

  1. はてなブログ管理画面「ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「記事」⇒「記事下」に張り付けます。
注意: 上記のコード内にて jquery-2.2.3 を最新の  jquery-3.3.1 に変更して下さい。(2020年4月現在)

 

CSSの設定(CSS)


さらにCSSコードを入力をしないと稼働しませんので、同じく漆うしる様が運営されております「元IT土方の供述」にて記載されているコードを入力させていただきます。

  1. はてなブログの管理画面「デザイン」⇒「カスタマイズ(スパナマーク)」⇒「デザインCSS」に張り付けます。
    ※レスポンシブで無い方々は、個別にスマホ版CSSを入力しないといけませんので上記ブログ様を参考にて入力を行ってください。

 

元IT土方の供述

みんなー!うしるだよー☆ 今回はねえ!はてなブログで記事の「最終更新日」を自動表示させる方法を紹介しちゃうんだ! 刮目し…

 

以上で、上手く表示されていれば完了です。

 

Sponsor Link

『更新日時』参考ブログサイト

黒木ノ水岩

通常、記事を書くとその記事を初めて作った日、つまり「記事の作成日」が表示されますよね。 しかし、私のように一度書いた記事…

 

元IT土方の供述

みんなー!うしるだよー☆ 今回はねえ!はてなブログで記事の「最終更新日」を自動表示させる方法を紹介しちゃうんだ! 刮目し…

 

つばさのーと

こんにちは、つばさ(@tsubasa123)です。結構温めていたカスタマイズネタです。二週間ほど寝かせて様子を見ましたが…

 

最後に。

私も試行錯誤して表示させることができました。

色々とコードが最新になっていて上手く表記されなくて混乱する方が多いと思います。

もし、上記に載せているので上手くいかない場合は参考サイト様で試行錯誤されることをオススメします!

色々することで勉強にもなりますよね。

ではでは!

簡単に紹介してみる魁堵(かいと)でしたー!

Sponsor Link
最新情報をチェックしよう!