Blogger Labo：【Vaster2】フッターのカスタマイズ

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

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

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


フッターのカスタマイズ


フッター

フッターとは、ページ全体の下の部分のこと。

フッターのCSS


 フッター全体の設定 

.footer-outer{
   color:#999;　文字色（#999）
   width:100%;　横幅（100%）
   clear:both;　回り込みを防ぐ
   font-size:14px;　文字サイズ（14px）
   padding-top:40px;　上内側の余白（40px）
   padding-bottom:30px;　下内側の余白（30px）
}

 フッターのリンクの設定 

.footer-outer a{
   color:#999;　文字色（#999）
}

 カーソル通過時のフッターのリンクの設定 

.footer-outer a:hover{
   text-decoration:none;　文字の装飾（なし）
}

※（）内は初期値

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

基本的には「/*   フッター」で検索して中身を書き変えれば、好みに合わせて変更できる。

背景色を設定する


【方法】

・「.footer-outer{」で検索する
・「.footer-outer{}」の中に「background-color:任意の色;」を書き加える

備考：カラーコード

罫線をつける


【方法】

・「.footer-outer{」で検索する
・「.footer-outer{}」の中に「border:値;」を書き加える

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

背景画像を設定する



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


.footer-outer{
   color:#999;
   width:100%;
   clear:both;
   font-size:14px;
   padding-top:40px;
   padding-bottom:30px;
   background-image: url("背景画像のURL");　/*　フッターの背景画像　*/
   background-clip:border-box;　/*　背景画像の表示形式　*/
}

※赤字の部分を追記する

【方法】

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