Web
Analytics

雨のち晴れ

思った事をノンジャンルで綴ります

雨のち晴れ

MENU

【はてなブログ】更新日時を自動で表示するカスタマイズ【便利機能】

はてなブログ以外の方も

更新日時を自動で表示させる便利なカスタマイズがあります

こんにちは。

最近のブログカスタマイズをご紹介していきたいと思います。

今回ご紹介するのはこれ!

作成日時と更新日時をお知らせします

左の日付が記事を書いた日にち、右の日付が記事を更新した日にちになります。

更新とは記事をリライトしたり、カテゴリーを変更したりした日にちのことです。

あったら便利ですよね♪

それでは早速ご紹介していきます。

更新日時をお知らせ!

更新日時をお知らせすると、こんなに便利です

私のブログはこの記事でちょうど60記事目、まだまだビギナーだと思っています。

それでも以前に書いた記事や内容を更新した方がいい記事については、定期的に見直すようにしています。

そこで、自分の書いた記事がいつ新しい情報に更新されたのかをお知らせする機能があれば便利だなと思い、今回のカスタマイズを取り入れてみました。

今回参考にさせていただいたのは、「tomo」さんのこちらの記事です。

こちらを参考にしながらコードを入力してみたのですが、更新日時の方のアイコンが上手く表示されなかったので、少し変更をしています。

私は「Under Shirt」というテーマを使っていますので、同じテーマの方はコピペで大丈夫だと思います。

なお、「tomo」さんの記事から、「Minimalism」、「ZENO-TEAL」のテーマについても動作確認がされているようなので、大丈夫かと思われます。

しかし、いずれの場合も保存してから行っていただけたらと思います。

headに貼るコード

headに貼るコードは2つあります。

Font Awesomeのコード

作成日時と更新日時の左側にアイコンを使っていますので、そちらの設定が必要です。

アイコンはFont Awesomeを使っています。様々なアイコンを使用できるサイトですが、使うにはheadの部分に次のコードを貼り付けます。

このコードを設定詳細設定

f:id:meipapa0219:20200503173225p:plain

そこから下にスクロールして「headに要素を追加」の部分に貼り付けます。

f:id:meipapa0219:20200808205843p:plain

これでFont Awesomeのアイコンを使用することができます。

jQuerry のコード

次にjQuerryを先ほどと同じように「headに要素を追加」の部分に貼ります。

一緒に載せておいてもよかったのですが、すでに導入されている方もいらっしゃると思いますので別々にしています。

どちらも必要になってきますので、必ず貼っておきましょう。

記事下に貼るコード

次に、こちらのコードを記事下の部分に貼ります。

12行目の部分は、私のブログアドレスになっていますので、必ずご自身のURLに変更をしておいてください

貼り付ける場所は、デザインレンチのマーク記事

f:id:meipapa0219:20200415232130p:plain

f:id:meipapa0219:20200415232133p:plain

f:id:meipapa0219:20200808205847p:plain

そこから少し下にスクロールして、記事下の部分に貼ってください。

f:id:meipapa0219:20200808205851p:plain

後もう少しです!次が最後になります。

デザインCSSに貼るコード

最後はデザインCSSに次のコードを貼ってください。

CSS

こちらのコードですが、17行目の「f01e」が更新日時のアイコン、31行目の「f044」が作成日時のアイコンになっています。どちらもFont Awesomeのページにあるコードを見て、好きなアイコンに変更することができますので、是非調べてみてください。

貼り付ける場所は、デザインレンチのマークデザインCSS

f:id:meipapa0219:20200415232138p:plain

こちらに貼って完了です。それぞれ変更を保存するボタンを押し忘れないように注意してください!

さいごに

さいごに

更新日時をお知らせするカスタマイズ、いかがでしたでしょうか?

いつ新しい記事になったか分かれば便利ですよね。

はてなブロガ-さんの中には、過去記事をリライトしたものを日付を変えてアップさせている方がいらっしゃいますが、古くなった記事が何度も新着記事で表示されると読者の方からすれば、「また同じ記事・・・」となってしまいますよね。私は過去記事を新着記事に載せることはあまり好きではありません・・・

せっかくリライトした記事をみなさんに読んでいただきたい気持ちは私も同じですが・・・リライト=新着記事ではない思います。

いつリライトされたかが分かるように表示して、新しくブログを見に来ていただいた方に、「この記事は更新されているから読んでみよう」と思っていただけると、それで十分嬉しいです。

そのために今回はこのカスタマイズを取り入れてみました。

是非みなさんも使ってみてください。最後まで読んでいただき、ありがとうございました。