Movable Type 備忘録

手作業でテンプレートを設置する

Sep272006
Author: bzbell
Categories: Template
Tags: Template

Next Page: StyleCatcherでテンプレートを設置する
Prev Page: レイアウトについて

ここではMovableType MEMOのテンプレートを手作業で設置する手順を説明します。

テンプレートの圧縮ファイルをダウンロードします

以下のお好みのテンプレートをダウンロードしてください。
ベーシック・テンプレート

ダウンロードした圧縮ファイルを適当なフォルダに展開します。

サーバ上のmt/default_templatesディレクトリをバックアップします

たとえば、mt/default_templatesディレクトリをmt/default_templates.defaultのようにディレクトリ名を変更してください。

MovableType MEMOのテンプレートをアップロードします

MovableType MEMOで配布するご希望のレイアウトのフォルダの中にdefault_templatesというフォルダがあります。そのフォルダをそのまま、先ほどバックアップしたdefault_templates.defaultディレクトリと同じ場所にアップロードします。

ブログを選択してテンプレートを適用します

MovableType(ムーバブルタイプ)の管理画面からブログ一覧を表示して、テンプレートを適用したいブログのチェックボックスをチェックします。そして、右上にあるプルダウンリストから「テンプレートを初期化する」を選択して「Go」ボタンで初期化します。初期化すると、元のテンプレートは自動的にバックアップされます。

新規ブログに適用する場合は、普通にブログを新規作成してください。

初期化したらブログ全体を再構築してください。ここまででテンプレートの設置は完了です。

イメージファイルやCSSをアップロードします

MovableType MEMOで配布するご希望のレイアウトのmt-memoフォルダをそのままサーバにアップロードします。

アップロードするmt-memoフォルダは、先ほどdefault_templatesで差し替えたレイアウトと同じレイアウトのものを使用してください。

アップロード先はどこでも構いませんが、ここではstyles-site.cssと同じ場所にアップロードするものとして説明していきます。別な場所にアップロードする場合には、その都度読み替えてください。

styles-site.cssを編集します

MovableType(ムーバブルタイプ)の管理画面からテンプレート一覧を表示して、styles-site.css内にMovableType MEMOで配布するCSSを追加します。

styles-site.cssと同じ場所にmt-memoフォルダをアップロードした場合には、変更しなくても大丈夫です。

たとえば、わたしのブログでは以下のように、mt-memoディレクトリをテンプレート保管用としてまとめてまして、テンプレートを差し替えるたびにstyles-site.cssのパスを変更しています。

http://bizcaz.com/
+--- mt-memo/
+--- Padfoot/
|    +--- base-weblog.css
|    +--- Padfoot-3column-liquid-left/
|    |    +--- Padfoot-3column-liquid-left.css
|    |
|    +--- Padfoot-2column-fixed-left/
|         +--- Padfoot-2column-fixed-left.css
|
+--- C003/
|    +--- base-weblog.css
|    +--- C003-3column-liquid-left/
|         +--- C003-3column-liquid-left.css
|
+--- C005/
|    +--- base-weblog.css
|    +--- C005-3column-fixed-left/
|         +--- C005-3column-fixed-left.css
|
+--- C010/
|    +--- base-weblog.css
|    +--- C010-3column-liquid-left/
|         +--- C010-3column-liquid-left.css
|
+-- styles-site.css

上記ディレクトリ構成の場合のstyles-site.css内に追加するMovableType MEMOのCSS記述は以下のようになります。

@import url("/mt-memo/C010/base-weblog.css");
@import url("/mt-memo/C010/C010-3column-liquid-left/C010-3column-liquid-left.css");
または
@import url("./C010/base-weblog.css");
@import url("./C010/C010-3column-liquid-left/C010-3column-liquid-left.css");
または
@import url(http://bizcaz.com/mt-memo/C010/base-weblog.css);
@import url(http://bizcaz.com/mt-memo/C010/C010-3column-liquid-left/C010-3column-liquid-left.css);

青い字の部分をその都度変更します。 URLで指定する場合にはダブルクォーテーション( " )は省いてくださいね。

必ず、指定したパス(URL)に各CSSファイルが存在していることを確認してください。
また、"@import url" と "("の間にスペースなど入れず、上記例のようにくっつけて記述します。

以上で設置は完了です。
あとは、styles-site.cssを再構築すればテンプレートが適用されます。