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

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

Posted at April 13,2005 11:13 PM
Tag:[Customize, MovableType, Template]

本サイトで公開中の 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-leftcontentlinks-right がそれぞれ左カラム・中央カラム・右カラムであることを示しています。そしてこの中に記述されたタグがそれぞれのカラムに配置されるという訳です。
「サイドバーのメニュー」と書かれた部分は、

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

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

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

1.サイドバーを左だけにする場合

下記リストのように、右サイドバーのメニューを左サイドバーの任意の位置(ここでは </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 ;
}

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-left  : 185px ;
    margin-left : 0px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}
関連記事
トラックバックURL


トラックバック

3カラムから2カラムに変身 from やむやむ
いつもお世話になってます、小粋空間 さま 「3カラムテンプレート(可変)を2カラ... [続きを読む]

Tracked on April 14, 2005 10:55 AM
コメント

可能でありましたら、3カラムテンプレート(可変)を(固定)に変更する方法をお教え願えないでしょうか?
よろしくお願いします。

[1] Posted by eizo : April 14, 2005 6:36 AM

こんにちは。今度はこちらのエントリでお勉強させていただきました。

[2] Posted by さえら : April 14, 2005 10:26 AM

>eizoさん
こんばんは。
コメントありがとうございました。
それではまた機会をみて投稿したいと思います。

>さえらさん
こんばんは。
ご利用ありがとうございました。
意外な方からのご連絡でちょっと驚きました。(笑)
自分で言うのもなんですがこういう記事もいいですね。

[3] Posted by yujiro : April 15, 2005 1:23 AM

Σ(ノ°▽°)ノハウッ?なんで意外なのですか・・・?
2カラムに絶対しないだろうタイプ?あたしって・・・ヾ(☆▽☆) アハアハ

[4] Posted by さえら : April 15, 2005 10:19 AM

>さえらさん
こんにちは。
いえ、そういう意味ではないのですが、他に希望されていた方よりも早かったので。(笑)

[5] Posted by yujiro : April 15, 2005 6:57 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)