« アーカイブテンプレートへのサイドバー追加 | メイン | テキストの画像への回り込み »

3カラムレイアウト

Movable Type 3.2のデフォルトテンプレートではメインページの右側に1つのサイドバーを配置したものになっています。これに手を加えて左側にサイドバーを追加し、3カラムレイアウトにします。

MT3.2のスタイルシートとテンプレートは、カラムのレイアウトが"alpha"というカラムで開始し、beta、gamma(3カラム目)という名前の順番に並ぶように設計されています。
最上位部のbannerを含めて3カラムレイアウトは以下の構成になります。

3-column-layout

デフォルトのメインページ(index.html)の3カラム化は以下の手順で行います。

  1. テンプレートからメインページの編集に入り、<body class="layout-two-column-right">を<body class="layout-three-column">に変更します。

  2. <div id="beta"> <div id="beta-inner" class="pkg">で始まるコード部分をコピーして、<div id="pagebody"> <div id="pagebody-inner" class="pkg">の後(つまりalphaカラムの前)に貼り付けます。

  3. betaをalphaに変更します。つまり、<div id="beta"> <div id="beta-inner" class="pkg"> を<div id="alpha"> <div id="alpha-inner" class="pkg"> に変更します。

  4. 同様に中央のカラムをalphaからbetaに変更します。

  5. 同様にテンプレートでさらに下にある元々のbetaをgammaに変更します。

  6. 保存してテンプレートを再構築して正しくカラムレイアウトができていることを確認します。正しくなければデフォルトテンプレートをリフレッシュし、再度やり直します。<div>の数が合っているか、bodyタグの変更を忘れていないかに注意して下さい。

  7. これで左右に同じ中身のサイドバーが表示されます。後は必要に応じてモジュール化やパーツの削除・追加を行って下さい。


トラックバック

このエントリーのトラックバックURL:
http://www.yumemaro.com/apps/mt-tb.cgi/7

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)