小粋空間: テンプレートセットアーカイブ

Top ＞ Movable Type ＞テンプレートセット [全て開く]

2008年2月28日

テンプレートセットで独自のカラムレイアウトを適用させる方法（その3：ユーザーのカラムレイアウトを適用する＆まとめ）

February 28,2008 3:03 AM
Tag：[MovableType, TemplateSet]
Permalink

「その3」は、このシリーズの本題である、独自のカラムレイアウトを適用させる方法の説明です。

１．これまでのまとめ

「その1」と「その2」から、ユーザーのカラムレイアウトを適用するにあたって、ポイントとなる事項は次の通りです。

テンプレートセットのテーマディレクトリ配下に配置した screen.css に記述しているカラムレイアウト名が適用される
スタイルを利用してカラムレイアウトを変更すると、変数 page_layout に適用したレイアウト名が設定される（デフォルト以外の名称も利用可能）
スタイルを利用してテーマあるいはカラムレイアウトを変更すると、スタイルシート（styles.css）の内容が、ベースファイル・テーマファイルへの import 命令に書き換えられる

また、テンプレートセットにカラムレイアウトを組み込むにあたっては、これまでの考察より、次のA・BとX・Yの組み合わせ（計4通り）が考えられます。

A.デフォルトのカラムレイアウト名を利用する
B.ユーザーのカラムレイアウト名を利用する

X.テーマを利用する（テンプレートのスタイルシートにはimport命令のみ）
Y.テーマを利用しない（テンプレートのスタイルシートにimport命令を書き込ませない）

「その2」では、A+X のケースについて述べましたので、順を追って、残りの組み合わせを行うにあたっての実現方法を説明します。

２．テーマを利用しない場合、スタイルシートに import 命令を書き込ませない方法

結論から申し上げると、スタイルシートに import 命令を書き込ませない仕組みを作るのは困難なため、次の方法を考えました。

import 命令が書き込まれるスタイルシートをダミーとしてテンプレートセットに登録する
本来のスタイルシートは別のインデックステンプレートとして登録する

テンプレートの構成はイマイチですが、こうすればカラムレイアウトの変更でスタイルシートが import 命令で上書きされる事象を回避できます。

具体的には config.yaml に次のように設定します。

styles-site:
    label: Stylesheet
    outfile: styles-site.css
    rebuild_me: 1
styles:
    label: Stylesheet_Dummy
    outfile: styles.css
    rebuild_me: 0

上がCSSの実体があるテンプレート、下はダミー用のスタイルシートです。実験時にわかったことは、次の2つです。

styles という種類のテンプレートを探して import 命令を書き込むため、実体の CSS は別のファイル名が良い。
styles という種類のテンプレートが存在しない場合は他の css ファイルを検索して import 命令を書き込むため、必ずダミーを用意する

３．テーマを利用しない場合の screen.css の設定

screen.css はテーマを利用しない場合は不要なファイルですが、カラムレイアウトを読み込ませるためには必須です。
よって、テーマを利用しない場合の screen.css の中身はヘッダのみとし、CSS の実体は前項の通り、インデックステンプレートに記述します。

４．ユーザーのカラムレイアウト名を利用する場合の対処

もうひとつ隠れた問題があります。それは、ユーザーのカラムレイアウト名を利用する場合、テンプレートセットを入れ替えただけでは、変数 page_layout にユーザーのカラムレイアウト名が設定されません。
設定されるのは、スタイルでカラムレイアウトを切り替えた後です。

たとえば、当ブログの配布テンプレートのデフォルトのカラムレイアウトは

layout-three-columns

となっていますが、MTのデフォルトテンプレートのカラムレイアウトは

layout-wtt

となっているため、テンプレートセット入れ替え直後は、変数 page_layout に

layout-wtt

が設定されたままです。

