フッター部分の変更
[tag:テーマクッキング]
今回はフッター部分の変更をします。
このテーマはデザイン上footer.thtmlを書き換えています。
ProfessionalCSSとは違いますのでご了承ください。
フッター部分は黒い枠で囲まれてる部分です。
本来は灰色（グレイ）で囲まれてますがここでは解りやすく黒にしています。
これからフッターを変更したい。を参考に見ていきます。
まずデザインを変えて行きましょう。
PtextbookLCR/custom.cssの
/*------------------------------ div#gfotter -----*/
div#container div#gfooter {
clear: both;
（適用されてる回り込みを全て解除する。）
margin: 5px;
（フッターの外側余白）
padding: 0;
（フッターの内側余白）
width:948px;
（フッターの幅）
background: #fcfcfc;
（フッターの背景）
border: 1px solid #cccccc;
（フッターを囲むボーダー線）
color: #333333;
（文字色）
text-align:left;
（文面の開始位置）
}
を見つけてください、該当部分の解説はcustom.cssには書かれてません。
フッターの背景に画像を指定してみましょう。
画像の大きさは縦100px横950pxのPNG画像で名前はfooter.pngです。
このサイズのPNG画像で名前をfooter.pngにすればこの画像でなくても使えます。
backgroundを以下の様に書き換えます。
background: #000000 url(images/custom/footer.png) repeat top left;
これは「背景色を黒色にしてfooter.png画像を左上から繰り返して表示する。」と言う事です。
本来ならここで画像が表示されるのですがここまでの段階では表示されません。
あわてず次に進んでください表示されない理由は次の項目で説明します。
次に
div#container div#footer-copyright {
margin: 0;
padding:5px 10px 5px 10px;
background: #fcfcfc;
color: #000000;
}
を見つけてください。
ここでbackground: #fcfcfc;と指定しています、これが先の画像の表示されない理由です。
div#gfooter の上にdiv#footer-copyright が乗って表示されてる状態なので
画像の上に色を上塗りした感じになってしまってます。
これを修正するにはbackground: #fcfcfc;を
background: transparent;
上記のように修正します、すると以下の画像のようになります。
次はフッターの文字が黒なのでそれを白に変えます。
先の考え方と同じようにリンクの背景色と文字の色を変更します。
ここまでの修正したCSSは
div#container div#gfooter {
clear: both;
margin: 5px;
padding: 0;
width:948px;
background: #000000 url(images/custom/footer.png) repeat top left;
border: 1px solid #cccccc;
color: #ffffff;
text-align:left;
}div#container div#gfooter a {
background: transparent;
text-decoration:none;
color: #ffffff;
}div#container div#gfooter a:hover {
background: transparent;
text-decoration:none;
color: #ff6600;
}div#container div#footer-copyright {
margin: 0;
padding:5px 10px 5px 10px;
background: transparent;
color: #ffffff;
}
となります。
最後に残った右側を修正します、該当CSSは
div#container div#footer-copyright .footerlinks {
float:right;
background: #fcfcfc;
color: #000000;
text-align:right;
}
div#container div#footer-copyright .footerlinks a {
text-decoration:none;
background: #fcfcfc;
color: #333333;
}
div#container div#footer-copyright .footerlinks a:hover {
text-decoration:none;
background: #fcfcfc;
color: #ff6600;
}
この部分の考え方も今までと同じように、背景を修正し該当文字色を白色に変更します。
修正後のCSSと画像は以下のようになります。
div#container div#footer-copyright .footerlinks {
float:right;
background: transparent;
color: #ffffff;
text-align:right;
}
div#container div#footer-copyright .footerlinks a {
text-decoration:none;
background: transparent;
color: #ffffff;
}
div#container div#footer-copyright .footerlinks a:hover {
text-decoration:none;
background: transparent;
color: #ff6600;
}
独り言(´･д･｀)ﾎﾞｿｯ
＜＜フッターの大きさを余白無しにする場合＞＞
div#container div#gfooter のmargin: 5px;をmargin: 0px;にしてください。
その時の画像の横幅サイズは10px増やしてくださいね。
＜＜フッターの画像サイズの決め方の目安＞＞
修正した背景画像の横幅サイズが948pxになってます、これの考え方は
948px=960px-(5px+5px)-(1px+1px)で
画像サイズ＝サイトの幅サイズ－左右余白幅サイズ－ボーダー線幅サイズ
となります。
参考事例
「余白もボーダーも使わないのであれば画像サイズは960px」
「余白は無しで左右に1pxのボーダー線を使うのであれば画像サイズは958px」
「余白を5px使いボーダー線は使わないのであれば画像サイズは950px」
＜＜フッターの高さ（縦サイズ）の決め方について＞＞
ここではフッターの高さ（縦サイズ）は height を使わずmarginの上下余白で
指定していますが height を使って指定しても問題はありません。
その場合に注意すべき点は画像サイズとpaddingとmargin値の指定です。