Blogger Labo：【Vaster2】ページ背景のカスタマイズ

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

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

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


ページ背景のカスタマイズ


ページ背景のCSS


 ページ背景の設定 

.body-wrapper{
   background-color:$(body.background.color);　ページ全体の背景色（テーマデザイナー設定）
}

※（）内は初期値

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

基本的には「.body-wrapper{」で検索すれば該当部分が見つかるが、初期設定では背景色以外の指定がない。

なお、背景色はここで指定するか、テーマデザイナーで変更することができる。

ページ背景画像を設定する



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


.body-wrapper{
background-color:$(body.background.color);
background-image: url("背景画像のURL");　/*　ページ全体の背景画像　*/
background-clip:border-box;　/*　背景画像の表示形式　*/
}

【方法】

・背景画像をアップロードする
・「.body-wrapper{」を検索する
・「.body-wrapper{}」を上記のCSSのように書き換える
・背景画像のURLをコピーして、上記CSSの「背景画像のURL」に貼り付ける

※初期設定ではサイドバーの背景色が設定されていないので、サイドバーの部分は透ける

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