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で設定されているらしい