TopMovable Type > バージョン別 > 4.1 > 2008年2月
2008年2月26日

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

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

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

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

1.リポジトリの構成

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

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 で表示されます。
テーマスタイルと同じディレクトリに配置してください。

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

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

テンプレートセット名
 ├ 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 配下に配置する資材がリポジトリ以外に何かある場合は、アップロード先が分断しないよう一ヶ所にまとめた方が良いでしょう。

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

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

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

スタイル切り替え

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

スタイル切り替え

入力するURLは、

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

という感じです。

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

4.カラムレイアウトの切り替え

スタイル選択画面でカラムを切り替えると、セレクトボックスで選択した 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 に初期値が設定されるようになったのはこのためかもしれません)。

5.インデックステンプレートのスタイルシート

最後に、インデックステンプレートのスタイルシート(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]
2008年2月12日

Movable Type 4.1 テンプレートセット(スタイル対応版)

February 12,2008 1:55 AM
Tag:[, , , ]
Permalink

Movable Type 4.1 用のテンプレートセット(スタイル対応版)の配布を開始します。

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

このテンプレートセットは、先日公開した「Movable Type 4.1 テンプレートセット」に「スタイル」機能によるカラムレイアウト切り替え機能を追加したもので、テンプレートを編集せずに、8種類のカラムレイアウトを自由に切り替えることができます(下)。

CSS は配布済の Movable Type 4.1 テンプレートと互換性があります(ファイル名のみ変更が必要)。

1.テンプレートセットのダウンロード

「スタイル対応版」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

2.テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

3.テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

4.カラムレイアウトの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

「既定のスタイル」の左側にある + マークのアイコンをクリック(「既定のスタイル」の部分は選択状態によって異なります)。

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ(mt-static ディレクトリがある位置)までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックスからお好きなレイアウトを選択してください。ここでは「layout-two-column-right」を選択します。

レイアウトの対応は次の通りです。

名称意味
layout-three-column3カラム・固定レイアウト
layout-three-column-liquid3カラム・リキッドレイアウト
layout-two-column-right2カラム(右サイドバー)・固定レイアウト
layout-two-column-liquid-right2カラム(右サイドバー)・リキッドレイアウト
layout-two-column-left2カラム(左サイドバー)・固定レイアウト
layout-two-column-liquid-left2カラム(左サイドバー)・リキッドレイアウト
layout-one-column1カラム・固定レイアウト
layout-one-column-liquid1カラム・リキッドレイアウト

選択後、「デザインを適用」をクリック。

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

5.スタイルの変更

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート(styles-site.css)」を編集してください。

Comments [95] | Trackbacks [8]
2008年2月 1日

Movable Type 4.1 テンプレートセット

February 1,2008 2:55 AM
Tag:[, , ]
Permalink

Movable Type 4.1 用のテンプレートセット配布を開始します。

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

1.テンプレートセットのダウンロード

テンプレートセットアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

2.テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

また、images フォルダにある koikikukan.gif(クレジットバナー)をブログディレクトリ(index.html のあるディレクトリ)にアップロードしてください。ブログディレクトリにアップロードすれば、テンプレートを修正せずにクレジットバナーを表示します。

3.テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。


Comments [38] | Trackbacks [2]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3