小粋空間テンプレートセットのカラムレイアウト変更方法

小粋空間テンプレートセットのカラムレイアウト変更方法

Posted at February 4,2008 2:36 AM
Tag:[MovableType, Template]

Movable Type 4.1 用の配布テンプレートセットで、カラムレイアウトの変更方法についてご質問を頂いてますので、本エントリーにて紹介します。テンプレートセットは下記のページよりダウンロードしてください。

Movable Type テンプレート

なお、ここで紹介する方法は暫定版です。時間をみてテンプレートをバージョンアップし、もう少し楽な変更方法に改善したいと思います。

1.カラムレイアウト変更方法

ここでは「メインページ」をサンプルにカラムレイアウトを変更する方法を紹介します。

ブログ管理メニューより「デザイン」→「テンプレート」→「メインページ」を開き、テキストエリア1行目より、下記の MTSetVar テンプレートタグを探し、変数 page_layout の値(赤色部分)を2項に示すレイアウトに書き換えてください。

<MTSetVar name="page_layout" value="layout-three-column">

変数 page_layout でカラムレイアウトを決定しています。

また、他のアーカイブのカラムレイアウトはそれぞれ個別に設定しています。それらのカラムレイアウトを変更する場合は、次のメニューから同じ手順で行ってください。

  • ブログ記事アーカイブ:「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事」
  • 月別アーカイブ/カテゴリーアーカイブ:「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」
  • ウェブページアーカイブ:「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ウェブページ」
  • コメントプレビュー:「デザイン」→「テンプレート」→「システムテンプレート」→「コメントプレビュー」
  • コメント完了:「デザイン」→「テンプレート」→「システムテンプレート」→「コメント完了」
  • 検索結果:「デザイン」→「テンプレート」→「システムテンプレート」→「検索結果」

なお、コメントプレビュー/コメント完了/検索結果の3テンプレートはデフォルトを1カラムレイアウトにしています。

<MTSetVar name="page_layout" value="layout-one-column">

2.カラムレイアウト

レイアウトの設定値は次の通りです。

属性値レイアウト
layout-three-column 3カラム・固定レイアウト
layout-three-column-liquid 3カラム・リキッドレイアウト
layout-two-column-left 2カラム・固定レイアウト(左サイドバー)
layout-two-column-right 2カラム・固定レイアウト(右サイドバー)
layout-two-column-liquid-left 2カラム・リキッドレイアウト(左サイドバー)
layout-two-column-liquid-right 2カラム・リキッドレイアウト(右サイドバー)
layout-one-column 1カラム・固定レイアウト
layout-one-column-liquid 1カラム・リキッドレイアウト

3.カラム数の変更

3カラムから2カラム/1カラム、あるいはその逆等、カラム数を変更する場合は下記の変更を行ってください。

3.1 2カラム左レイアウトにする場合

1項の該当テンプレートより下記の MTInclude タグを削除。

<$MTInclude module="サイドバー"$>

また、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー」の内容(一番外側の div 要素と di 要素を除く)を、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2」にコピー。

3.2 2カラム右レイアウトにする場合

1項の該当テンプレートより下記の MTInclude タグを削除。

<$MTInclude module="サイドバー2"$>

また、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2」の内容(一番外側の div 要素と di 要素を除く)を、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー」にコピー。

3.3 1カラムレイアウトにする場合

1項の該当テンプレートより下記の MTInclude タグ(2つ)を削除。

<$MTInclude module="サイドバー2"$>
    :
<$MTInclude module="サイドバー"$>
関連記事
トラックバックURL


コメント

yujiroさま。こんにちわ。お久しぶりです。
突然・・・コメント欄に書こうとすると・・・コメント欄すら隠れてしまう事態に
なってしまって・・・何が悪いのか分からず・・・全部、最初からとなり
色々といじっています。

そこでMovable Type 4.1 テンプレートセット(スタイル対応版)をDL
させて頂きまして、ページ分割も出来ました。そして色々と問題が・・・
出てきました。

コメントプレビュー/コメント完了/検索結果をlayout-three-columnに

<MTSetVar name="page_layout" value="layout-one-column">部分を

<MTSetVar name="page_layout" value="layout-three-column">にして


<$MTInclude module="サイドバー2"$>
<$MTInclude module="サイドバー"$>
を加えたら・・・スタイルシートがかなり崩れます。

