IDセレクタによるページ全体のデザイン

Sessaaブログでは基本セレクタ、IDセレクタ、classセレクタを使用してデザインをコントロールしています。<body>タグとcontainer, banner, links-left, content, links, footerの6つのIDセレクタ(2005年3月現在)によるページ全体のコントロールを説明します。

body
container
banner
links-left
conentlinks
footer
body-ページ全体
container-コンテンツ全体
banner-ヘッダー
links-left-左サイドバー
content-メイン
links-右サイドバー
footer-フッター

1. <body>タグによるページ全体のコントロール

テンプレートの「シンプルホワイト」を見ると次の設定が定義されています。
font-familyはフォントの種類、backgroundは背景色、margin, paddingはブラウザ枠との間隔です。

body {
font-family: Arial, Helvetica, sans-serif; /* フォントの種類 */
background:#FFF; /* 背景色 */
margin:0px; /* マージン */
padding:0px; /* パッディング */
}

その他に文字サイズや文字色、背景画像など、ページ全体に反映させたい設定を<body>タグに定義します。
次の例では文字サイズを11pt、文字色を赤、背景画像にback.gifを使用します。

body {
font-size:11pt; /* 文字サイズ */
color:red; /* 文字色 */
background-image:url("http://blogcustomize.seesaa.jp/image/back.gif"); /* 背景画像 */
}

2. container IDによるコンテンツ全体のコントロール

シンプルホワイトは横幅いっぱいにページを表示するデザインです。その他にコンテンツに幅を設定して画面左に寄せる、センターに寄せるようなデザインがあります。それらのコントロールをcontainerのwidth, marginで行います。

ページを左に寄せる
#container{
width:760px; /* コンテンツの幅を760pxに設定 */
}

ページをセンターに寄せる
body{
text-align:center; /* IEでセンタリング */
}
#container{
width:760px;
text-align:left;
margin:0px auto 0px auto; /* Mozilla系ブラウザでセンタリング */
}

シンプルホワイトにはcontainerの定義がありません。何も設定しない場合は横幅いっぱいに広がります。

3. banner IDによるヘッダー定義

bannerは画面上部、サイトのタイトル箇所の設定です。
[メニュー]⇒[デザイン]⇒[コンテンツ]で配置をヘッダーに指定したコンテンツがここに表示されます。

[デザイン]⇒[コンテンツ]

[コンテンツ欄]

シンプルホワイトでは次の設定が定義されています。

#banner{
font-family:arial, Helvetica;
color:#69C;
margin:0px;
width:100%;
padding:10px;
border-bottom:2px dotted #666; /* 線を描画 */
}

widthに100%が指定されているのでcontainerまたはbodyで指定した幅まで広げます。
border-bottomはbanner領域の下側に幅2px、色#666でドット線を描画します。

4. links-left, links IDによるサイドバー定義

links-left, linksはそれぞれ左サイドバー、右サイドバーの設定です。
[デザイン]⇒[コンテンツ]で配置を左サイドバー、右サイドバーに指定したコンテンツが表示される箇所です。

シンプルホワイトでは次の設定が定義されています。

#links {
font-weight:normal;
width:20%;
float:left;
margin-left: 15px;
margin-right: 5px;
margin-top:25px;
}

widthに20%が指定されているのでcontainerまたはbodyで指定した幅の20%まで広げます。
floatにleftが指定されています。これにより他のコンテンツを右側に回り込み表示させます。
ここではブログのメイン箇所(links-left, content, links)にはfloat:left;を定義するとだけ覚えて下さい。

5. content IDによるメイン定義

contentは記事を表示するメイン箇所の設定です。
[デザイン]⇒[コンテンツ]で配置をメインに指定したコンテンツが表示される箇所です。

シンプルホワイトでは次の設定が定義されています。

#content {
margin-bottom:30px;
margin-top:25px;
margin-left:10px;
float:left;
width:55%
}

6. footer IDによるフッター定義

footerは画面下部に表示される箇所の設定です。
[デザイン]⇒[コンテンツ]で配置をフッターに指定したコンテンツが表示される箇所です。

シンプルホワイトでは次の設定が定義されています。

#footer{
clear:left;
width:100%;
}

clear:leftはfloat:leftを指定したコンテンツへの回り込みを解除します。
ここではfooterにはclear:left;を定義するとだけ覚えて下さい。
トップページへ戻る

サイトマップ

Seesaaブログのカスタマイズ > スタイルシート カスタマイズ > ページ全体のデザイン
スタイルシート カスタマイズ

スタイルシート作成ツール

HTMLカスタマイズ
サイト全体

記事コンテンツ

コメント、トラックバック
新着記事

カテゴリ

最近のコメント、トラックバック

検索ページ

その他