各グループをスタイルシートで装飾する
＜＜ 前のページ グループ化する
インデックステンプレートのソースの各部分をグループ化します。
ソースが長くなってきましたが、太字とコメント文を追加しただけです。コメント文とは、<!-- と -->で囲まれた部分で、ブラウザはこの部分を無視します。以下のように、説明文などを入れると理解しやすくなります。
ただし、コメント文だらけで見にくくなる場合もありますから、多用は控えるということが一般的となっています。
<!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">
<!-- ヘッダ開始 -->
<div id="header">
<h1><$MTBlogName$></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- ヘッダ終了 -->
<!-- コンテンツ開始 -->
<div id="content">
<MTEntries lastn="5">
<h3><$MTEntryTitle$></h3>
<$MTEntryBody$>
</MTEntries>
</div>
<!-- コンテンツ終了 -->
<!-- フッタ開始 -->
<div id="footer">
Copyright (C) since 2006 <$MTBlogName$> All rights reserved.
</div>
<!-- フッタ終了 -->
</div>
<!-- コンテナ終了 -->
</body>
</html>
次に、各グループに対するスタイルを定義します。(※スタイルシートのネタ帳参照)
太字部分が追加した部分です。だいぶ追加しましたが、単純なスタイルを定義しているだけです。以下で使用しているスタイルの簡単な説明をします。
text-align 表示位置の設定 left,center,rightなどがあります。
background-color 背景画像の設定 カラーコードなどで設定します。
width 横幅の設定 以下ではピクセル単位で設定しています。
border グループのボーダーラインの設定 線の種類、線の幅、カラーを設定します。
padding ボーダーと文字との幅を設定 以下ではピクセル単位で設定しています。
body {
text-align:center;
background-color:#eeffff;
}
#container {
width:750px;
text-align:left;
background-color:#ffffff;
border:solid 1px #000000;
}
#header {
padding:30px;
background-color:#00ff00;
text-align:center;
}
#content {
padding:30px;
background-color:#ffffee;
}
#footer {
padding:30px;
background-color:#ffeeff;
text-align:center;
}
再構築後、実際にブラウザで確認してみましょう。
次のページ ＞＞ ヘッダ部分に画像を挿入する