このページでは、Vaster2のヘッダーのカスタマイズ方法を説明する。

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

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

ヘッダーのカスタマイズ

ヘッダー

ヘッダーとは、メニューバーから上の部分のこと。

多分、人によって指し示す部分が変わってくるだろうが、当ページでは画像で示した範囲で定義する。

なお、Vaster2のヘッダーのCSSは「/*   ヘッダー 」で検索すると見つかる。

ヘッダーのCSS

上記が Vaster2のヘッダーのCSSに説明を加えたもの。

基本的には説明の部分を変えていけば、好みに合わせて変更できる。

「.Header」と「#header-inner」の違いが分かりづらいので、背景色を設定してみた。

グレーが「.Header」で、ホワイトが「#header-inner」の範囲となる。

また、「#header-inner」はレイアウトから背景画像を追加した時に画像が表示される範囲でもある。

ヘッダー上のボーダー（罫線）を消す

［方法１］サイズを0に設定して消す

・「.Header{」で検索する
・「.Header{}」の中の「border-top:3px;」を「border-top:0px;」に変更

逆に数値を増やすとボーダーは太くなっていく

［方法２］コードを削除して消す

・「.Header{」で検索する
・「.Header{}」の中の「border-top:3px solid $(header.topborder.color);」を消す

この方法を使うと復元するときに、また打ち直す必要がある

ヘッダー下の余白を無くす

［方法］

・「.Header{」で検索する
・「.Header{}」の中の「padding-bottom: 30px;」を「padding-bottom: 0px;」に変更
　・もしくは「padding-bottom: 30px;」を消す

要領はボーダーと一緒

ヘッダーの縦幅を変更する

［方法１］height（高さ）を指定して変更する

・「.Header{」で検索する
・「.Header{}」の中に「height:数値;」を追加する（画像は200pxで設定）

［方法２］padding（内側の余白）を指定して変更する

・「.Header{」で検索する
・「.Header{}」の中の「padding」の設定を変更する
　・（例）「padding-top: 30px;」を追加して、下と同じ分だけ上の余白を増やす

備考：スタイルシートリファレンス（padding）

ヘッダー内側の縦幅を変更する

［方法１］height（高さ）を指定して変更する

・「#header-inner{」で検索する
・「#header-inner{}」の中に「height:数値;」を追加する（画像は200pxで設定したもの）

［方法２］padding（内側の余白）を指定して変更する

・「#header-inner{」で検索する
・「#header-inner{}」の中の「padding」の設定を変更する
　・（例）「padding-bottom:20px;」を追加して、上と同じ分だけ下の余白を増やす

ヘッダー内側の横幅を変更する

［方法］

・「#header-inner{」で検索する
・「#header-inner{}」の中の「width:数値px;」の数値を変更する（画像は500pxで設定したもの）

背景画像を設定する

［例］ヘッダー背景にパターン柄の背景画像を設定するCSS

【方法】

・背景画像をアップロードしてURLをコピーする
・「.Header{」を検索する
・「.Header{}」の中に、上記CSSの追記部分を書き込む

備考

ヘッダーの背景画像について

ヘッダーに設定した背景画像

ここで紹介した背景画像の設定方法を使うと、ヘッダー全体に背景画像を設定することができる。

この方法であれば初期設定の範囲に収まって表示されるため、レイアウトが崩れることもない。

なお、この設定で「レイアウト」から背景画像を追加すると、背景画像が二重になって表示される。

レイアウトから設定した背景画像

Bloggerの「レイアウト」から背景画像を追加した場合は「#header-inner{}」の範囲に設定される。

また、Bloggerの背景画像の設定によって、ブログタイトルの色も変わるように設定されているらしい。

なお、この方法だと「.Header{}」と「#header-inner{}」の余白設定の影響を受けてしまう。

そのため、レイアウトから設定する場合はヘッダーの余白調整が必要になる。