Blogger Labo：【Vaster2】トップページのタイトル・要約文のカスタマイズ

このページでは、Vaster2のトップページのタイトルと要約文のカスタマイズ方法を説明する。

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

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


トップページの記事タイトルのカスタマイズ


トップページの記事タイトル

トップページの記事タイトルのCSS


 トップページの記事タイトルの設定 

.article-list-title h2{
   color:#666;　文字色（#666）
   font-size:23px;　文字サイズ（23px）
}

※（）内は初期値

上記が Vaster2のトップページの記事タイトルのCSSに説明を加えたもの。

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

記事リストの要約文（抜粋）のカスタマイズ


記事リストの要約文

記事リストの要約文のCSS


 記事リストの要約文（抜粋）の設定 

.snippet{
   font-size:14px !important;　文字サイズ（14px）※!importantを書き加える
   padding:0 !important;　余白（0）
   color:#888;　文字色（#888）
   margin-top:15px !important;　上の余白（15px）※タイトルとの間隔
   margin-bottom: 5px;　下の余白（5px）
   line-height:1.4em !important;　行間（1.4em）
   word-break:break-all;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
}

※（）内は初期値

上記が Vaster2の記事リストの要約文（抜粋）のCSSに説明を加えたもの。

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

なお、文字サイズについては「!important」を書き加えなければ正しく反映されない。

ちなみに書き加える前は「.main-outer p{}」の値が反映される（これはコメント表示に影響しているよう）。

また、要約文の下の余白については「margin-bottom: 5px;」の値で変化する。

デフォルトの文字サイズなら「margin-bottom: 0px;」で見た目は安定すると思う。