小粋空間テンプレートセットのカラムレイアウト変更方法
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 4.1 テンプレートセット(スタイル対応版)
- Movable Type でコメント用 RSS フィードを出力する
- Movable Type 4.1 テンプレートセット
- FC2ブログの個別記事ページで前後記事のリンクを表示する
- Movable Type 4.1 の「ブログのテンプレートを初期化」について
- テンプレートのタグを探す方法
- Movable Type 4 配布テンプレート不具合のお知らせ
- livedoor テンプレート不具合のお知らせ(前後ページへのリンク追加)
- 配布テンプレートのサイドバーにリストを追加する
- サイドバーに Google Adsense を貼り付ける
- テンプレート不具合のお知らせ(カレンダーリンクの改善) for livedoor ブログ
- アメーバブログ スキン設定方法
- アメーバブログ スキン
- Movable Type 4 公開テンプレート設定方法
- Movable Type 4 テンプレート不具合と修正のお知らせ
- Movable Type 4 テンプレート配布再開
- XHTML 1.0 Strict 版テンプレートをカスタマイズする場合の注意事項
- Movable Type 4 テンプレート
- 3カラムレイアウトで中央カラムを(X)HTMLの最初に記述する
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さま。こんにちわ。お忙しい中、早速のご指導を
ありがとうございます。
出来ました♪本当にいつも初歩的な質問でも答えて下さって
ありがとうございます。
これからも色々と出てくると思いますのでその時は
宜しくお願い致します。
>アプルさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

