Blogger Labo：【Vaster2】サイドバーの見出しのカスタマイズ

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

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

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


サイドバーの見出しのカスタマイズ


サイドバーの見出し

サイドバーの見出しのCSS


 サイドバーの見出しの設定 

.sidebar h2,h3,h4{
   padding:5px 0 5px 10px;　上・右・下・左の内側の余白
   font-size:20px;　見出しの文字サイズ（20px）
   font-weight:700;　文字の太さ（700）
   border-left: 2px solid $(sidebarh2.border);　左線（2px、色はテーマデザイナー設定）
   color:$(sidebarh2.color);　文字の色（テーマデザイナー設定）
   margin-bottom: 20px;　下外側の余白（20px）
   margin-top: 30px;　上外側の余白（30px）
}

※（）内は初期値

上記が Vaster2のサイドバーの見出しのCSSに説明を加えたもの。

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

ただし、この設定はコメントの見出しなどにも影響しているようだ。

よって、サイドバーの見出しのみを設定したい場合は、別にCSSを書き加える必要がある。

サイドバーの見出しのみのカスタマイズ


Bloggerのガジェットの見出し設定


［例］記事ページのh2（見出し）のような見出しにする


Bloggerのガジェット

.sidebar h2{
   font-size:15px;　/*文字サイズ*/
   font-weight:700;　/*文字の太さ*/
   padding: .5em .75em;　/*余白（背景の幅）*/
   margin-bottom: 30px;　/*下外側の余白*/
   background:$(entryh2.background);　/*背景色*/
   color:$(entryh2.color);　/*文字色*/
}

【方法】

・「.sidebar h2,h3,h4{」で検索
・「.sidebar h2,h3,h4{}」の下辺りに「.sidebar h2{}」を追加
・「.sidebar h2{}」の中身を例のように設定する

※Bloggerのガジェットの見出しはh2で設定されているらしい

Vaster2のガジェットの見出し設定


［例］記事ページのh2（見出し）のような見出しにする


Vaster2のガジェット

.sidebar h4{
   font-size:15px;
   font-weight:700;
   padding: .5em .75em;
   margin-bottom: 30px;
   background:$(entryh2.background);
   color:$(entryh2.color);
}

【方法】

・「.sidebar h2,h3,h4{」で検索
・「.sidebar h2,h3,h4{}」の下辺りに「.sidebar h4{}」を追加
・「.sidebar h4{}」の中身を例のように設定する

 ※Vaster2のガジェットの見出しはh4で設定されているらしい