Movable Typeのテーマ機能を使ってブログ記事・ウェブページを移行する
Tag：[AssetExporter, EntryImExporter, MovableType, PageImExporter, Theme]
Permalink
Movable Typeのテーマ機能を使ってブログ記事・ウェブページを移行する方法を紹介します。ここでは開発環境のブログから本番環境のブログに移行することを想定します。
１．データ移行イメージ
データ移行手順を図に示します。
①アイテムとカスタムフィールドをテーマとしてエクスポート
②ブログ記事をテーマとしてエクスポート
③アイテムとカスタムフィールドのテーマをインポート
④ブログ記事のテーマをインポート
すべてのデータを1つのテーマとしてエクスポートすることもできますが、アイテムとカスタムフィールドをブログ記事より先に登録する必要があるため、2つのテーマに分けています。
２．利用するプラグイン
以下のプラグインを事前にインストールしてください。
- AssetExporterプラグイン
- EntryImExporterプラグイン（ブログ記事の場合に利用）
- PageImExporterプラグイン（ウェブページの場合に利用
３．移行するデータ
- ブログ記事またはウェブページ（画像のカスタムフィールドあり）
- アイテム
- カスタムフィールド
以下、ブログ記事を移行する手順を解説します。ウェブページの場合は「ブログ記事」の部分を「ウェブページ」に読み替えてください。
４．移行手順①②（開発環境からのエクスポート）
まず、アイテムとカスタムフィールドをエクスポートします。移行したいデータがあるブログ管理画面の「ツール」→「テーマのエクスポート」をクリック。
次の画面で、任意の名前・出力ファイル名を設定します。ここでは名前を「アイテムとカスタムフィールド」、ファイル名を「test1」とします。
オプションの「アイテム」と「カスタムフィールド」をチェックし、出力形式を選択して「テーマのエクスポート」をクリック。出力形式は同一サーバ内（＝同一MT内）での移行であれば「テーマディレクトリへのインストール」、そうでない場合は「zip形式アーカイブでダウンロード」を選択してください。
エクスポートするデータを絞りたい場合は「アイテム」または「カスタムフィールド」の「詳細」リンクをクリックして、選択画面を表示します。デフォルトは全選択状態になっています。
続いて、ブログ記事をエクスポートします。テーマのエクスポート画面で、先程と異なる名前・出力ファイル名を設定します。ここでは名前を「ブログ記事」、ファイル名を「test2」とします。
オプションの「ブログ記事」をチェックし、出力形式を選択して「テーマのエクスポート」をクリック。
ブログ記事についても、エクスポートするデータを絞りたい場合は「ブログ記事」の「詳細」リンクをクリックして、選択画面を表示します。デフォルトは全選択状態になっています。
５．移行手順③④（本番環境へのインポート）
インポート先がエクスポートしたサーバと同一でない場合、zipファイルを展開して、中にあるフォルダ（４項で設定した名前のフォルダ）をインポート先のthemesディレクトリにまるごとアップロードします。
続いてインポートしたいブログの管理画面の「デザイン」→「テーマ」をクリック。
まず、「アイテムとカスタムフィールド」テーマの「適用」をクリックします。
続いて「ブログ記事」テーマの「適用」をクリックします。
これで再構築すれば本番環境への移行は完了です。以降は後処理なので不要な場合は作業をスキップしてください。
６．テーマの削除
テーマを誤って再適用しないよう、アップロードしたテーマをthemesディレクトリから削除します。管理画面から削除行えないのでFTPツール等で削除してください。
削除すると現在適用しているテーマがない状態になりますが、問題なく動作すると思います。
７．バックアップテンプレートの削除
適用前のテーマにテンプレートが含まれている場合、バックアップテンプレートとして保存されています（運用中のテンプレートはなくなりません）。バックアップされたテンプレートが不要であれば、削除できます。
バックアップを削除したい場合、「デザイン」→「テンプレート」をクリックして、テンプレート一覧画面の右側にある「ショートカット」の「バックアップされたテンプレート」をクリック。
不要なテンプレートをチェックして「削除」をクリック。
以上です。
Movable Typeテーマ「フォトログ」バージョンアップ
当ブログで配布中のMovable Typeテーマ「フォトログ」をバージョンアップしました。
「フォトログ」テーマ（クリックすればサンプルページにジャンプします）
「フォトログ」は写真投稿用ブログ専用テーマで、jQueryとjQuery lightBoxプラグインで画像表示や画像拡大を行います。
１．変更点
画像拡大時の幅および高さを制限できるようにしました。
制限前の画像拡大時の表示
制限後の画像拡大時の表示
最大幅・高さを変更するには、「メインページ」インデックステンプレートと「ブログ記事」アーカイブテンプレート（下）の赤色部分の値を変更してください。
デフォルト「0」は元画像をそのまま表示します。幅だけで制限したい場合は「幅」の値のみ変更してください。幅・高さを両方指定したときの動作は次のようになります。
- 画像の幅が指定した最大幅を超えている場合：指定幅で拡大
- 画像の幅が指定した最大幅を超えていない場合：画像の高さが指定した最大の高さを越えていれば指定の高さで拡大、超えていなければ元画像のサイズで拡大
この変更は「jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法」を組み込んだものです。
２．ダウンロード
「フォトログ」テーマは以下のリンク先からダウンロードできます。
フォトログテーマの画像サイズを変更する
当ブログで配布しているフォトログテーマの画像サイズを変更する方法を紹介します。
１．メインページの中央画像のサイズを変更する
メインページの中央画像のサイズを変更するには、「デザイン」→「テンプレート」の「メインページ」をクリックし、以下の赤色部分を変更して、再構築してください。
…前略…
<mt:ignore>1カラムレイアウトの画像サイズとサムネイル表示枚数</mt:ignore>
<mt:SetVar name="photo_size" value="450" />
<mt:SetVar name="thumbnail_max" value="8" />
…後略…変更前（450px）
変更後（300px）
2カラムレイアウトで利用している場合は、以下の赤色部分を変更します。
…前略…
<mt:ignore>2カラムレイアウトの画像サイズとサムネイル表示枚数</mt:ignore>
<mt:SetVar name="photo_size" value="400" />
<mt:SetVar name="thumbnail_max" value="5" />
…後略…3カラムレイアウトで利用している場合は、以下の赤色部分を変更します。
…前略…
<mt:ignore>3カラムレイアウトの画像サイズとサムネイル表示枚数</mt:ignore>
<mt:SetVar name="photo_size" value="350" />
<mt:SetVar name="thumbnail_max" value="3" />
…後略…２．メインページのサムネイルのサイズを変更する
デフォルトのサムネイル幅は70pxです。ここでは50pxに変更する例を示します。
変更前（70px）
変更後（50px）
サムネイルのサイズを変更するには、１項と同じテンプレートにある、以下の赤色の「70」の部分を「50」に変更します。行数は154行目です。
…前略…
<mt:Entries limit="$thumbnail_max">
<mt:EntryAssets type="image" lastn="1">
<li<mt:if name="counter" eq="1"> class="start"</mt:if> id="e<mt:EntryID />"><a href="<mt:EntryPermalink />" title="<mt:EntryTitle escape="html" />"><img src="<mt:AssetThumbnailURL width="70" square="1" />" class="asset-img-thumb" alt="<mt:EntryTitle escape="html" />" title="Change to <mt:EntryTitle escape="html" />" /></a></li>
<mt:SetVar name="counter" op="++" />
</mt:EntryAssets>
</mt:Entries>
…後略…次に、上記のテンプレートの少し下にある、以下の赤色の「95」を「75」に変更します。「95」はサムネイルの横のマージンを追加した値です。サムネイル幅を「70」から「50」に変更する場合はその差が20なので、「95」から20を引いて「75」にします。サムネイル幅を拡大する場合は、逆に「95」に差分を加算してください。
…前略…
<mt:SetVar name="counter" op="*" value="95" />
…後略…最後に「デザイン」→「テンプレート」→「スタイルシート」をクリックして、次のセレクタを追加します。heightプロパティには変更したサムネイルサイズを設定します。
#gallery2.main a, #gallery2.main a:link, #gallery2.main a:visited {
height: 50px;
}セレクタに「.main」を付与しているのは、他のアーカイブページに追加したスタイルを反映させないためです。このため、「メインページ」テンプレートの以下の部分にclass属性値「main」を追加してください。
変更前
…前略…
<div id="gallery2" class="photolist clearfix">
…後略…変更後
…前略…
<div id="gallery2" class="photolist clearfix main">
…後略…３．ブログ記事リスト（カテゴリアーカイブ／月別アーカイブ）の画像のサイズを変更する
カテゴリアーカイブ／月別アーカイブのデフォルトのサムネイル幅も70pxです。ここでは50pxに変更する例を示します。
変更前（70px）
変更後（50px）
サムネイルのサイズを変更するには、「デザイン」→「テンプレート」→「ブログ記事リスト」テンプレートにある、以下の赤色の「70」の部分を「50」に変更します（2ヶ所）。
<mt:if name="counter" eq="1">
<li class="start"><a href="<mt:EntryPermalink />"><img src="<mt:AssetThumbnailURL width="70" square="1" />" class="asset-img-thumb" alt="<mt:EntryTitle />" title="Go to <mt:EntryTitle />'s page" /></a></li>
<mt:else>
<li<mt:if name="counter" op="%" value="$thumbnail_max" eq="1"> class="start"</mt:if>><a href="<mt:EntryPermalink />"><img src="<mt:AssetThumbnailURL width="70" square="1" />" class="asset-img-thumb" alt="<mt:EntryTitle />" title="Go to <mt:EntryTitle />'s page" /></a></li>
</mt:if>次に、上記のテンプレートの少し下にある、以下の赤色の「95」を「75」に変更します。「95」はサムネイルの横のマージンを追加した値です。サムネイル幅を「70」から「50」に変更する場合はその差が20なので、「95」から20を引いて「75」にします。サムネイル幅を拡大する場合は、逆に「95」に差分を加算してください。
…前略…
<mt:SetVar name="counter" op="*" value="95" />
…後略…最後に「デザイン」→「テンプレート」→「スタイルシート」をクリックして、次のセレクタを追加します。heightプロパティには変更したサムネイルサイズを設定します。
#gallery2.archive a, #gallery2.archive a:link, #gallery2.archive a:visited {
height: 50px;
}セレクタに「.archive」を付与しているのは、ブログ記事リストに追加したスタイルを反映させないためです。このため、「ブログ記事リスト」テンプレートの以下の部分にclass属性値「archive」を追加してください。
変更前
…前略…
<div id="gallery2" class="photolist clearfix">
…後略…変更後
…前略…
<div id="gallery2" class="photolist clearfix archive">
…後略…４．ブログ記事ページの画像のサイズを変更する
ブログ記事ページの中央画像のサイズを変更するには、「デザイン」→「テンプレート」の「メインページ」をクリックし、以下の赤色部分を変更して、再構築してください。
…前略…
<mt:else>
<mt:SetVar name="photo_size" value="600" />
<mt:SetVar name="thumbnail_max" value="8" />
…後略…変更前（600px）
変更後（450px）
2カラムレイアウトで利用している場合は、以下の赤色部分を変更します。
…前略…
<mt:elseIf name="page_layout" like="layout-two-column">
<mt:SetVar name="photo_size" value="600" />
<mt:SetVar name="thumbnail_max" value="5" />
…後略…3カラムレイアウトで利用している場合は、以下の赤色部分を変更します。
…前略…
<mt:if name="page_layout" like="layout-three-column">
<mt:SetVar name="photo_size" value="450" />
<mt:SetVar name="thumbnail_max" value="3" />
…後略…Movable Type（MT）5 テーマ - SEO対策版
当ブログで配布中の Movable Type（MT） 5.0 テーマを修正しました。
１．改善点
(X)HTMLマークアップを見直し、本文が表示されるカラムがサイドバーのカラムよりも先に出現するようにしました。例えば、3カラムレイアウトは次のように変更しています。
変更前の(X)HTMLマークアップ（抜粋）
<div id="links-left-box">左カラム</div>
<div id="content">中央カラム</div>
<div id="links-right-box">右カラム</div>変更後の(X)HTMLマークアップ（抜粋）
<div id="content">中央カラム</div>
<div id="links-left-box">左カラム</div>
<div id="links-right-box">右カラム</div>変更対象は以下の4つのレイアウトです。
3カラムレイアウト
3カラムリキッドレイアウト
2カラムレイアウト（左サイドバー）
2カラムリキッドレイアウト（左サイドバー）
Movable Type 5（MT5）テーマは、下記のページからダウンロードしてください。
フォトログ v0.70
当ブログで配布中のMovable Type フォトログテーマに一部不具合がありましたのでバージョンアップしました。
フォトログテーマは次のようなものです。画像の表示にjQueryを使い、サムネイルをクリックすると、スライドショー風に中央の画像が切り替わるようにしています。動作はサンプルサイトでご確認ください。
１．修正点
スタイル機能で黒を選択した場合、コメント欄のテキストエリアの文字色が背景色と一緒になっていた不具合を修正しました。
修正前のコメント欄のテキストエリア
修正後のコメント欄のテキストエリア
また、スタイル機能を設定していない状態（=デフォルトは1カラムレイアウト）でコメントプレビューやを行うと3カラムレイアウトで表示される不具合を修正しました。
修正前のコメントプレビュー画面
修正後のコメントプレビュー画面
コメント完了画面についても同様の問題がありましたので修正しました。
２．ダウンロード
フォトログテーマのダウンロードは以下のリンクからたどってください。
Movable Typeテーマのバージョンチェック（MT DDC TOKYO未公開スライド）
Movable Typeテーマのバージョンチェックについて、MT DDC TOKYO（テーマ編）で発表する予定でしたが、時間の都合で割愛したスライドを公開します（MTDDCが終わってかなり時間が経ってしまいましたが）。
テーマのバージョンチェック機能を利用すれば、テーマにエクスポートしたスキーマのバージョンと、テーマをインポートするインポータのバージョンが適正であるか、チェックすることができます。
スライドの元ネタは以下です。
Movable Type フォトログテーマ（Photolog Theme）
Movable Type フォトログテーマ（Photolog Theme：ブログ用）を公開します。
数年前から「フォトログ用のテーマ（テンプレートセット）を作ろう」と思っていて、なかなか手につかないままでしたが、ようやく陽の目をみることになりました。
テンプレートセットやテーマとしては、2004年に公開したものを、MTのバージョンアップにあわせてメンテナンスするという形をとってきましたので、6年ぶりの2作目となります。
今回は、MT5のテーマ機能とスタイル機能、およびテンプレートタグをフルに活用しています。MTOSでも利用可能です。
１．サンプル（Sample）
サンプルサイトを用意しましたので動作をご確認ください（冒頭の画像リンクでもジャンプできます）。サンプルで利用している画像は「EyesPic」を使わせて頂きました。ありがとうございました。
各ページの特徴については３項をご覧ください。
２．ダウンロードとインストール（Download and Install）
以下のリンクからダウンロードできます。
- photolog_0_80.zip
- photolog_0_80_en.zip(English version)
修正履歴
2010.09.09 初版
2010.09.09 v0.2 トップページで、非拡大画像から拡大画像の切り替え時の不具合を対処
2010.09.09 v0.3 2カラムレイアウトでブログ記事リストのサムネイルがはみ出す不具合を対処／他のデザインの配色の不具合を対処
2010.09.10 v0.4 スタイルに「White」を追加／ウィジェットを整理／アーカイブページのタイトルを全アーカイブリストに対応できるよう修正
2010.09.10 v0.5 コメント・トラックバックを受け付けない場合の表示制御を追加
2010.09.11 v0.51 メインページの画像切り替えを改善
2010.09.11 v0.52 jQueryによる画像表示を改善とそれに伴うクラス名の追加
2010.09.11 v0.53 コメントプレビュー／コメント完了のレイアウト修正
2010.09.11 v0.54 アーカイブページでの画像表示用スタイル改善
2010.09.12 v0.55 IEでメインページのフォントにCSSが適用されない不具合を修正
2010.09.13 v0.56 メインページで、リンクありの画像からリンクなしの画像に切り替えたときの表示を改善
2010.09.14 v0.57 jquery.lightboxプラグイン関連の設定を改善
2010.09.16 v0.60 国際化対応と検索結果ページの改善
2010.09.17 v0.61 アーカイブにl10n_ja.yamlが含まれていなかった不具合の修正と、検索文字列が入力されていない場合の検索結果ページの表示改善
2010.11.16 v0.70 コメントテキストエリアに文字が表示されない不具合を修正／コメントプレビューが3カラムレイアウトになる不具合を修正
2011.12.17 v0.80 画像最大化時の制限機能を追加
インストール方法は、ダウンロードしたアーカイブを展開して、中にある「photolog」ディレクトリを、themesディレクトリにアップロードしてください。アップロード後、ブログ管理画面の「デザイン」→「テーマ」をクリックすれば次のように表示されるので、「適用」をクリックしてください。テーマが切り替わればインストール完了です。
３．特徴
トップページはjQueryを利用して、表示されているサムネイルをクリックすると、中央に表示されている画像やタイトルが切り替わるようになっています。ブログ記事ページにジャンプするには、中央上部に表示されているタイトルをクリックします。
中央の画像は、表示サイズ以上であれば、さらにlightboxで拡大表示するようにしています。ブログ記事ページも同様です。
ブログ記事の投稿日やカテゴリ・タグは、画像幅を計算して、ちょうど画像の右下に表示されるようにしています。
また、ブログを始めたばかりの状態や、各アーカイブの投稿数が少ない場合を考慮して、投稿されている画像枚数に応じてサムネイルをセンタリングして表示するようにしています。月別アーカイブやカテゴリアーカイブ、検索結果も同様です。
サムネイルが8枚以下の表示
サムネイルが8枚以上の表示
1カラムレイアウトではサムネイルは8枚ずつ並べるようにしています。表示枚数を変更したい場合は、メインページやブログ記事リストの先頭に、変数として保持しているので、その部分を変更してください。
あと、フィードでもサムネイルを表示するようにしています。
４．ブログ記事の投稿方法（How to post entry）
名前の通り、画像の投稿が主体であることを想定します。画像は1ブログ記事につき1枚としてください。アップロードする画像は本文エリアに挿入せず、ブログ記事投稿画面の「ブログ記事アイテム」エリアの「追加」から行ってください。
あとはブログ記事タイトルを書いて投稿すれば、記事として成立します。大きい画像も、ブログ記事ページでは一定サイズの大きさに縮小するので、サムネイルの作成も不要です。
５．デザインとレイアウトの切り替え（How to change style and layout）
ブログ管理画面の「デザイン」→「スタイル」をクリックし、「Photolog Styles」をクリックすれば、テーマのデザイン一覧が表示されます。
デザインを選択すると右側に大きなサムネイルが表示されます。レイアウトの切り替えはその下にあるプルダウンメニューで行い、「デザインを適用」をクリックすれば完了です。切り替え後は再構築を行ってください。
６．レイアウトの種類（Variation of layout）
カラムレイアウトは5種類用意しました。デフォルトは冒頭の1カラムです。
3カラムレイアウト
3カラムレイアウト（右サイドバー）
2カラムレイアウト（左サイドバー）
2カラムレイアウト（右サイドバー）
1カラムレイアウト
７．デザインの変更（How to edit stylesheet）
スタイルシートはインデックステンプレートとして直接編集できないため、デザインを変更する場合、
- theme_static/photolog/style_library/base.css
- mt-static/support/themes/デザイン名/デザイン名.css
配下に配置されるものを編集してください。
８．ライセンス（License）
無償（Free）です。ご自由にご利用ください。ただし、当サイトのバナーは表示してやってください（Display credit banner）。
９．制限事項
ImageMagickなど、画像処理ができないライブラリが使えない環境では、サムネイル画像が表示されないので、このテーマを利用することはできません。テーマが利用可能かどうかを見分けるには、ブログ管理画面でアイテムの一覧を表示したときに（少なくも1つ以上の画像を予めアップロードしておいてください）、アイテムのサムネイルが表示されていれば大丈夫です。
また基本的に、各カラムやオブジェクトにはCSSで角丸をつけていますが、IEではコメント投稿のサインイン後にレイアウトが崩れる（サインイン後に表示されたテキストエリアがボックスレイアウトからはみ出す）不具合が発生したため、IEのみ角丸の設定を行っていません（正確に言うと、「-webkit-border-radius」を使用していません）。
2010.09.14
ダウンロード先をgithubに変更しました。
Movable Type（MT）5 テーマ修正（プレビュー時のエラー対処）
配布中の Movable Type 5.0 テーマを修正しました。
１．修正箇所
ブログテーマの「ウェブページ」テンプレートのプレビューで、次のようなエラーが発生する不具合を修正しました。ウェブサイト用のテーマではこの不具合は発生しません。
２．原因
theme.yamlのウェブページの定義誤りです。手動で修正する場合は、koikikukan_blog/theme.yamlに青色の1行を追加してください。
…前略…
elements:
…中略…
template_set:
component: core
importer: template_set
name: template set
data:
…中略…
templates:
…中略…
individual:
entry:
label: Entry
mappings:
entry_archive:
archive_type: Individual
page:
page:
label: Page
mappings:
page_archive:
archive_type: Page
…後略…Movable Type 5（MT5）テーマは、下記のページからダウンロードしてください。
Movable Type（MT）5 テーマ修正（2カラムリキッドレイアウト修正）
配布中の Movable Type 5.0 テーマを修正しました。
１．修正箇所
2カラムリキッドレイアウト（左サイドバー）のスタイルが未設定だった不具合を修正しました。
修正前
修正後
２．スタイルシートのみを修正する場合
以下の内容をスタイルシートに追加してください。
.layout-two-column-liquid-left #content,
.layout-two-column-liquid-left #links-left-box {
position: relative;
display: inline;
float: left;
}
.layout-two-column-liquid-left .blog,
.layout-two-column-liquid-left #links-left {
position: static;
}
.layout-two-column-liquid-left #content,
.layout-two-column-liquid-left #links-left,
.layout-two-column-liquid-left .entry {
overflow-x: hidden;
}
.layout-two-column-liquid-left #content {
width: 100%;
margin-left: -200px;
}
.layout-two-column-liquid-left .blog {
margin-left: 200px;
padding: 18px 15px 10px;
border-bottom: 1px solid #669;
border-left: 1px solid #669;
height: 100%; /* for IE6 */
}
html>body.layout-two-column-liquid-left .blog {
padding: 10px 15px;
}
*:first-child+html .layout-two-column-liquid-left .blog {
padding-top: 18px;
}
.layout-two-column-liquid-left #links-left-box {
top: 15px;
right: 0px;
width: 200px;
}
.layout-two-column-liquid-left #links-left {
padding: 0 15px;
height: 95%; /* for IE6 */
}
.layout-two-column-liquid-left #footer {
margin-top: 25px;
border-top: 1px solid #669;
height: 60px;
color: #fff;
background: #8fabbe;
font-size: 12px;
text-align: center;
line-height: 5.0;
}
*:first-child+html .layout-two-column-liquid-left #footer {
width: 100%;
}または、一番下のリンクから最新版をダウンロードし、
- themes/koikikukan_website/templates/styles-site.mtml
- themes/koikikukan_blog/templates/styles-site.mtml
のみを上書きアップロードして、スタイルシートインデックステンプレートを初期化してください。なお、初期化を行うとスタイルシートの変更がすべて元に戻るので注意してください。
Movable Type 5（MT5）テーマは、下記のページからダウンロードしてください。
Movable Type 5 テーマのインポータについて
Movable Type 5 テーマのインポータについて、なんとなく仕組みが理解できたので、紹介しておきます。認識誤りがありましたらご指摘ください。
１．用語
- エレメント：テンプレートセット、カテゴリ、フォルダ、カスタムフィールドなど、テーマとしてインポートされる要素
- インポータ：各エレメントを Movable Type にインポートする主体（=実装）
- エクスポータ：各エレメントをテーマとしてファイルにエクスポートする主体（=実装）
２．theme.yaml へのエレメントとインポータの定義方法
テーマでテンプレートセットを定義する場合は、次のようになります。テンプレートセットのエレメントは青色の「template_set」で、テンプレートセットのインポータは赤色の「template_set」です（多分）。
…前略…
elements:
template_set:
component: core
importer: template_set
name: template set
data:
…後略…３．インポータを定義する意味
インポータというのは、要するに「Movable Type にデータをインポートする人」という意味なので、インポータの定義とは、Movable Type に実装されている、テンプレートセット用のインポータがどこにあるかを指定している、ということになります。
で、テンプレートセットのインポータは、lib/MT/Theme.pmのcore_theme_element_handlers()に定義されています。エクスポータや他のエレメントのインポータについてもここにまとめて定義されています。
sub core_theme_element_handlers {
return {
…中略…
template_set => {
label => 'Template Set',
importer => {
import => '$Core::MT::Theme::TemplateSet::apply',
info => '$Core::MT::Theme::TemplateSet::info',
},
exporter => {
params => 'template_set_export_ids',
template => '$Core::MT::Theme::TemplateSet::export_template',
export => '$Core::MT::Theme::TemplateSet::export',
finalize => '$Core::MT::Theme::TemplateSet::finalize',
condition => '$Core::MT::Theme::TemplateSet::condition',
},
},
…中略…
};
}実際にインポートをする実装は、青色の行のimportに対応する、lib/MT/Theme/TemplateSet.pmのapply()になります。
sub apply {
my ( $element, $theme, $obj_to_apply, $opts ) = @_;
my $set = $element->{data};
if ( !ref $set ) {
$set = MT->registry('template_sets', $set);
}
…後略…４．require について
エレメントには次のようにrequireを設定することができます。テーマを適用するにあたって、そのエレメントを必須にしたい場合は、requireに「1」を設定します。デフォルト値は「0」です。
…前略…
elements:
template_set:
component: core
importer: template_set
require: 1
name: template set
data:
…後略…「1」を設定した状態でインポートを実行（=テーマを適用）し、何かの不具合でインポートに失敗すると、このエレメントを含むテーマを適用しません。「0」を設定した状態でインポートに失敗すると、このエレメントのインポートをスキップして、次のエレメントのインポートを続行します（多分）。
その実装は、lib/MT/Theme.pmのapply()にあります（他にもあるかもしれません）。
sub apply {
my $theme = shift;
my ( $blog, %opts ) = @_;
…中略…
## run all element handlers.
my @elements = $theme->elements;
for my $element ( @elements ) {
next if $element->{class} && ( $element->{class} ne $blog->class_type );
next if $importer_filter && !$importer_filter->{ $element->{importer} };
my $result = $element->apply( $blog, $opts{ $element->{importer} } );
if ( !$result ) {
if ( $element->{require} ) {
return $theme->error(
MT->translate(
…中略…
}
else {
$theme->{warning_on_apply} = 1;
require MT::Log;
my $log = MT::Log->new;
$log->message(
MT->translate(
…中略…
}
}
}Movabld Type 5（MT5）テーマ機能の「ファイル」について
Movabld Type 5（MT5）では「テーマ」という機能が新たに追加され、テンプレートセットだけでなく、オプションとして、カテゴリやカスタムフィールドをテーマの部品として用意できるようになりました。
つまり、あるテーマに切り替えると、そのテーマに予め設定されているカテゴリやカスタムフィールドを、適用したブログ（またはウェブサイト）に設定した状態にすることができます。
さて、設定できるオプションには「ファイル」という種類がありますが、設定方法がやや分かりずらいように思われます。
ということで、本エントリーでは、テーマのエクスポート時にオプション設定する「ファイル」について説明します。
１．オプションの「ファイル」の概要
テーマには外部ファイル（画像やCSS、JavaScript など）を部品として加えることができます。
テーマを作成にあたっては「テーマのエクスポート」を利用すると思いますが、テーマのエクスポート時に、オプションの「ファイル」をクリックし、次の画面で、ファイルが保存されているパス（ディレクトリ）を設定することで、画像やCSS、JavaScript などの外部ファイルをテーマとして保存することができます。
２．パスの設定方法
設定できるパスは、ウェブサイトパスまたはブログパス直下にあるディレクトリです。１項の設定例では、ウェブサイトパスまたはブログパス直下に images というディレクトリがあり、その配下に画像ファイルなどがアップロードされていることを示しています。
設定画面の説明では、パスは「サイトパスからの相対パスで」となっています。ただし、「../」などは使えませんでした。
また、パスを複数設定する場合は、次のように1行ずつ記述します。
指定したパス配下にサブディレクトリがある場合は、それらも適用対象になります。ただしサブディレクトリを以下のように直接指定することはできないようです。
３．テーマとして適用可能なファイル
パスを指定した配下にあるファイルで、テーマとして含むことができるファイルの種類（拡張子）は以下です。
- .jpg
- .jpeg
- .gif
- .png
- .js
- .css
- .ico
- .flv
- .swf
他のファイル（.txt など）はテーマ用のファイルとしては収集されません。ただし、環境変数 ThemeStaticFileExtensions を指定すると、エクスポートするファイルの種類を追加できるようです。
４．エクスポート時のファイル出力先
指定したパスやパス配下のファイルは、テーマのエクスポート時に、blog_static フォルダ配下に出力されます。サブディレクトリがある場合も構造を維持したまま出力されます。
指定したディレクトリやファイルのエクスポート状況は、blog_static フォルダを参照するとよいでしょう。
５．テーマ利用時のパスの展開先
blog_static があるテーマを適用した場合、blog_static 配下のパスは、適用したウェブサイトパスまたはブログパス直下に展開されます。サブディレクトリがある場合も、その構造を維持したまま展開されます。
2009.12.31
ThemeStaticFileExtensions を追記しました。
Movable Type（MT）5 テーマ修正（コメントのページ分割対応）
配布中の Movable Type 5.0 テーマを修正しました。
１．改善箇所
Movable Type 5 で提供されているコメントのページ分割機能に対応しました。コメント部分が指定した件数以上になると、次のようにコメントをページ分割します。デフォルトの分割ページ数は 50 件です。
ページ分割の概要は下記を参照願います。
２．コメントの分割件数の変更方法
「ヘッダー」テンプレートモジュールの下記の value モディファイアの値を変更してください。
<mt:var name="comments_per_page" value="50">Movable Type 5（MT5）テーマは、下記のページからダウンロードしてください。
Movable Type（MT）5 テーマ修正（エクスポート時の不具合修正）
配布中の Movable Type 5.0 テーマを修正しました。
１．問題点
テーマのエクスポートを実行すると次のような「～のファイナライズ中にエラーが発生しました～」というエラーが発生する。
２．原因
テーマのディレクトリ構成で、ウィジェットテンプレートのみ別ディレクトリに配置していたため。
他のテンプレートと同じディレクトリに配置するよう、ディレクトリ構成を見直し、エクスポートできることを確認しました。
Movable Type 5（MT5）テーマは、下記のページからダウンロードしてください。
Movable Type（MT）5 テーマ修正（スタイルライブラリ対応）
配布中の Movable Type 5.0 テーマを、スタイルライブラリ対応にしました。
これまでは、スタイル機能に対応するために、mt-static/plugins 配下にスタイル用のデータをアップロードする必要がありましたが、themes ディレクトリへのアップロードだけでスタイル機能にも対応します。
１．ダウンロード
Movable Type 5（MT5）テーマは下記のページからダウンロードしてください。
２．カラムレイアウト変更方法
テーマのカラムレイアウトを変更する場合、まず、管理画面の「デザイン」→「テーマ」で配布テーマに切り替えた後、管理画面の「デザイン」→「スタイル」で「Koikikukan Styles」が表示されるので、それをクリック。
表示されたサムネイル画像をクリック。
右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。
セレクトボックスからお好きなレイアウトを選択してください。ここでは「layout-two-column-right」を選択します。
レイアウトの対応は次の通りです（2011年2月現在）。
| 名称 | 意味 |
|---|---|
| layout-three-column | 3カラム・固定レイアウト |
| layout-three-column-liquid | 3カラム・リキッドレイアウト |
| layout-three-column-right | 3カラム・固定レイアウト（右サイドバー） |
| layout-three-column-liquid-right | 3カラム・リキッドレイアウト（右サイドバー） |
| layout-two-column-right | 2カラム（右サイドバー）・固定レイアウト |
| layout-two-column-liquid-right | 2カラム（右サイドバー）・リキッドレイアウト |
| layout-two-column-left | 2カラム（左サイドバー）・固定レイアウト |
| layout-two-column-liquid-left | 2カラム（左サイドバー）・リキッドレイアウト |
| layout-one-column | 1カラム・固定レイアウト |
| layout-one-column-liquid | 1カラム・リキッドレイアウト |
選択後、「デザインを適用」をクリック。
「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。
スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません（注：画像はMT4のときのものですが、クレジットバナー以外はMT5も同じ表示になります）。
なお、Movable Type 5.0 ベータ 4 以前では使えませんのでご注意ください。
３．カラムレイアウトサンプル
layout-three-column（3カラム・固定レイアウト）
layout-three-column-liquid（3カラム・リキッドレイアウト）
layout-three-column-right（3カラム・固定レイアウト（右サイドバー））
layout-three-column-liquid-right（3カラム・リキッドレイアウト（右サイドバー））
layout-two-column-right（2カラム（右サイドバー）・固定レイアウト）
layout-two-column-liquid-right（2カラム（右サイドバー）・リキッドレイアウト）
layout-two-column-left（2カラム（左サイドバー）・固定レイアウト）
layout-two-column-liquid-left（2カラム（左サイドバー）・リキッドレイアウト）
layout-one-column（1カラム・固定レイアウト）
layout-one-column-liquid（1カラム・リキッドレイアウト）
Movable Type 5.0 のテーマの警告について
Movable Type 5.0 のテーマを追加した際、なんらかの不具合または不整合がある場合、テーマ一覧の右側に次のような警告が表示されます。
「警告」の部分はリンクになっており、クリックすると次のように詳細が表示されます。
原因は、すでに登録済みのカスタムフィールドのベースネームと、追加したテーマに含まれるカスタムフィールドのベースネームがバッティングしていたことです。
ちなみにこの場合の対処方法は、追加したテーマの theme.yaml にあるカスタムフィールドのベースネームを変更します。
変更前
...前略...
elements:
custom_fields:
component: commercial
data:
cf4:
...後略...変更後
...前略...
elements:
custom_fields:
component: commercial
data:
cf_hoge:
...後略...なお、警告はまとめて検出されるようではなく、テーマ読み込み時に最初に検出されたものが表示されるようです。つまり、テーマに誤りが残っている限り警告が再表示されるので、修正ミスなのか、あるいは新たな警告なのか、エラー詳細をきちんと確認しましょう。
Movable Type（MT）5 テーマ：ウェブサイト用
Movable Type 5（MT5）用のテーマ（テンプレート）の配布を開始します。このエントリーで配布するのはウェブサイト用のテーマです。ブログ用のテーマは「Movable Type（MT）5 テーマ：ブログ用」を参照ください。
Movable Type 5 で追加されたテーマ機能を用いれば、テーマを簡単に入れ替えることができます。
１．Movable Type 5（MT5） テーマのダウンロード
Movable Type 5（MT5）テーマのアーカイブを下記のページからダウンロードしてください。
以下、Movable Type（MT） テーマの利用方法です。
２．Movable Type 5（MT5）テーマのインストール
ダウンロードしたテーマアーカイブを解凍し、themes フォルダにある koikikukan_website フォルダを、Movable Type の themes ディレクトリに丸ごとアップロードしてください。
ウェブサイト管理画面の「デザイン」→「テーマ」で「小粋空間テーマ（ウェブサイト用） 5.0」が表示されていればインストールOKです。
テーマのカラムレイアウトを変更したい場合は、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ（mt-static）の plugins ディレクトリに丸ごとアップロードしてください。カラムレイアウトを変更する必要がない場合はこの作業は不要です。「デザイン」→「スタイル」でスタイル選択画面に移動し、「Koikikukan Styles」を選択してください。
３．Movable Type 5（MT5）テーマの入れ替え
２項で表示されている「小粋空間テーマ（ウェブサイト用） 5.0」の右上にある「適用」をクリックします。
少し待つと、次のように現在のテーマの表示が切り替わります。
あとは全体を再構築し、冒頭のようなデザインで表示されればテーマの入れ替えは完了です。
2010.04.14
スタイルに関する記述を変更しました。
Movable Type（MT）5 テーマ：ブログ用
Movable Type 5（MT5）用のテーマ（テンプレート）の配布を開始します。このエントリーで配布するのはブログ用のテーマです。ウェブサイト用のテーマは「Movable Type（MT）5 テーマ：ウェブサイト用」を参照ください。
Movable Type 5 で追加されたテーマ機能を用いれば、テーマを簡単に入れ替えることができます。
１．Movable Type 5（MT5） テーマのダウンロード
Movable Type 5（MT5）テーマのアーカイブを下記のページからダウンロードしてください。
以下、Movable Type（MT） テーマの利用方法です。
２．Movable Type 5（MT5）テーマのインストール
ダウンロードしたテーマアーカイブを解凍し、themes フォルダにある koikikukan_blog フォルダを、Movable Type の themes ディレクトリに丸ごとアップロードしてください。
ブログ管理画面の「デザイン」→「テーマ」で「小粋空間テーマ（ブログ用） 5.0」が表示されていればインストールOKです。
テーマのカラムレイアウトを変更したい場合は、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ（mt-static）の plugins ディレクトリに丸ごとアップロードしてください。カラムレイアウトを変更する必要がない場合はこの作業は不要です。「デザイン」→「スタイル」でスタイル選択画面に移動し、「Koikikukan Styles」を選択してください。
３．Movable Type 5（MT5）テーマの入れ替え
２項で表示されている「小粋空間テーマ（ブログ用） 5.0」の右上にある「適用」をクリックします。
少し待つと、次のように現在のテーマの表示が切り替わります。
あとは全体を再構築し、冒頭のようなデザインで表示されればテーマの入れ替えは完了です。
2010.04.14
スタイルに関する記述を変更しました。