お忙しいとは思いますが・・・ご指導を宜しくお願い致します。

[1] Posted by アプル logo : April 20, 2008 5:06 PM

>アプルさん
こんにちは。
ご質問の件につきまして、スタイル版のマークアップはこの記事とちょっと異なるので、追加するタグをそれぞれ、下記のようにしてください。

<div id="links-left-box">
<dl id="links-left">
<$MTInclude module="サイドバー2"$>
</dl>
</div>
<div id="links-right-box">
<dl id="links-right">
<$MTInclude module="サイドバー"$>
</dl>
</div>

それではよろしくお願い致します。

[2] Posted by yujiro logo : April 21, 2008 10:29 AM

yujiroさま。こんにちわ。お忙しい中、早速のご指導を
ありがとうございます。

サイドバーが閉じられていない(こういう例えでよいのでしょうか?)ように
思えて
</dl>
</div>をサイドバーや色々と入れてみたのですが・・・ダメでした。
(゜▽゜=)ノ彡☆ギャハハ!!

(・-・)・・・ん?早速、やってみたのですが・・・
<$MTInclude module="サイドバー2"$>はちゃんと設置
出来たのですが・・・
<$MTInclude module="サイドバー"$>
がうまくいきません(-_-;)

<$MTInclude module="フッター"$>
の上で良いのですよね???

本当に何度も申し訳ございませんが、宜しくお願い致します。

[3] Posted by アプル logo : April 21, 2008 12:08 PM

>アプルさん
すいません。
回答の、一番最後のdiv要素の終了タグに"/"がついていませんでした(回答は修正しました)。
もう一度貼り付けなおすか、直接テンプレートを修正してください。
それではよろしくお願い致します。

[4] Posted by yujiro logo : April 21, 2008 1:28 PM

yujiroさま。こんにちわ。お忙しい中、早速のご指導を
ありがとうございます。

出来ました♪yujiroさまさまのコメントを見て・・・思わず(゜O゜;アッ!
と声が出ちゃいました(-_-;)
ありがとうございました。

そしてもう1つなんですが・・・最近のコメントでコメントを入れて
下さったお名前からそのコメントへジャンプ出来ないのです。
前にもご指導してもらったように

<a href="<$MTCollateField name="entry_link"$>#c<$MTCollateField name="comment_id"$>">

の#cになっているのですが・・・

宜しくお願い致しますm(._.)m

[5] Posted by アプル logo : April 22, 2008 1:54 AM

>アプルさん
こんにちは。
ご質問の件ですが、「最近のコメント」の

 #c

 #comment-

に修正してください。
それではよろしくお願い致します。

[6] Posted by yujiro logo : April 22, 2008 12:29 PM

yujiroさま。こんにちわ。お忙しい中、早速のご指導を
ありがとうございます。

出来ました♪本当にいつも初歩的な質問でも答えて下さって
ありがとうございます。
これからも色々と出てくると思いますのでその時は
宜しくお願い致します。

[7] Posted by アプル logo : April 22, 2008 7:50 PM

>アプルさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

[8] Posted by yujiro logo : April 25, 2008 11:40 AM

初めまして。私、Movable Type Pro version 4.28を使っているんですが・・・操作や設定がわからず
検索したら小粋空間さんのサイトにたどり着きました。

現在2カラムで右にサイドバーがある状態なのですが、3カラムにして両サイド使えるようにしたいのです。

説明にあるように「layout-three-column」に書き換えてみたのですが、反映されず・・右のサイドバーも消えてしまうのです・・。

もしこのコメントに気づいてくだされば是非ご指導いただけると嬉しいのですが・・・。
とにかく詳しくないのでさっぱり分かりません。なんとかカスタマイズしたいです。宜しくお願い致します。

[9] Posted by 教えてください : August 3, 2011 10:14 PM

>教えてくださいさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件で確認ですが、テンプレートセットは4.2対応のものをご利用ください(ダウンロードしたファイル名の先頭が「template_4_2~」であれば大丈夫です)。
その前提で、カラムレイアウトを変更する場合は、以下の記事の4項の作業を行ってください。

Movable Type 4.2 テンプレートセット(フッタ付きリキッドレイアウト対応)

それではよろしくお願い致します。

[10] Posted by yujiro logo : August 7, 2011 12:52 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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