Movable Typeのテンプレートセットで独自のカラムレイアウトを適用させる方法(その2:デフォルトテンプレートのレイアウトを適用する仕組み)

Movable Typeのテンプレートセットで独自のカラムレイアウトを適用させる方法(その2:デフォルトテンプレートのレイアウトを適用する仕組み)

Posted at February 27,2008 3:05 AM
Tag:[MovableType, Repository, TemplateSet]

今回は、デフォルトで用意されているレイアウトをテンプレートセットに適用させる方法を紹介します。この方法では、Movable Type の「既存のブログ」のベーステーマ、

mt-static/themes-base/blog.css

のスタイルに依存することになるので、その点を注意してください。

なお、テンプレートセットの設定には、config.yaml を用いた例で紹介します。

1.テンプレートセットの構成

インデックステンプレートのスタイルシートを、「styles」の種類で登録します(下)。

styles:
    label: Stylesheet
    outfile: styles.css
    rebuild_me: 1

このスタイルシート、styles.mtml には次のような内容を記述してください。

/* Default Layout: <mt:setvar name="page_layout" value="layout-wtt"> */
@import url(<$MTStaticWebPath$>themes-base/blog.css);
@import url(<$MTStaticWebPath$>plugins/MyTemplateSet/themes/sample/screen.css);

1行目はデフォルトテンプレートに倣っているだけです。テンプレートセットを切り替えたときにこの設定が適用されると思ったのですが、そうでもないようです。
他のテンプレートの説明は、ここでは省略します。

また、テーマファイルの実体(screen.css)は、

mt-static/plugins/テンプレートセット名/themes/テーマ名

配下においてください。

また、screen.css のヘッダ部分に、適用したいレイアウト(青色部分)を記述します。適用させるカラムレイアウトが複数存在する場合は、カンマで区切ります。

/*
 
name: Koikikukan
designer: Yujiro Araki
designer_url: http://www.koikikukan.com/ 
layouts: layout-wtt, layout-twt
 
*/

デフォルトで用意されているレイアウト名は次のものがあります。これらはローカライズが適用され、スタイル選択画面では日本語で表示されるようになっています。

  • layout-wt(2カラム:大小)
  • layout-tw(2カラム:小大)
  • layout-wm(2カラム:大中)
  • layout-mw(2カラム:中大)
  • layout-wtt(3カラム:大小小)
  • layout-twt(3カラム:小大小)

2.テンプレートセットの入れ替えとスタイルの切り替え

作成したテンプレートセットを plugins ディレクトリおよび、mt-static/plugins ディレクトリにアップロードします。

アップロードしたテンプレートセットに入れ替えた後の、スタイル切り替え(テーマの切り替えまたはレイアウトの切り替え)方法は「その1」の3項を参照してください。

先ほどの screen.css のヘッダに設定した内容が、セレクトボックスに反映されます(画面下)。
ここではセレクトボックスの表示を確認しているだけであり、当サイトのテンプレートセットに実際に適用できることを意味しているのではありません。

スタイル選択

なお、テーマまたはカラムレイアウトを切り替えると、スタイルシートは次のような内容に置き替わります。

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/blog/MT-4.1-ja/mt-static/themes-base/blog.css);
@import url(/blog/MT-4.1-ja/mt-static/support/themes/sample/sample.css);
/* end StyleCatcher imports */

テーマファイルは、mt-static/support/themes にコピーされるようです。

3.まとめ

この方法を独自デザインにカラムレイアウト切り替えに適用できればスッキリするのですが、ベーステーマが必ず import されてしまうため、独自のデザインをテンプレートセットに適用したい場合には有効ではありません。

また、スタイルシートがテンプレート上に配置されないため、スタイルシートを編集するケースには向いていません。つまりこの方法は、テンプレートセット配布元が多くのデザインを用意し、ユーザーは好きなデザインを選択し、かつそれらをカスタマイズしないケースに適していると思われます。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

MT4.1のカラムレイアウトを変更する from ブログ(blog)にトライ&ビルド!
今回はMTネタです。 これまでカラムレイアウトを3列(大・小・小)から3列(小・... [続きを読む]

Tracked on June 17, 2008 10:51 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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