*当サイトではアフィリエイト広告を利用して商品を紹介しています。

3カラム(両側にサイドバー)に変更

MovableTypeのデフォルト(標準)では、サイドバーが右側にある「2カラム」デザインになっています。今回はこれを両サイドにサイドバーがある「3カラム」デザインにしてみましょう。

「サイドバーを左側に表示させたい」の項でも書きましたが、
#center#rightfloat: left;が指定されています。float: left;プロパティは対象の領域を次の領域の左側に表示させるものですから、新たに#leftというスタイルを作成して、そこにもfloat: left;を指定してやれば両サイドにサイドバーがある3カラムデザインが完成します。

例:
/* 左サイドバー追加 */
#left{
float:left;
width:200px;
background-color:#FFFFFF;
}

これをスタイルシートに追加記述します。これはスタイルの指定ですから、これを追加しただけでは何も変化しません。
次に行うのは、この追加したスタイルを利用する左サイドバーの部品が必要です。ここでは試しに「検索」を右のサイドバーから左に移動させてみます。
部品を移動(表示)させるためには、テンプレートのメインページのテンプレートに記述します。centerの直前に記述します。

例:
<!– 左サイドバー –>
<div id=”left”>
<div class=”sidebar”>
<h2>検索</h2>
<div class=”link-note”>
<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″ /><br />
<input type=”submit” value=”検索” />
</form>
</div>
</div>
</div>

これで、左サイドバーに「検索」が表示されますが、これだけでは右のサイドバーがはみ出してしまいます。この原因は#container の幅がスタイルシートで700pxと指定されているためです。
サイドバーやエントリー領域もスタイルシートで幅が指定されていますが、サイドバーはそれぞれ200pxで、エントリー領域である#center500pxとなっています。#containerという箱に収まるはずの#left、#center、#rightは200pxオーバーしてしまいます。そこで次にやる事は「箱」である#containerを100px大きくして#centerは400pxにします。

例:
/* container幅修正 */
#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 800px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}
/* center幅修正 */
#center {
float: left;
width: 400px;
overflow: hidden;
}
/* 右サイドバー */
#right {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}
/* 左サイドバー */
#left{
float:left;
width:200px;
background-color:#FFFFFF;
}

これで3カラム画面の完成です。
あとはサイドバーに追加する部品を好みによって左右のサイドバーに配置すればOKです。
注意:「サイドバーを左側に表示させたい」の項で#centerと#rightのスタイルシートの指定をfloat: rightに変更した場合はleftに(標準)に直さなければなりません。

#center {
float: left;
width: 500px;
overflow: hidden;
}

#right {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

以上です。

MovableType の関連書はこちら*
*独学ですので専門的な事はわかりませんが、ボクがこのサイトで試行錯誤して行ってきたMovableTypeカスタマイズの覚え書きです。間違っている記述があるかもしれません。御了承ください*



タイトルとURLをコピーしました