Blogger Labo:【Vaster2】公開日・公開日アイコンのカスタマイズ

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

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

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


公開日のカスタマイズ


トップページの公開日
記事ページの公開日

公開日のCSS


 トップ・記事ページの公開日の設定 

.post-timestamp {
   font-size:14px !important; 文字サイズ(14px)※アイコンのサイズも変わる
   margin-left: initial; 左の余白(初期値)
   opacity:0.7; 不透明度(0.7)
   color:#888; 文字色(#888)
   padding-bottom:2px !important; 下の余白(2px)
   margin-right: 15px !important; 右の余白(15px)
   display:inline-block;
   margin-top:0; 上の余白(0)
}

※()内は初期値

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

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

公開日の下線を消す



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

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

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

参考:すたすた式

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


公開日アイコン

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

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

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



<div class='article-list-title'>
   <p class='post-timestamp'>
      <i aria-hidden='true' class='fa fa-clock-o'/> ※赤字の部分を変更する

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

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

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

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

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



<div class='article-list-title'>
   <p class='post-timestamp'>
      <i aria-hidden='true' class='fa fa-clock-o'/> ※赤字の部分を消す

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

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



<div class='article-list-title'>
   <p class='post-timestamp'>
      <i aria-hidden='true' class='fa fa-clock-o'/>
      <span>文字列</span> ※赤字の部分を加える

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

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

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



<p class='kousin'>
   <span class='post-timestamp'>
      <i aria-hidden='true' class='fa fa-clock-o'/> ※赤字の部分を変更する

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

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

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

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

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