更新日
はてなブログの最終更新日を設定して、カスタマイズ(コピペで使えるCSS)
2023年8月1日に、はてなブログに「記事の最終更新日を表示する機能」が追加されました。この機能を待っていた〜!staff.hatenablog.com
さっそく設定とカスタマイズをしていきましょう。
最終更新日の設定方法
setting
- はてなブログのトップページ(PC版)からデザインページへアクセスする。
- 上記画像の①()の【記事】項目を選択
- 【最後に更新した日付も表示する】にチェック︎︎︎︎︎︎を入れる(②)。
- 画面上部の【変更を保存する】を押して完了。
デザインをカスタマイズする
上の画像の赤矢印は「最終更新日を設定しただけのデフォルトデザイン」です。どんなブログにも合うシンプルなデザインですが、最終更新日の前にある矢印が少し下にずれているのが個人的に気になるので位置を揃えます。
コピペで使える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