はてなブログの最終更新日￤設定方法とカスタマイズ方法（コピペで使えます！）

2023.08.01から、はてなブログに記事の最終更新日を表示する機能が追加されました。staff.hatenablog.com公式実装、待ってました！
さっそく設定とカスタマイズをしていきましょう。

この記事に書いてあること

最終更新日の設定方法。
デザインのカスタマイズ方法（コピペOK！）。
最終更新日を表示するメリット。

最終更新日の設定方法
デザインをカスタマイズする
- コピペで使えるCSSコード
  - カスタマイズの注意点
最終更新日を表示するメリット
おわりに

最終更新日の設定方法

最終更新日の設定

はてなブログのトップページから
【デザイン】へアクセスする。
【記事】➡【最後に更新した日付も表示する】にチェック︎︎︎︎︎︎☑︎︎︎︎︎︎︎を入れる（②）。
【変更を保存する】を押して完了。

スマホで設定する場合は、スマホをPC表示にして操作してください。
この設定はレシポンシブデザインでなくても反映されます。
2023.08.01以降に更新された記事のみ反映されます。

デザインをカスタマイズする

どんなブログにも合うシンプルなデザインですが、私には気になる部分が…！更新矢印がほんの少し下にズレているので、この位置を揃えます。

⬆このようにするCSSコードをご紹介します。
　

コピペで使えるCSSコード

コード使用のお願い
公開しているCSSコードは個人利用のコピペはOKですが、ブログなどでカスタマイズ方法を紹介する場合は、本記事をリンクして引用である旨の表記が必須です。
どうぞよろしくお願い致します。

CSSコードの使い方

はてなブログのトップページから
【デザイン】へアクセスする。
上記画像③にコードを貼り付ける。
【変更を保存する】を押して完了。

/*** 記事内の日付ここから ***/
.entry-date { /** 日付全体 **/
   font-weight: bold; /* 太字にする */
   font-size: 13.5px; /* 文字サイズ */
   letter-spacing: 0.08em; /* 文字間隔 */
   margin-bottom: 10px; /* 下の余白 */
   }

.entry-date a { /** 投稿日 **/
   color: #555; /* 文字色 */
   }
   
.entry-date a:before { /** 投稿日前につけるアイコンフォント **/
   font-family: "blogicon";
   content: "\f024";
   font-weight: normal;
   }
   
.date-last-updated { /** 更新日 **/
   position: relative;
   color: #555; /* 文字色 */
   }

.date-last-updated:before { /*更新日前につけるアイコンフォント*/
   font-family: "blogicon";
   content: "\f02b";
   font-weight: normal;
   position: absolute;
   top: -5px; /* 位置の調整 */
   left: 0; /* 位置の調整 */
   background: #FFF; /* 背景色 */
   }
/*** 記事内の日付ここまで ***/

　
このまま使用すると、当ブログとお揃いのデザインになります。指定部分の説明を入れているので、ブログデザインに合うようにお好みでカスタマイズしてくださいね。
　

便利サイトさん

カラーコード
WEB色見本原色大辞典 - HTMLカラーコード
アイコンフォント一覧
はてなブログで使えるアイコンフォント全125種 - フジブロっ！

カスタマイズの注意点

はてなブログの最終更新日の表示自体はレスポンシブデザインにしなくても反映されますが、カスタマイズを加えたものをスマホでも表示させるためには、レスポンシブデザインにする必要があります！

レスポンシブデザインの設定方法yunico-fluffylife.com

最終更新日を表示するメリット

情報の新鮮さを示すことができる。
信頼性と信憑性がアップする。
検索エンジンの上位表示に寄与する。
内容改訂の促進につながる。

何か困ったことや分からないことがあったらスマホやパソコンで調べると思うのですが、その時開いたページの投稿日や最後に更新した日にちって、なんとなく目に入りませんか？

最終更新日って結構、重要です。

例えば、気になるレストランについて書いてある情報が5年前のものだったら…参考にしますか？

店舗はまだあるだろうか。
営業時間やメニューは変わってないだろうか。
価格に大きな変化はないだろうか。

人によっては「情報が古いなぁ」と、内容を読まずにブラウザバックすることもあるかもしれません。

では5年前に初めて書かれた記事でも、最終更新日が1週間前だったらどうでしょう。「最新情報をチェックして、新しい情報に更新してくれているんだな」と安心感や信憑性が増しますよね。

最終更新日を表示することで読者は情報の新鮮さを確認できます。

またブログ運営者は、最終更新日を設定することでリライト（書き直し・書き換え）した日付が自動で表示されるので、日付を加筆する必要がなく手軽で便利になります。

さらに、更新頻度が高いコンテンツは検索エンジンで上位に表示にされやすくなる（らしい）ので、SEO向上にも寄与するはずです。
　

おわりに

はてなブログにも最終更新日を表示させる機能がリリースされ、さっそくカスタマイズ方法をご紹介しました。

この公式設定が実装されるまでJavaScriptで設定してたんですけど動作が少し重くなることがありました。動作ラグも解消されそうです。

CSSについてご不明点がありましたらお気軽にご連絡くださいね。

今日はそんな感じ！
それではまたね。

yunico's fluffy life

横着主婦の暮らしの詰め合わせ