« とんぼ | メイン | 台風の中・・ありがとう »

2006年10月06日
Top > MovableType > テンプレート編 > 2カラム(左サイドバー)に変更する

●2カラム(左サイドバー)に変更する

公開テンプレートは、標準で3カラム表示となっています。カラムレイアウトは、各テンプレートの body 要素の class 属性を書き換える事により切り替えることができます。

「イの葉」のHPは、2カラム(左サイドバー)なのでこれに合わせて、3カラム・レイアウトから2カラム・レイアウト(左サイドバー) に変更した場合を紹介します。

まず、各テンプレートの
<body class="layout-three-column">
となっている赤色部分を
<body class="layout-two-column-left">
と青色に変更します。

2カラム(左サイドバー)に変更する

「公開テンプレート」は、メインページ/カテゴリー・アーカイブ/日付アーカイブ/ エントリーアーカイブは全て3カラムの状態になっておりますので、例えば2カラム(左サイドバー)に変更する場合は、 右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
                  :
  (ここに書かれているものをコピー)
                  :
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
の間に書かれている必要なメニュー(検索・カテゴリーアーカイブ・バナー等)をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
                :
        (ここにペースト)
                :
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
にペーストしてください。そのあと

<!-- 右カラム開始 -->
                :
<!-- 右カラム終了 -->
を丸ごと削除します。

この修正を行った後に「サイトを再構築」を行うと、

2カラム(左サイドバー)に変更する

こんな感じで、左側にサイドバーがずらり並びます。

他のテンプレートも変更してみました。その結果がこれ!!

2カラム(左サイドバー)に変更する 2カラム(左サイドバー)に変更する

このテンプレートは、「エントリー・アーカイブ」です。

こんな風に、エントリー内容が左にずれてしまいました。この原因は何なのでしょか??
じつは前回、変更に変更を重ね最後の一歩のところでこうなってしまい、その原因を突き止める気もなくなってしまったことがありました。 今回はその原因を突き止めてみます。(笑)

トラックバックURL

このエントリーのトラックバックURL:
http://www.inoha.jp/cgi-mt/mt33_3ja/mt-tb.cgi/67

コメントする