上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 3FaithBlackのヘッダー部分は、背景(黒のボックス)と、タイトル、ブログ概要から出来ています。

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ボックスここまで)


CSS
(ヘッダーのブロック)
#header{
text-align:left;(テキスト左寄せ)
height:120px;(ボックスブロック高:120px)
margin:0 auto;(外側の空白:上下0px 左右自動)
background:#555 url("") no-repeat center bottom;(背景カラー:#555)
}
  :
  :
  :
/* ヘッダー
------------------------------------------------------------ */
(ヘッダーブロック内にある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)
}


 このような内訳です。実際のボックスは、以下のようなイメージになっています。

div#header
H1ブログタイトル

p.intro概要文(width:500px;)



 まずは、CSSを色々いじってみて、色調や文字サイズなどをカスタマイズしてみて下さい。
 以下では、バックグランドイメージを設定する方法も解説しています。ちなみに、「3FaithBlack」のデフォルトの横幅は「960px」x「120px」となっています。
Faith系テンプレート・ヘッダーカスタマイズ



ヘッダー内でのレイアウトについて

 文字のレイアウトは、「padding」或いは「margin」の余白を利用して配置しています。直接座標を与えるのではなく、文字間の隙間を大きめに空け、調節することで、相対的に座標を与えています。
 ですから、見かけ上は見えていませんが、実際の「H1タグ(ブロック)」上図のように「H1タグ」はめいいっぱい横に広がっています。
 実はこの方法では、上手く広告や、追加のアイテムをかっこよくレイアウトして入れるのは難しい状態です。

 次の記事で、「positionタグ」を利用した、絶対座標でヘッダー内に自由にアイテムを配置する方法を紹介します。
 より高機能、高アクセスビリティ的なサイトを目指す場合は、こちらも参考に。

[3Faith徹底改造]ヘッダーアイテムをレイアウト


■メニューページへ戻る
3FaithBlack徹底攻略・はじめに
このエントリーをはてなブックマークに追加
Fri.06.17.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。