MT3.0 ﾃﾞｻﾞｲﾝ変更(ﾃﾞｻﾞｲﾝとﾚｲｱｳﾄの分離）

01.MT3覚書

前回　indexテンプレートを分解してモジュール化したが、今度はいよいよスタイルシートの変更に取りかかることとする。

前回のindexテンプレートを見るとわかることだがCSSのタグで残ってるのは全体のﾚｲｱｳﾄを決めるタグだけである。　

今回はこれをもとに3段組にしてみよう。

まずはstyles-site.cssの中からレイアウトにかかわる部分を分離しlayout-site.cssというテンプレートを作成し保存する。


body {
　　　　margin: 0px 0px 20px 0px;
　　　　background-color: #8FABBE;
　　　　ｔext-align: center;
　　　　 }
#container {
　　　　line-height: 140%;
　　　　margin-right: auto;
　　　　margin-left: auto;
　　　　text-align: left;
　　　　padding: 0px;
　　　　width: 800px;
　　　　background-color: #FFFFFF;
　　　　border: 1px solid #FFFFFF;
　　　　}

#banner {
　　　　font-family: Verdana, Arial, sans-serif;
　　　　color: #FFFFFF;
　　　　background-color: #999999;
　　　　text-align: left;
　　　　padding: 15px;
　　　　border-bottom: 1px solid #FFFFFF;
　　　　height: 39px;
　　　　}
#left {　　　　　　　　　　　　　　　　　　　　　　←※左側
　　　　float: left;
　　　　width: 200px;
　　　　background-color: #FFFFFF;
　　　　overflow: hidden;
　　　　}
#center {
　　　　float: left;
　　　　width: 400px;
　　　　overflow: hidden;
　　　　}
#right {
　　　　float: left;
　　　　width: 200px;
　　　　background-color: #FFFFFF;
　　　　overflow: hidden;
　　　　}

前回、作成したheadeｒモジュールやその他のテンプレートで、スタイルシート参照の部分を新たに作ったlayout-site.cssも参照するように変更してあげる。


<link rel="stylesheet" href="<$MTBlogURL$>layout-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />

最後にindexテンプレートを以下のように変更して3段組にする。 ⇒View image


<!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>
<$MTInclude module="header"$>
</head>
<body>

<div id="container">

<div id="banner">
<$MTInclude module="banner"$>
</div>


<div id="left">
<div class="sidebar">
<$MTInclude module="calendar"$>
<$MTInclude module="monthry"$>
<$MTInclude module="recent_entry"$>
</div>
</div>

<div id="center">
<$MTInclude module="content"$>
</div>

<div id="right">
<div class="sidebar">
<$MTInclude module="scripts"$>
<$MTInclude module="contact"$>
<$MTInclude module="links"$>
<$MTInclude module="profiles"$>
<$MTInclude module="footer"$>
</div>
</div>

<div style="clear: both;"> </div>
</div>
</body>
</html>

と今回はここまで。