そういうのがいいブログ

SIerで働く30代サラリーマンSEがインフラエンジニアに憧れてLinux・クラウド・AWSの勉強をするブログ

【はてなブログ】記事の投稿日のアイコンをカスタマイズするCSS(Minimalism対応)

※[PR]当ブログの記事の中にはプロモーションが含まれています。

はてなブログ】記事の投稿日のアイコンをカスタマイズするCSS(Minimalismテーマに対応)

記事のエントリー日の日付表示の隣にあるアイコンを、Minimalismテーマのデフォルト(カレンダーマーク)から、 時計マークに変更したときのカスタマイズ方法のメモです。

CSSに追加するだけで簡単に変更できました

具体的な方法

設定 > デザイン > カスタマイズ >デザインCSS
に下記コードを追加します。

個別記事ページのエントリー日

.entry-header .entry-date::before {
  font-family: "Font Awesome 5 Free"!important;
  content: "\f017"!important;
}

カテゴリーごとの記事一覧ページのエントリー日

.archive-entry-header .archive-date::before {
  font-family: "Font Awesome 5 Free"!important;
  content: "\f017"!important;
}

サイドバーの最新記事のエントリー日

.recent-entries-date-link time::before {
  font-family: "Font Awesome 5 Free"!important;
  content: "\f017"!important;
}

関連記事のエントリー日

.related-entries-date-link time::before {
  font-family: "Font Awesome 5 Free"!important;
  content: "\f017"!important;
}

実際の表示イメージ