小粋空間テンプレートセットのカラムレイアウト変更方法
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="サイドバー"$>
- Movable Typeのコンテンツデータで公開日を比較する方法
- MT7テンプレート作成画面に表示される「コンテンツタイプ」「コンテンツフィールド」の意味
- Movable Typeでテンプレートの動作を簡単に確認する方法
- Movable Typeでスマホサイト用トップページをPCサイト用トップページと異なるURLにする方法
- Movable TypeでCSSファイルやJavaScriptファイルなどを管理するためのTips
- Movable Type 4.2 テンプレートセット(コミュニティ用)修正
- Movable Type 4.2 テンプレートセット(コミュニティブログ対応版)修正
- Movable Type 4.2 テンプレートセット(コミュニティブログ対応版)
- Movable Type 4.2 配布テンプレートセット修正(カテゴリーアーカイブ・コメント完了)
- Movable Type 4.2 テンプレートセット修正(アーカイブインデックス追加等)
- Movable Type 4.2 テンプレートセット修正
- Movable Type 4.1 テンプレートセット修正
- 「iPhoneテンプレートfor MT」 by cremadesign
- Movable Type 4.1 テンプレートセット(スタイル対応版)
- Movable Type 4.1 テンプレートセット
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="サイドバー"$>
を加えたら・・・スタイルシートがかなり崩れます。
お忙しいとは思いますが・・・ご指導を宜しくお願い致します。
>アプルさん
こんにちは。
ご質問の件につきまして、スタイル版のマークアップはこの記事とちょっと異なるので、追加するタグをそれぞれ、下記のようにしてください。
<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>
それではよろしくお願い致します。
yujiroさま。こんにちわ。お忙しい中、早速のご指導を
ありがとうございます。
サイドバーが閉じられていない(こういう例えでよいのでしょうか?)ように
思えて
</dl>
</div>をサイドバーや色々と入れてみたのですが・・・ダメでした。
(゜▽゜=)ノ彡☆ギャハハ!!
(・-・)・・・ん?早速、やってみたのですが・・・
<$MTInclude module="サイドバー2"$>はちゃんと設置
出来たのですが・・・
<$MTInclude module="サイドバー"$>
がうまくいきません(-_-;)
<$MTInclude module="フッター"$>
の上で良いのですよね???
本当に何度も申し訳ございませんが、宜しくお願い致します。
>アプルさん
すいません。
回答の、一番最後のdiv要素の終了タグに"/"がついていませんでした(回答は修正しました)。
もう一度貼り付けなおすか、直接テンプレートを修正してください。
それではよろしくお願い致します。
yujiroさま。こんにちわ。お忙しい中、早速のご指導を
ありがとうございます。
出来ました♪yujiroさまさまのコメントを見て・・・思わず(゜O゜;アッ!
と声が出ちゃいました(-_-;)
ありがとうございました。
そしてもう1つなんですが・・・最近のコメントでコメントを入れて
下さったお名前からそのコメントへジャンプ出来ないのです。
前にもご指導してもらったように
<a href="<$MTCollateField name="entry_link"$>#c<$MTCollateField name="comment_id"$>">
の#cになっているのですが・・・
宜しくお願い致しますm(._.)m
>アプルさん
こんにちは。
ご質問の件ですが、「最近のコメント」の
#c
を
#comment-
に修正してください。
それではよろしくお願い致します。
yujiroさま。こんにちわ。お忙しい中、早速のご指導を
ありがとうございます。
出来ました♪本当にいつも初歩的な質問でも答えて下さって
ありがとうございます。
これからも色々と出てくると思いますのでその時は
宜しくお願い致します。
>アプルさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!
初めまして。私、Movable Type Pro version 4.28を使っているんですが・・・操作や設定がわからず
検索したら小粋空間さんのサイトにたどり着きました。
現在2カラムで右にサイドバーがある状態なのですが、3カラムにして両サイド使えるようにしたいのです。
説明にあるように「layout-three-column」に書き換えてみたのですが、反映されず・・右のサイドバーも消えてしまうのです・・。
もしこのコメントに気づいてくだされば是非ご指導いただけると嬉しいのですが・・・。
とにかく詳しくないのでさっぱり分かりません。なんとかカスタマイズしたいです。宜しくお願い致します。
>教えてくださいさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件で確認ですが、テンプレートセットは4.2対応のものをご利用ください(ダウンロードしたファイル名の先頭が「template_4_2~」であれば大丈夫です)。
その前提で、カラムレイアウトを変更する場合は、以下の記事の4項の作業を行ってください。
Movable Type 4.2 テンプレートセット(フッタ付きリキッドレイアウト対応)
それではよろしくお願い致します。