【コンテンツごとに枠で囲む】
スタイルシートで枠のスタイルを指定して、メインページテンプレートの右サイド部分を修正します。
修正前
・幅1p
・カラーコード#ccccccの線で枠を表示
・内側の余白は2px
・テキストは左寄せ
・枠下に10pxの余白
class名はメニュー部分のスタイルなので私は「.menu」としましたが、わかりやすいものでかまいません。
・カラーコード#ccccccの線で枠を表示
・内側の余白は2px
・テキストは左寄せ
・枠下に10pxの余白
.menu{
border:1px solid #cccccc;
padding:2px;
margin-bottom:10px;
text-align:left;
}
メインテンプレートは囲みたい部分を<div class="menu">～</div>で囲みます。「ブログの検索」を例にすると下記のように囲んでいます。
border:1px solid #cccccc;
padding:2px;
margin-bottom:10px;
text-align:left;
}
<!--右側開始-->
<div id="right">
<div class="menu">
<!--人気ブログランキング-->
<img alt="rankingbanner_02.gif"
src="http://movabletype.gift-select.com/image/rankingbanner_02.gif" width="80" height="15" />
<!--ブログを検索 開始-->
<h2>検索</h2>
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="検索" />
</form>
<!--ブログを検索 終了-->
</div>
修正後（枠が薄い色なので、少しわかりにくいですが・・・）<div id="right">
<div class="menu">
<!--人気ブログランキング-->
<img alt="rankingbanner_02.gif"
src="http://movabletype.gift-select.com/image/rankingbanner_02.gif" width="80" height="15" />
<!--ブログを検索 開始-->
<h2>検索</h2>
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="検索" />
</form>
<!--ブログを検索 終了-->
</div>