これを回避するために、テンプレート（メインインデックスやブログ記事リストなどの、カラムレイアウトが必要なメインのテンプレート）の先頭（=ヘッダーが呼び出される前）に設定します。
カラムレイアウトがどのページでも同じであれば、「ヘッダー」テンプレートモジュールのbody要素より手前に設定しておけば一箇所の設定で済みます。

に、次のようなしかけを設定しておきます。

<mt:unless name="page_layout" like="column"><mt:setvar name="page_layout" value="layout-three-column"></mt:unless>

これは「変数 page_layout に column という文字列が含まれていなければ、layout-three-column を設定する」という意味です。つまり、Movable Type デフォルトテンプレートのカラムレイアウト名には column という文字列が含まれていないので、デフォルトテンプレートからテンプレートセットを入れ替えた場合には変数を上書きします。

変数を上書きした後、カラムレイアウト切り替えを行っても、この MTUnless タグの条件にマッチしない（=columnという文字列が含まれる）ので、選択したカラムレイアウトが適用される、というわけです。

ただし、色々なテンプレートをインストールしていると、この方法では限界があるかもしれませんので、よりユニークなカラムレイアウト名を自テンプレートセットに設定して、マッチする条件を厳しくした方が良いかもしれません。

つまり、

layout-three-columns

であれば、他のテンプレートセットのカラムレイアウト名とバッティングする可能性があるので、

koikikukan-layout-three-columns

と変更して、

<mt:unless name="page_layout" like="koikikukan"><mt:setvar name="page_layout" value="layout-three-column"></mt:unless>

という判定にした方が確実でしょう。

５．各ケースのテンプレートセット構成

最後に各組み合わせのテンプレートセット構成を掲載しておきます。間違ってたらすいません。

カラムレイアウト切り替えをテンプレートセットに導入する構成がやや複雑なため、まずは当サイトのテンプレートセット（スタイル適用版）を試してみて、ファイルの内容がどうなっているか確認してください（ローカライズも行っているので、ファイル構成がサンプルと若干異なっています）。

５．１ A+X：デフォルトのカラムレイアウト名を利用し、テーマを利用する

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（実体あり、デフォルトのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（import命令あり）
　　　　　　　└ 他の各テンプレート

５．２ A+Y：デフォルトのカラムレイアウト名を利用し、テーマを利用しない

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（ヘッダのみ、デフォルトのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（ダミー）
　　　　　　　├ styles-site.mtml（CSS の実体）
　　　　　　　└ 他の各テンプレート

５．３ B+X：ユーザーのカラムレイアウト名を利用し、テーマを利用する

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（実体あり、ユーザーのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（import命令あり）
　　　　　　　└ 他の各テンプレート

５．４ B+Y：ユーザーのカラムレイアウト名を利用し、テーマを利用しない

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（ヘッダのみ、ユーザーのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（ダミー）
　　　　　　　├ styles-site.mtml（CSS の実体）
　　　　　　　└ 他の各テンプレート

このシリーズは以上です。

Comments [0] | Trackbacks [0]

2008年2月27日

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

February 27,2008 3:05 AM
Tag：[MovableType, Repository, TemplateSet]
Permalink

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

mt-static/themes-base/blog.css

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

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

１．テンプレートセットの構成

インデックステンプレートのスタイルシートを、「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カラム：小大小）

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

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

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

先ほどの 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 にコピーされるようです。

３．まとめ

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

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

Comments [0] | Trackbacks [0]

2008年2月26日

テンプレートセットで独自のカラムレイアウトを適用させる方法（その1：テーマ切り替えの仕組み）

February 26,2008 2:30 AM
Tag：[MovableType, Repository, TemplateSet]
Permalink

Movable Type 4.1 で追加されたテンプレートセット機能で、切り替えたテンプレートセットを、さらに「スタイル」を利用してカラムレイアウトを適用さえる方法を紹介します。

