グループ化する

＜＜　前のページ　スタイルシートの適用

スタイルシートの定義の前に、まずは各部分をグループ分けします。
タイトルとサイト説明文をヘッダ、エントリー一覧をコンテンツ、コピーライト部分をフッタ、以上各グループ全体をコンテナと名づけます。(下図参照)

グループ分け

最初は、グループ全体をまとめたコンテナ(container)のスタイルを定義していきましょう。

まずはページ全体を中央寄せにします。
そしてコンテナの横幅を750pxにします。
（今後の説明のため、body全体の背景色#eeffffも設定します。）

テンプレート→スタイルシートを選択し、以下のソースを記入、保存します。

body {
text-align:center;
background-color:#eeffff;
}

#container {
width:750px;
}

次に、コンテナ部分をブラウザに認識させるため、インデックスのテンプレートに以下を追記します。（太字部分）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
</head>

<body>
<div id="container">
<h1><$MTBlogName$></h1>
<h2><$MTBlogDescription$></h2>

<MTEntries lastn="5">
<h3><$MTEntryTitle$></h3>
<$MTEntryBody$>
</MTEntries>

Copyright (C) since 2006 <$MTBlogName$> All rights reserved.
</div>
</body>
</html>

再構築し、実際にブラウザで確認します。

中央寄せ

全てが横幅750PX、中央寄せで表示されるようになりました。

次のページ　＞＞　各グループをスタイルシートで装飾する

▲ページトップへ