先日、はてなブログに記事の最終更新日を表示する機能が追加されました🙌✨
staff.hatenablog.comわーい！待ってました！
最終更新日の表示機能は嬉しい実装です。
- 最終更新日の設定方法
- デザインのカスタマイズ方法
- 最終更新日を表示するメリット
最終更新日の設定方法
 |
| 1 | はてなブログのダッシュボードから、左側にある🎨デザインのページに飛ぶ。 |
|---|---|
| 2 | 🔧欄の中の【記事】を選択する（①）。 |
| 3 | 【最後に更新した日付も表示する】チェック︎︎︎︎︎︎☑︎︎︎︎︎︎︎を入れる（②）。 |
| 4 | 上にある【変更を保存する】を選択して、完了！ |
設定する際の補足
- スマホで設定する場合は、スマホをPC表示にして操作してください。
- この設定はレシポンシブデザインでなくても反映されます☺
- 2023.08.01以降に更新された記事のみ反映されます。
最終更新日のカスタマイズ
 |
無事に最終更新日を設定できました🙌
どんなブログにも合う、シンプルなデザインですね。
こちらをカスタマイズしていきましょう！
 |
👆🏻こんな感じはどうかな？
- 文字を大きく・太字にして、元のデザインより目立つようにしてみました。
- 記事タイトルとしっかり区切りを付けたかったので、背景をつけてみました。
- いい感じに余白を入れました。
デザインCSS
以下のCSSコードを、ダッシュボード→左側にある【🎨デザイン】→【🔧】マーク→下部にある【{}デザインCSS】に貼り付けてください。
.entry-date {
font-size: 16px; /** 文字サイズ **/
font-weight: bold; /** 文字を太字にする **/
background-color: #f5f5f5; /** 背景色 **/
padding: 5px 8px; /** 内側の余白 **/
margin-top: 5px; /** 外側の上余白 **/
margin-bottom: 15px; /** 外側の下余白 **/
}このまま使用すると、こことお揃いのデザインになります😙
指定部分の説明を入れているので、ブログデザインに合うようにお好みでカスタマイズしてくださいね。
▼カラーコード一覧サイトwww.colordic.org
カスタマイズの注意点
はてなブログの最終更新日の表示自体は、レスポンシブデザインにしなくても反映されます。
しかし、カスタマイズを加えたものをスマホ版デザインでも表示させるためには、レスポンシブデザインにする必要があります！
▼レスポンシブデザインの設定方法はこちらyunico-fluffylife.com
最終更新日を表示するメリット
はてなブログにも最終更新日を表示させる機能がリリースされ、さっそくカスタマイズ方法をご紹介しました。
ここからは最終更新日を表示させるメリットについてまとめていきますね。
皆さん、何か困ったことや分からないことがあったら、スマホやパソコンで調べると思うのですが、その時『開いたページの投稿日や最後に更新した日にち』って、なんとなく目に入りませんか？
最終更新日って結構、重要です💡
例えば、気になるレストランについて書いてある情報が5年前のものだったら、参考にしますか？
- 店舗はまだあるだろうか。
- 営業時間やメニューは変わってないだろうか。
- 価格に大きな変化はないだろうか。
・・・すこし不安が残りませんか？
人によっては「情報が古いなぁ」と、内容を読まずにブラウザバックすることもあるかもしれません。
では、5年前に初めて書かれた記事でも、最終更新日が1週間前だったらどうでしょう。
「最新情報をチェックして、新しい情報に更新してくれているんだな」と安心感や信憑性が増しますよね。
ブログ記事に最終更新日を表示することで、読者は情報の新鮮さを確認できます。
またブログ運営者は、最終更新日を設定することでリライト（書き直し・書き換え）した日付が自動で表示されるので、日付を加筆する必要がなく、手軽で便利になります✐
さらに、更新頻度が高いコンテンツは検索エンジンで上位に表示にされやすくなる（らしい）ので、SEO向上にも寄与するはずです。
メリット：まとめ
- 情報の新鮮さを示すことができる。
- 信頼性と信憑性がアップする。
- 検索エンジンの上位表示に寄与する。
- 内容改訂の促進につながる。
おわりに
はてなにも便利な機能が実装されましたね✨
この公式設定が実装されるまで、JavaScriptで独自に設定してたんですけど、ほんの少し動作が重くなることがあったんですよね。
これからはサックリ動作でページが表示されるはずです💡
投稿日・最終更新日は“シンプルだけど目立つ”ようにデザインCSSを書いてみたのですが、「こういうデザインにしたいんだけど！」というご希望がありましたらコメント下さい☺
できる範囲でCSSコード書いてみます✐
最終更新日の設定方法とカスタマイズ方法、参考になれば嬉しいです♡
お読みいただき、ありがとうございます。
それではまたね🧸◌𓈒𓐍
