このページでは、Vaster2の公開日・公開日アイコンのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら

公開日のカスタマイズ

公開日のCSS

上記が Vaster2のトップ・記事ページに表示される公開日のCSSに説明を加えたもの。

基本的には「.post-timestamp {」で検索して中身を書き変えていけば、好みに合わせて変更できる。

公開日の下線を消す

公開日の下線は「.post-timestamp {}」の中に下線を消すコードを入れても消すことができない。

消すには「.post-timestamp {}」の下の方に「.published{text-decoration: none;}」を書き加える。

どうやら公開日の下線は「.published」で指定されているらしい。

参考：すたすた式

公開日アイコンのカスタマイズ

公開日アイコン

公開日アイコンとは、公開日の横に付いている「」の時計マークのことを指す。

これらはフォントアイコンと呼ばれており、設定を書き換えれば好きなものを使うことができる。

トップページの公開日アイコンを変更する

トップページの公開日アイコンは「<div class='article-list-title'>」以下の「clock-o」になる。

この「clock-o」を好みのアイコンの指定にすれば変更が可能になる（例：カレンダー「calendar」）。

位置については「<div class='article-list-title'>」か「clock」で検索すると分かりやすい。

参考：すたすた式
備考：フォントアイコン一覧

トップページの公開日アイコンを消す

トップページの公開日アイコンを消すには「<i aria-hidden='true' class='fa fa-clock-o'/>」を削除すればいい。

トップページの公開日アイコンの横に文字を入れる

文字を入れたい場合は、アイコンのコードの下に「<span>文字列</span>」を加えればよい。

ちなみに文字列の部分にはスペースも反映される。

記事ページの公開日アイコンを変更する

記事ページの公開日アイコンは「<p class='kousin'>」以下の「clock-o」になる。

この「clock-o」を好みのアイコンの指定にすれば変更が可能になる（例：メモ「edit」）。

消す・文字列を加える方法は、トップページのものと要領が同じなので割愛する。

位置については「<p class='kousin'>」か「clock」で検索すると分かりやすい。

備考：フォントアイコン一覧