CAITO GAME INCEPTION WORK

ゲーム、漫画、はてなブログについて、YouTubeゲーム実況の記事を独自の目線でツラツラと書いています。

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

スポンサーリンク

 

f:id:caito5963:20200221152017p:plain

 

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

 

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

 

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

 

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

 

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

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

 

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

headに要素を追加(設定) 

f:id:caito5963:20200221144014j:plain

 

「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に要素を追加」に張り付けます。

 ※既に上記コードを記載されている方は飛ばしてもらって結構です。

 

HTMLの設定(記事下)

f:id:caito5963:20200221144208j:plain

 

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

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

 

www.itjigoku.com

 

  1. はてなブログ管理画面「ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「記事」⇒「記事下」に張り付けます。

注意: 上記のコード内にて jquery-2.2.3 を最新の  jquery-3.3.1 に変更して下さい。  

CSSの設定(CSS)

f:id:caito5963:20200221144609j:plain

 

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

 

www.itjigoku.com

 

  1. はてなブログの管理画面「デザイン」⇒「カスタマイズ(スパナマーク)」⇒「デザインCSS」に張り付けます。

※レスポンシブで無い方々は個別にスマホ版CSSを入力しないといけませんので上記ブログ様を参考にて入力を行ってください。

 

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

f:id:caito5963:20200221145402j:plain

 

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

kurokinomizuiwa.hatenablog.com

 

www.itjigoku.com

 

www.tsubasa-note.blog 

 

最後に。

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

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

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

ではでは!

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