Top ＞ Movable Type ＞ テンプレート ＞ Movable Type 3.0x/3.1x 3カラム テンプレート（サイズ可変）
2004年10月27日

Movable Type 3.0x/3.1x 3カラム テンプレート（サイズ可変）

Posted at October 27,2004 12:31 AM
Category：[テンプレート]
Tag：[]
3カラム テンプレート（サイズ可変）サンプル最新バージョン対応のテンプレートについてはテンプレートのページをご覧ください。
Movable Type 3.0x/3.1x用の3カラムテンプレートで、中央カラムのサイズ可変です（サイズ固定は別エントリーにあります）。日本語版での動作確認バージョンは、3.01D-ja/3.11-ja/3.121-ja/3.122-ja/3.15-ja/3.151-ja/3.17-ja/3.171-jaです。
画像の通り本サイトのデザインと同じです（タイトルバナー色およびタイトル色が違います）。画像をクリックすると原寸大の画面がポップアップします。

サイドメニューのカテゴリーリストはデフォルトテンプレートではツリー表示になっていますが、本テンプレートでは一覧表示する設定に変更しています（カテゴリーのページにジャンプした時に該当カテゴリー配下しか表示されないため）。なおツリー表示の設定もカスタマイズした状態でコメントアウトしていますので適宜入れ替えてください。
TypeKeyサイン・イン時の表示が変わらない問題については対処を盛り込んでいます。

テンプレートご利用時、下記に示すスタイルシート1行目の文字コード（青色部分）をウェブログの文字コード（mt.cfgのPublishCharsetに指定された文字コード）に合わせてください。初期値は Movable Type デフォルトの"UTF-8"に設定しています。他の文字コードを設定されている場合は"euc-jp"または"Shift_JIS"に変更してください。

@charset "utf-8"; /* 文字コード */

カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後（前でもいいです）に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。

カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。まず幅の指定に関係するのは下記スタイルシート（抜粋）の赤字で示した部分です。

/* エントリーのある大段落（トップページ） */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-left : 185px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}
 
/* カレンダーのある大段落（トップページ右） */
#links-right{
    position: relative; z-index: 2;
    color: #ffffff;
    position : absolute ;
    right : 15px ;
    top : 95px ;
    width : 155px ;
}
 
/* リンクのある大段落（トップページ左） */
#links-left{
    position: relative; z-index: 2;
    color: #ffffff;
    position : absolute ;
    left :15px ;
    top : 95px ;
    width : 155px ;
}

#content の"185"はブラウザの両端から中央カラムまでのマージン（線のあるところまで）を示しています（この間に左右のカラムが挿入されます）。
#links-right および #links-left の"155"は左または右カラムのそれぞれのテキストエリア幅、"15"はブラウザの端から左または右カラムのテキストまでのマージンです。
つまり左右カラムのレイアウトについては下記の計算が成り立つように指定しています。

155 + (15*2) = 185

15を2倍しているのは、中央カラムの両端から左右カラムのテキストまでのマージンを足しています。

次に具体的な修正例を示します。左右カラムのテキスト幅を例えばあと10増やしたい（155→165）場合は先の計算式に当てはめると、

165 + (15*2) = 195

となりますので、

#content の margin-right :195
#content の margin-left :195
#links-right の width : 165
#links-left の width : 165

と変更してください。

また #links-right と #links-left の

top : 95px ;

の値はブラウザの上端からメニュータイトルまでのマージンです。この値は管理メニュー→「ウェブログの設定」→「設定」の「ウェブログ説明」がタイトルバナー下に表示されることを想定して設定しています。「ウェブログ説明」が設定されていない場合はメニュー表示開始位置が中央カラムより若干低くなってしまいますので、この値を少なくして左右カラムのメニュータイトル開始位置を上げることをお勧めします。

コメント・トラックバックをポップアップ画面に変更したい場合は、下記のエントリーを参照して修正してください。

ポップアップ画面を用いたコメント投稿（その3：公開テンプレート修正方法）
ポップアップしない場合は「ポップアップ用」と書かれているテンプレートは不要です。

不明な点または不具合等ございましたらご連絡ください。なお本テンプレートはスタティックページでのみ確認しています（ダイナミックページ動作環境が構築できておりません）。ダイナミックページに関する問題については他のサイトにてご確認ください。

本テンプレート公開にあたって参考にさせて頂いたエントリーおよび関連エントリーを挙げておきます。ありがとうございました。

不具合等が発生した場合、記述内容を適宜追記していく予定です。

なおこちらのページへ直接訪問された方は、ご利用の前にテンプレートのページをご覧くださいますよう、お願い申し上げます。

スタイルシート

メインページ

カテゴリー・アーカイブ

日付アーカイブ

個別エントリーアーカイブ（1カラム：3.17-ja以降）
3.17-ja より Typekey 関連のタグが変更になっています。
変更箇所の詳細は「Movable Type 3.17-ja 個別エントリーアーカイブの変更点について」をご覧ください。

個別エントリーアーカイブ（1カラム：3.151-ja以前）

個別エントリーアーカイブ（3カラム：3.17-ja以降）
3.17-ja より Typekey 関連のタグが変更になっています。

個別エントリーアーカイブ（3カラム：3.151-ja以前）

コメント・プレビュー（1カラム）

コメント・プレビュー（3カラム）

コメント・エラー（1カラム）

コメント・エラー（3カラム）