更新日
はてなブログの最終更新日を設定して、カスタマイズ（コピペで使えるCSS）
2023年8月1日に、はてなブログに「記事の最終更新日を表示する機能」が追加されました。この機能を待っていた〜！staff.hatenablog.com
さっそく設定とカスタマイズをしていきましょう。
最終更新日の設定方法
setting
- はてなブログのトップページ（PC版）からデザインページへアクセスする。
- 上記画像の①（）の【記事】項目を選択
- 【最後に更新した日付も表示する】にチェック︎︎︎︎︎︎を入れる（②）。
- 画面上部の【変更を保存する】を押して完了。
もくもくこの最終設定日の設定はレシポンシブデザインでなくても反映されるんだよね。
yunicoそうそう！でも2023年8月1日以降に更新された記事のみに反映されて、2023年7月31日までにリライトした記事には最終更新日は表示されていないからその点は注意だね。
もくもく再度リライトすれば自動で最終更新日が表示されるようになるよ。
デザインをカスタマイズする
上の画像の赤矢印は「最終更新日を設定しただけのデフォルトデザイン」です。どんなブログにも合うシンプルなデザインですが、最終更新日の前にある矢印が少し下にずれているのが個人的に気になるので位置を揃えます。
コピペで使えるCSSコード
caution!
- 公開しているコードは個人利用でのコピペ、ご自身でのカスタマイズはご自由にどうぞ。
- カスタマイズ方法をブログなどで紹介する場合は本記事をリンクして、引用である旨の表記をしていただきますようお願い致します。
setting
- はてなブログのトップページ（PC版）からデザインページへアクセスする。
- 上記画像①→②→の順番に選択して、③に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: "\f043"; 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; /* 位置の調整 */ }
アイコンフォントの種類
| 投稿日 | 文字コード | 見た目 |
|---|---|---|
| 初回投稿 | \f043 | |
| 最終更新 | \f02b |
カスタマイズの注意点
冒頭にも書いたように最終更新日の表示自体はレスポンシブデザインにしなくても反映されますがカスタマイズを加えたものをスマホでも表示させるためにはレスポンシブデザインの設定も必要です。
yunico-fluffylife.comもくもく最終更新日を表示することでユーザーにコンテンツの新鮮さを提示することができるね。
yunicoご不明点はお気軽にお問い合わせください。