カラムレイアウトを切り替えるためには、「スタイル（ブログ管理画面の「デザイン」→「スタイル」）」の機能を少し知っておく必要があります。「スタイル」は、MT3 の時代には「Style Catcher プラグイン」として配布されていた機能で、以前「StyleCatcher リポジトリ公開方法」というエントリーで一度説明しています。

MT4 ではカラムレイアウト選択機能が追加されているので、今回は「汎用ウェブサイト」を用いて、リポジトリの構成とテーマ切り替えの仕組みなどを解説します。

１．リポジトリの構成

「リポジトリ」とは、テーマを公開するにあたっての、必要な資材のセットを指します。
リポジトリの構成は、おおむね次のようになっています。

themes/
　├ index.html
　├ テーマ名1/
　│　├ screen.css
　│　├ thumbnail.gif
　│　└ thumbnail-large.gif
　└ テーマ名2/
　　　├ screen.css
　　　├ thumbnail.gif
　　　└ thumbnail-large.gif
　　　　　　：

リポジトリ内に複数のテーマを設定できますが、ひとつでも構いません。

以下、それぞれのファイルの役割を説明します。

index.html

テーマスタイルを登録するファイルです。このファイルに記述したスタイルがスタイル選択画面の選択対象となります。
汎用テンプレートセットの HTML ファイル（universal.html）の内容は次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript"  />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>Universal Themes</title>
 
    <link rel="theme" type="text/x-theme" href="universal-black/screen.css" />
    <link rel="theme" type="text/x-theme" href="universal-blue/screen.css" />
    <link rel="theme" type="text/x-theme" href="universal-green/screen.css" />
    <link rel="theme" type="text/x-theme" href="universal-pink/screen.css" />
  </head>
  <body>
    <p>This is the Universal Theme set.</p>
  </body>
</html>

ご自身のテーマ登録ファイルを作成するときは、このファイルをコピーして index.html として使うと良いでしょう。meta 要素はそのまま、title 要素の内容はスタイル選択画面の「カテゴリ」欄に表示されます。link 要素に記述した screen.css が、実際に選択対象になるテーマ（スタイルシート）です。スタイルシートは冒頭の構成のように、テーマ名ディレクトリの下に配置するのが一般的です。
body要素は空でも構いません。

screen.css

テーマ用スタイルシートです。キモとなるのは、このファイルのヘッダ部分に記述するフォーマット（下）です。

/*
 
A Six Apart theme adapted for Movable Type default templates 
name: Cityscape Paris  
designer: Tiffany Chow  
designer_url: http://tiffany.vox.com/ 
layouts: layout-wtt, layout-twt, layout-wt, layout-tw
 
*/

青色で示した内容が、スタイル切り替え時、右下のセレクトボックスにカラムレイアウトとして反映されます。

スタイル切り替え

thumbnail.gif

テーマ選択時に表示されるテーマのサムネイル画像です。120×90 で表示されます。
テーマスタイルと同じディレクトリに配置してください。

thumbnail-large.gif

サムネイルをクリックした後にこの画像が右側に表示されます。300×250 で表示されます。
テーマスタイルと同じディレクトリに配置してください。

２．テンプレートセットの構成

本体となるテンプレートセットの説明は省略していますが、テンプレートセットにリポジトリを同梱する場合のファイル構成は次のようになります。

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　└ 各テンプレート

このように、テンプレートセットにリポジトリを同梱する際には、ユーザーがアップロードしやすいよう、テンプレートセットに「mt-static/plugins/テンプレートセット名」のフォルダを作っておき、その下にリポジトリを同梱します。
リポジトリに限らず、mt-static にプラグイン資材をアップロードする時のお作法となっています。

また、上記の構成からお分かりのとおり、テンプレートセットのリポジトリのアップロード位置は、

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

を推奨します。

その理由は、プラグイン形式で配布するお作法にしたがっていることと、複数のテンプレートセットをアップロードした時に、どのテンプレートセットのリポジトリであるかを、ユーザーが容易に判別できるためです。

