Sessaaブログでは基本セレクタ、IDセレクタ、classセレクタを使用してデザインをコントロールしています。<body>タグとcontainer, banner, links-left, content, links, footerの6つのIDセレクタ（2005年3月現在）によるページ全体のコントロールを説明します。
body
|
|
||||||||||||||||||||||||||||||||
IDセレクタによるページ全体のデザイン
テンプレートの「シンプルホワイト」を見ると次の設定が定義されています。
font-familyはフォントの種類、backgroundは背景色、margin, paddingはブラウザ枠との間隔です。
font-familyはフォントの種類、backgroundは背景色、margin, paddingはブラウザ枠との間隔です。
body {
font-family: Arial, Helvetica, sans-serif; /* フォントの種類 */
background:#FFF; /* 背景色 */
margin:0px; /* マージン */
padding:0px; /* パッディング */
}
font-family: Arial, Helvetica, sans-serif; /* フォントの種類 */
background:#FFF; /* 背景色 */
margin:0px; /* マージン */
padding:0px; /* パッディング */
}
その他に文字サイズや文字色、背景画像など、ページ全体に反映させたい設定を<body>タグに定義します。
次の例では文字サイズを11pt、文字色を赤、背景画像にback.gifを使用します。
次の例では文字サイズを11pt、文字色を赤、背景画像にback.gifを使用します。
body {
font-size:11pt; /* 文字サイズ */
color:red; /* 文字色 */
background-image:url("http://blogcustomize.seesaa.jp/image/back.gif"); /* 背景画像 */
}
font-size:11pt; /* 文字サイズ */
color:red; /* 文字色 */
background-image:url("http://blogcustomize.seesaa.jp/image/back.gif"); /* 背景画像 */
}
シンプルホワイトは横幅いっぱいにページを表示するデザインです。その他にコンテンツに幅を設定して画面左に寄せる、センターに寄せるようなデザインがあります。それらのコントロールをcontainerのwidth, marginで行います。
ページを左に寄せる
#container{
width:760px; /* コンテンツの幅を760pxに設定 */
}
width:760px; /* コンテンツの幅を760pxに設定 */
}
ページをセンターに寄せる
body{
text-align:center; /* IEでセンタリング */
}
#container{
width:760px;
text-align:left;
margin:0px auto 0px auto; /* Mozilla系ブラウザでセンタリング */
}
text-align:center; /* IEでセンタリング */
}
#container{
width:760px;
text-align:left;
margin:0px auto 0px auto; /* Mozilla系ブラウザでセンタリング */
}
シンプルホワイトにはcontainerの定義がありません。何も設定しない場合は横幅いっぱいに広がります。
bannerは画面上部、サイトのタイトル箇所の設定です。
［メニュー］⇒［デザイン］⇒［コンテンツ］で配置をヘッダーに指定したコンテンツがここに表示されます。
［メニュー］⇒［デザイン］⇒［コンテンツ］で配置をヘッダーに指定したコンテンツがここに表示されます。
シンプルホワイトでは次の設定が定義されています。
#banner{
font-family:arial, Helvetica;
color:#69C;
margin:0px;
width:100%;
padding:10px;
border-bottom:2px dotted #666; /* 線を描画 */
}
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でドット線を描画します。
border-bottomはbanner領域の下側に幅2px、色#666でドット線を描画します。
links-left, linksはそれぞれ左サイドバー、右サイドバーの設定です。
［デザイン］⇒［コンテンツ］で配置を左サイドバー、右サイドバーに指定したコンテンツが表示される箇所です。
［デザイン］⇒［コンテンツ］で配置を左サイドバー、右サイドバーに指定したコンテンツが表示される箇所です。
シンプルホワイトでは次の設定が定義されています。
#links {
font-weight:normal;
width:20%;
float:left;
margin-left: 15px;
margin-right: 5px;
margin-top:25px;
}
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;を定義するとだけ覚えて下さい。
floatにleftが指定されています。これにより他のコンテンツを右側に回り込み表示させます。
ここではブログのメイン箇所（links-left, content, links）にはfloat:left;を定義するとだけ覚えて下さい。
contentは記事を表示するメイン箇所の設定です。
［デザイン］⇒［コンテンツ］で配置をメインに指定したコンテンツが表示される箇所です。
［デザイン］⇒［コンテンツ］で配置をメインに指定したコンテンツが表示される箇所です。
シンプルホワイトでは次の設定が定義されています。
#content {
margin-bottom:30px;
margin-top:25px;
margin-left:10px;
float:left;
width:55%
}
margin-bottom:30px;
margin-top:25px;
margin-left:10px;
float:left;
width:55%
}
footerは画面下部に表示される箇所の設定です。
［デザイン］⇒［コンテンツ］で配置をフッターに指定したコンテンツが表示される箇所です。
［デザイン］⇒［コンテンツ］で配置をフッターに指定したコンテンツが表示される箇所です。
シンプルホワイトでは次の設定が定義されています。
#footer{
clear:left;
width:100%;
}
clear:left;
width:100%;
}
clear:leftはfloat:leftを指定したコンテンツへの回り込みを解除します。
ここではfooterにはclear:left;を定義するとだけ覚えて下さい。
ここではfooterにはclear:left;を定義するとだけ覚えて下さい。