Blogger Labo：【Vaster2】記事ページの見出しのカスタマイズ

このページでは、Vaster2の記事ページの見出しのカスタマイズ方法を説明する。

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

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


記事ページの見出しのカスタマイズ


記事ページの見出し

記事ページの見出しのCSS


 投稿タイトル（h1）の設定 

.main-outer h1{
   font-size:28px;　文字サイズ
   line-height:1.6em;　行間
   margin-bottom:30px;　下外側の余白
}

 見出し（h2）の設定 

.entry-content h2{
   padding: .5em .75em;　上下・左右の余白（文字の開始位置と帯の幅）
   margin-bottom: 30px;　下外側の余白
   background:$(entryh2.background);　背景色（帯の色）
   color:$(entryh2.color);　文字色
}

 小見出し（h3）の設定 

.entry-content h3{
   font-size:20px;　文字サイズ
   padding:15px 0 15px 10px;　上・右・下・左の余白
   border-left: 8px solid $(entryh3.border);　左線
   color:$(entryh3.color);　文字色
}

上記が Vaster2の記事ページの見出しのCSSに説明を加えたもの。

基本的には「/*   記事のフォント」で検索して、上記CSSの中身を書き換えれば変更することができる。

なお、初期設定では準見出し（h4）の設定が無く、「.sidebar h2,h3,h4{}」の設定となっている。

各見出しを装飾する


見出しのデザインについては下記のサイトを参考にすると分かりやすい。

・サルワカ（CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選）

準見出し（h4）を設定する


準見出し（h4）に個別に設定するには、下記のように「.entry-content h4{}」を設けて中身を設定する。

.entry-content h4{
   padding:5px 0 5px 10px;
   font-size:20px;
   font-weight:700;
   border-left: 2px solid #008ec2;
   color:#000000;
   margin-bottom: 20px;
   margin-top: 30px;
}

※中身は「.sidebar h2,h3,h4{}」から引用

見出し（h1）を設定する


見出し（h1）の周辺に余白などを設定したい場合は、下記のように「h1.entry-title{}」を設けて中身を設定する。

h1.entry-title{
margin-top:10px;　/*　h1の上外側の余白　*/
margin-bottom:10px;　/*　h1の下外側の余白　*/
}