mt-static/themes でも構いませんが、この位置ではリポジトリを設定するHTMLファイルが存在しないため、スタイル一覧にサムネイルが表示されない（つまり目的のカラムレイアウト選択ができない）と思います（間違っていたらご指摘ください）。また、mt-static 配下に配置する資材がリポジトリ以外に何かある場合は、アップロード先が分断しないよう一ヶ所にまとめた方が良いでしょう。

３．ユーザーの作成したテーマをスタイル選択画面に表示する

１項でユーザーが任意のリポジトリを作成したと仮定し、ここではそれを読み込ませてみます。

ユーザーの作成したテーマを「デザイン」→「スタイル」画面から読み込ませるには、「+」アイコンをクリックします。

スタイル切り替え

そして、このファイルがあるURLを指定します。

スタイル切り替え

入力するURLは、

http://user-domain/mt-static/plugins/テンプレートセット名/themes/

という感じです。

汎用ウェブサイトでは、universal.html となっていますが、ユーザーがリポジトリを公開する場合は index.html としておいた方が、リポジトリURLの設定が簡単になります。

４．カラムレイアウトの切り替え

スタイル選択画面でカラムを切り替えると、セレクトボックスで選択した screen.css に対応した値（下の青色部分）が、変数 page_layout に選択したカラムレイアウトが保存されます。

/*
 
A Six Apart theme adapted for Movable Type default templates 
name: Cityscape Paris  
designer: Tiffany Chow  
designer_url: http://tiffany.vox.com/ 
layouts: layout-wtt, layout-twt, layout-wt, layout-tw
 
*/

MT インストール時にはデフォルトのレイアウトが適用されます（変数 page_layout に初期値が設定されるようになったのはこのためかもしれません）。

５．インデックステンプレートのスタイルシート

最後に、インデックステンプレートのスタイルシート（styles.css）を説明します。

styles.css はテーマスタイルとベーステーマを呼び出すための import 命令が記述された簡素な内容です。
テーマスタイル（screen.css）は、前述のとおり、独自のファイルを適用できますが、ベーステーマファイル（themes-base/blog.css）は、テンプレートセットやスタイルを切り替えても必ず指定されます。

例として、下に汎用ウェブサイトの styles.css の内容を掲載します。

@import url(<$MTStaticWebPath$>themes-base/blog.css);
@import url(<$MTStaticWebPath$>addons/Commercial.pack/themes/universal-black/screen.css);

つまり、スタイルを切り替えた際には、screen.css のパスが自動的に書き換えられます。

Comments [0] | Trackbacks [0]

小粋空間 - a cheap joke and a play on words site

テンプレートセットで独自のカラムレイアウトを適用させる方法（その3：ユーザーのカラムレイアウトを適用する＆まとめ）

１．これまでのまとめ

２．テーマを利用しない場合、スタイルシートに import 命令を書き込ませない方法

３．テーマを利用しない場合の screen.css の設定

４．ユーザーのカラムレイアウト名を利用する場合の対処

５．各ケースのテンプレートセット構成

５．１ A+X：デフォルトのカラムレイアウト名を利用し、テーマを利用する

５．２ A+Y：デフォルトのカラムレイアウト名を利用し、テーマを利用しない

５．３ B+X：ユーザーのカラムレイアウト名を利用し、テーマを利用する

５．４ B+Y：ユーザーのカラムレイアウト名を利用し、テーマを利用しない

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

１．テンプレートセットの構成

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

３．まとめ

テンプレートセットで独自のカラムレイアウトを適用させる方法（その1：テーマ切り替えの仕組み）

１．リポジトリの構成

index.html

screen.css

thumbnail.gif

thumbnail-large.gif

２．テンプレートセットの構成

３．ユーザーの作成したテーマをスタイル選択画面に表示する

４．カラムレイアウトの切り替え

５．インデックステンプレートのスタイルシート