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の追記部分を書き込む