【Cocoon】日付表示をカスタマイズする

日付表示

WordPressテーマ Cocoonの「日付表示」のカスタマイズについてまとめてみました。

テーマCocoonの日付表示

WordPressテーマ Cocoonで使われている「日付表示」は、次の様になっています。

ご覧の通りフォントサイズが若干小さめとなっています。

と言う事で、フォントサイズをもう少し大きめのサイズに、時計のアイコンを別のアイコンにそれぞれ変更したいと思います。

日付表示のカスタマイズ

今回のカスタマイズ内容は、「日付表示」を大きめのフォントサイズに変更して、2種類の時計アイコンを別アイコンに変更するカスタマイズです。

カスタマイズ内容

「カテゴリーラベル」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■日付のカスタマイズ
************************************/
.date-tags{
  line-height: 1.4; /*行間設定*/
  color: #666; /*文字色*/
}
.post-date, .post-update{
  font-size: 14px; /*フォントサイズ*/
  padding-right: 4px; /*右余白*/
  display: inline; /*横並びで縦中央揃え*/
}
.post-date::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f093"; /*fa-uploadアイコン*/
  padding-right: 4px; /*右余白*/
}
.post-update::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f148"; /*fa-level-upアイコン*/
  padding-right: 4px; /*右余白*/
}

カスタマイズ後の日付表示

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「日付表示」は次のようになりました。

フォントサイズとフォントカラー、表示位置を若干調整しました。

また、ブログのアップロード日付表示のアイコンを「fa-upload」に、ブログ修正のアップロード日付表示のアイコンを「fa-level-up」に変更しました。

最後に

元々デフォルトではフォントサイズが小さかったので、大きくするだけでも意味はあると思います。

アイコンは自分の好みに設定すると良いでしょう。