3FaithBlackのヘッダー部分は、背景（黒のボックス）と、タイトル、ブログ概要から出来ています。
この、味も素っ気もない部分を改造していきます。基本的な「色、背景画像」のカスタマイズ、アイテムの配置方法などを工夫してみて下さい。
HTML
CSS
このような内訳です。実際のボックスは、以下のようなイメージになっています。
まずは、CSSを色々いじってみて、色調や文字サイズなどをカスタマイズしてみて下さい。
以下では、バックグランドイメージを設定する方法も解説しています。ちなみに、「3FaithBlack」のデフォルトの横幅は「960px」x「120px」となっています。
Faith系テンプレート・ヘッダーカスタマイズ
ヘッダー内でのレイアウトについて
文字のレイアウトは、「padding」或いは「margin」の余白を利用して配置しています。直接座標を与えるのではなく、文字間の隙間を大きめに空け、調節することで、相対的に座標を与えています。
ですから、見かけ上は見えていませんが、実際の「H1タグ（ブロック）」上図のように「H1タグ」はめいいっぱい横に広がっています。
実はこの方法では、上手く広告や、追加のアイテムをかっこよくレイアウトして入れるのは難しい状態です。
次の記事で、「positionタグ」を利用した、絶対座標でヘッダー内に自由にアイテムを配置する方法を紹介します。
より高機能、高アクセスビリティ的なサイトを目指す場合は、こちらも参考に。
[3Faith徹底改造]ヘッダーアイテムをレイアウト
■メニューページへ戻る
3FaithBlack徹底攻略・はじめに
この、味も素っ気もない部分を改造していきます。基本的な「色、背景画像」のカスタマイズ、アイテムの配置方法などを工夫してみて下さい。
デフォルトのHTML、CSS詳細
HTML
<div id="header">（ヘッダーdivブロック）
<h1><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
（↑）H1タグ・ブロック・ここにタイトル表示
<p class="intro"><%introduction></p>
（↑）pタグ・ブロック・ここに概要文表示
</div>（ヘッダーdivボックスここまで）
<h1><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
（↑）H1タグ・ブロック・ここにタイトル表示
<p class="intro"><%introduction></p>
（↑）pタグ・ブロック・ここに概要文表示
</div>（ヘッダーdivボックスここまで）
CSS
（ヘッダーのブロック）
#header{
text-align:left;（テキスト左寄せ）
height:120px;（ﾎﾞｯｸｽブロック高：120px）
margin:0 auto;（外側の空白：上下0px 左右自動）
background:#555 url("") no-repeat center bottom;（背景カラー：＃５５５）
}
：
：
：
/* ヘッダー
------------------------------------------------------------ */
（ヘッダーブロック内にあるH1タグ）
#header h1{
font-size:16px;（フォントサイズ：16px）
margin: 0 0 0;（外側の空白：すべて0px）
padding:10px 20px;（内側の空白：上下10px 左右20px）
}
（ヘッダーブロック内にあるH1タグの、aタグ（ハイパーリンク））
#header h1 a{
color:#fff;（フォントカラー：＃FFF（白））
border:none;（ボーダー：無し）
}
（ヘッダーブロック内にあるH1タグの、aタグ（ハイパーリンク）マウスが乗ったとき）
#header h1 a:hover{
color:#ccf;（フォントカラー：＃CFF（水色））
}
（概要文のpブロック（クラス名：intro））
.intro{
font-size:12px;（フォントサイズ：12px）
width:500px;（p.introブロック横幅：500px）
padding:10px;（内側の空白：上下左右10px）
color:#fff;（フォントカラー：＃FFF（白））
margin:10px 20px;（外側の余白：上下10px 左右20px）
}
#header{
text-align:left;（テキスト左寄せ）
height:120px;（ﾎﾞｯｸｽブロック高：120px）
margin:0 auto;（外側の空白：上下0px 左右自動）
background:#555 url("") no-repeat center bottom;（背景カラー：＃５５５）
}
：
：
：
/* ヘッダー
------------------------------------------------------------ */
（ヘッダーブロック内にあるH1タグ）
#header h1{
font-size:16px;（フォントサイズ：16px）
margin: 0 0 0;（外側の空白：すべて0px）
padding:10px 20px;（内側の空白：上下10px 左右20px）
}
（ヘッダーブロック内にあるH1タグの、aタグ（ハイパーリンク））
#header h1 a{
color:#fff;（フォントカラー：＃FFF（白））
border:none;（ボーダー：無し）
}
（ヘッダーブロック内にあるH1タグの、aタグ（ハイパーリンク）マウスが乗ったとき）
#header h1 a:hover{
color:#ccf;（フォントカラー：＃CFF（水色））
}
（概要文のpブロック（クラス名：intro））
.intro{
font-size:12px;（フォントサイズ：12px）
width:500px;（p.introブロック横幅：500px）
padding:10px;（内側の空白：上下左右10px）
color:#fff;（フォントカラー：＃FFF（白））
margin:10px 20px;（外側の余白：上下10px 左右20px）
}
このような内訳です。実際のボックスは、以下のようなイメージになっています。
まずは、CSSを色々いじってみて、色調や文字サイズなどをカスタマイズしてみて下さい。
以下では、バックグランドイメージを設定する方法も解説しています。ちなみに、「3FaithBlack」のデフォルトの横幅は「960px」x「120px」となっています。
Faith系テンプレート・ヘッダーカスタマイズ
ヘッダー内でのレイアウトについて
文字のレイアウトは、「padding」或いは「margin」の余白を利用して配置しています。直接座標を与えるのではなく、文字間の隙間を大きめに空け、調節することで、相対的に座標を与えています。
ですから、見かけ上は見えていませんが、実際の「H1タグ（ブロック）」上図のように「H1タグ」はめいいっぱい横に広がっています。
実はこの方法では、上手く広告や、追加のアイテムをかっこよくレイアウトして入れるのは難しい状態です。
次の記事で、「positionタグ」を利用した、絶対座標でヘッダー内に自由にアイテムを配置する方法を紹介します。
より高機能、高アクセスビリティ的なサイトを目指す場合は、こちらも参考に。
[3Faith徹底改造]ヘッダーアイテムをレイアウト
■メニューページへ戻る
3FaithBlack徹底攻略・はじめに
スポンサーリンク
Fri.06.17.2011
Comment
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
