ヘッダー部分の変更。
[tag:テーマクッキング]
本来ならレイアウトデザインについて書くのがセオリーなのですが
お問い合わせが多いので先にヘッダーの変更を書くことにしました。
はじめから制作する場合はレイアウトデザインを決めるのが先です。
前記事で今回はヘッダーとフッターの変更と書きましたがかなりの
ボリュームになったので今回はヘッダー部分の変更だけになりました。
ヘッダーは下記の画像の黒い枠で囲まれてる領域です。
本来は灰色（グレイ）で囲まれてますがここでは解りやすく黒にしています。
これから
ヘッダーを変更したい。
ヘッダーのサイト名（タイトル）を変更したい。
ヘッダーのスローガンを変更したい。
を参考に見ていきます。
PtextbookLCR/custom.cssの
/* ヘッダコンテナ */
div#container div#header {
height: 150px;
（ヘッダーの高さ）
margin: 5px;
（ヘッダーの外側の余白）
padding: 0;
（ヘッダーの内側の余白）
background: #ffffff;
（ヘッダーの背景）
border: 1px solid #cccccc;
（ヘッダーを囲むボーダー線）
color: #000000;
（ヘッダー内の文字の色）
}
を見つけてください、該当部分の解説はcustom.cssには書かれてません。
まず背景に画像を指定してみましょう。
画像の大きさは縦180px横950pxのPNG画像で名前はheader.pngです。
このサイズのPNG画像で名前をheader.pngにすればこの画像でなくても使えます。
backgroundを以下の様に書き換えます。
background: #ffffff url(images/custom/header.png) no-repeat top left;
これは「背景色を白色にしてheader.png画像を左上から繰り返さずに表示する。」です。
このままだと高さが足りないので
height: 180px;
とします、ここまでで問題なければ以下の画像のようになってるはずです。
文字色も黒のままだと背景に溶け込んでしまうので白色に変更します。
ボーダーは好みの色を指定するか0pxとして消すことが出来ます。
今回は1pxの灰色ボーダーで囲うことにしました。
書き換えた結果は以下のようになります。
/* ヘッダコンテナ */
div#container div#header {
height: 180px;
margin: 5px;
padding: 0;
background: #ffffff url(images/custom/header.png) no-repeat top left;
border: 1px solid #cccccc;
color: #ffffff;
}
次はサイトスローガンを変更します。
残念ながらスローガンの文字の色は黒色なので背景に溶け込んでしまってわかり難いですね。
ここは白色に変えて目立たせましょう。
PtextbookLCR/custom.cssの
/* スローガン */
div#container div#header p.site_slogan {
margin: 0;
（スローガンの外側余白）
padding: 45px 10px 0 0;
（スローガンの内側余白）
background: transparent;
（スローガンの背景）
border: 1px solid #cccccc;
（スローガンを囲むボーダー線）
color: #333333;
（スローガンの文字色）
text-align: right;
（スローガンの開始位置）
}
を見つけてください、該当部分の解説はcustom.cssには書かれてません。
まず文字の色を白色に変えます。
color: #ffffff;
文字が白色になり見やすくなりました。
次にスローガンの位置を変更したいのですがどこを変更するのか？
答えは
padding: 45px 10px 0 0;
text-align: right;
このプロパティーを変更します。
ためしにtext-align: left;と書き換えてみてください、スローガンの文字が
ロゴ枠のすぐ横に下のラインに沿って動きましたね。
今度はtext-align: right;に戻してpadding: 90px 10px 0 0;と書き換えたら
ラインごと右下の方に移動しましたね。
スローガンの下のライン（正確にはdiv#header p.site_sloganを囲むボーダー）はスローガンの
位置を決めやすくするために指定しています。
今回は右上に指定します。
marginやpaddingなど0 0 0 0で指定されるものは上右下左の指定になります。
という事で
padding: 10px 10px 0 0;
text-align: right;
これは右側から表示して上から10px右から10pxの位置にスローガンを表示すると言うことです。
場所が決まったのでラインも消してしまいましょう。
書き換えた結果は以下の様になります。
/* スローガン */
div#container div#header p.site_slogan {
margin: 0;
padding: 10px 10px 0 0;
background: transparent;
border: 0px solid #cccccc;
color: #ffffff;
text-align: right;
}
表示は以下の画像のようになりましたか？
さて最後はロゴを変更しましょう。
ロゴの画像は横200px縦60pxのPNG画像です。
いままで同様灰色のラインで囲っている領域がロゴを表示する部分です。
PtextbookLCR/custom.cssの
/* サイト名 */
div#container div#header h1.site_name {
display: inline;
margin: 15px 0 0 15px;
（ロゴの外側余白）
padding: 0;
（ロゴの内側余白）
float: left;
（場所指定）
border: 1px solid #cccccc;
（ロゴを囲むライン線）
color: #000000;
（ロゴの文字色）
}
を見つけてください、くどいですが該当部分の解説はcustom.cssには書かれてません（笑
まずはPNGで制作した画像をPtextbookLCR/imeges/customにアップロードします。
名前は必ずlogo.pngにして透過PNG形式で保存して、
もしテキストにしたい場合やpng以外の画像形式を使いたい時はProCSS逆引きCSS辞典の
ヘッダーのサイト名（タイトル）を変更したい。を参考にしてください。
ロゴをアップロードしたらロゴがちゃんと表示されましたか？
位置決めは先のスローガンと同様の考え方です。
ボーダーも必要ありませんね。
書き換えた結果は以下の様になります。
/* サイト名 */
div#container div#header h1.site_name {
display: inline;
margin: 15px 0 0 15px;
padding: 0;
float: left;
border: 0px solid #cccccc;
}
ここまでの内容をうまく出来れば表示は以下の画像のようになるはずです。
独り言(´･д･｀)ﾎﾞｿｯ
ここでの独り言はさらに長くなるのでテーマクッキング隠し味で紹介するとして
問題は透過PNG画像の処理についてです。
IE7やFFなどでは問題なく透過PNGを透過してくれるのですがIE6は・・・ダメ！
IE6以前を無視するのであれば問題ないのですがそうでない場合は透過GIFを使うか
テキストタイトルにするか・・・
もしくは強引にheader.png画像から該当部分を切り抜いてロゴとするか・・・
さらに力技の透過GIFを透明のまま使いheader.pngの該当部分にタイトルを直書きするか・・・
どちらにしてもデフォルトでProCSSに透過PNGjsを組み込まれるかもしれません
それまでは知恵を絞って回避しましょう（TT)ミンナクロウシテマス。