TopMovable Typeテンプレート > 小粋空間テンプレートセットのカラムレイアウト変更方法
2008年2月 4日

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

Posted at February 4,2008 2:36 AM
Category:[テンプレート]
Tag:[, ]

Movable Type 4.1 用の配布テンプレートセットで、カラムレイアウトの変更方法についてご質問を頂いてますので、本エントリーにて紹介します。

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

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="サイドバー"$>
Posted by yujiro
関連記事
人気エントリー
トラックバック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 アプル Author Profile Page : 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 Author Profile Page : April 21, 2008 10:29 AM

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

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

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

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

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

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

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

[4] Posted by yujiro Author Profile Page : 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 アプル Author Profile Page : April 22, 2008 1:54 AM

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

 #c

 #comment-

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

[6] Posted by yujiro Author Profile Page : April 22, 2008 12:29 PM

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

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

[7] Posted by アプル Author Profile Page : April 22, 2008 7:50 PM

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

[8] Posted by yujiro Author Profile Page : April 25, 2008 11:40 AM
コメントする

*必須



お知らせ:2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!