小粋空間  -  a cheap joke and a play on words site

3カラムテンプレート（可変）を2カラムに変更する方法

本サイトで公開中の Movable Type 3.0x/3.1x 3カラム テンプレート（サイズ可変）を2カラム（サイズ可変）に変更する方法について記します。
修正前に、3カラムテンプレートの基本的な構造を簡単に説明しておきます。

まず3カラムの対象となっているテンプレートは

• メインページ
• カテゴリー・アーカイブ
• 日付アーカイブ
• 個別エントリーアーカイブ
• コメントプレビュー
• コメントエラー

です（1カラム版を使用しているテンプレートは適宜対象から外してください）。

次に、各テンプレートで3カラムを表示するためのタグは下記のような構成になっています。

<!-- 左サイドバー開始 -->
<div id="links-left">
　　　　　　：
（左サイドバーのメニュー）
　　　　　　：
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
　　　　　　：
（中央カラム（本文））
　　　　　　：
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
　　　　　　：
（右サイドバーのメニュー）
　　　　　　：
</div>
<!-- 右サイドバー終了 -->

青色のタグにある id 属性の links-left、content、links-right がそれぞれ左カラム・中央カラム・右カラムであることを示しています。そしてこの中に記述されたタグがそれぞれのカラムに配置されるという訳です。
「サイドバーのメニュー」と書かれた部分は、

<div class="sidetitle">
メニュータイトル1
</div>
 
<div class="side">
メニューリスト1
</div>
 
<div class="sidetitle">
メニュータイトル2
</div>
 
<div class="side">
メニューリスト2
</div>
　　　　：

という構造でメニュータイトルとメニューリストがペアになって並んでいます（注：カレンダーにはメニュータイトルはありません）。公開テンプレートをそのままの状態で使用されている場合は、メインページの左サイドバーには「カレンダー」「最近のエントリー」「最近のコメント」「最近のトラックバック」が、右サイドバーには「検索」「カテゴリーリスト」「月別アーカイブリスト」等が並んでいます。
つまり、この部分を片方のサイドバーにごっそり移動させ、スタイルシートに修正をちょっと加えることで2カラムに変身させることができます。

ということで以下に具体的な修正方法を記します。左右いずれのサイドバーを残すかによって修正方法が2通りありますのでご注意ください。

１．サイドバーを左だけにする場合

下記リストのように、右サイドバーのメニューを左サイドバーの任意の位置（ここでは </div> の直前）にペーストします（青色）。元の右サイドバーのタグ（赤色）は全て削除します。

<!-- 左サイドバー開始 -->
<div id="links-left">
　　　　　　：
（左サイドバーのメニュー）
　　　　　　：
 
　　　　　　：
（右サイドバーのメニュー）
　　　　　　：
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
　　　　　　：
（中央カラム（本文））
　　　　　　：
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
　　　　　　：
右サイドバーのメニュー
　　　　　　：
</div>
<!-- 右サイドバー終了 -->

スタイルシートの id属性 "content" について、赤色部分を削除して青色部分を追加します。

/* エントリーのある大段落（トップページ） */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-right : 0px ;
    margin-left  : 185px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}

２．サイドバーを右だけにする場合

下記リストのように、左サイドバーのメニューを右サイドバーの任意の位置（ここでは </div> の直前）にペーストします（青色）。元の左サイドバーのタグ（赤色）は全て削除します。

<!-- 左サイドバー開始 -->
<div id="links-left">
　　　　　　：
左サイドバーのメニュー
　　　　　　：
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
　　　　　　：
（中央カラム（本文））
　　　　　　：
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
　　　　　　：
（右サイドバーのメニュー）
　　　　　　：
 
　　　　　　：
（左サイドバーのメニュー）
　　　　　　：
</div>
<!-- 右サイドバー終了 -->

スタイルシートの id属性 "content" について、赤色部分を削除して青色部分を追加します。

/* エントリーのある大段落（トップページ） */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-left  : 185px ;
    margin-left : 0px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}