Movable Type 備忘録

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

  • Sep272006
  • Vote:
    http://bizcaz.com/archives/2006/09/27-175040.php
  • Categories: Template
  • Tags:
  • Social Bookmark

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

ここでは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のパスを変更しています。

  1. http://bizcaz.com/
  2.  +--- mt-memo/
  3.       +--- Padfoot/
  4.       | +--- base-weblog.css
  5.       | +--- Padfoot-3column-liquid-left/
  6.       | | +--- Padfoot-3column-liquid-left.css
  7.       | |
  8.       | +--- Padfoot-2column-fixed-left/
  9.       | +--- Padfoot-2column-fixed-left.css
  10.       |
  11.       +--- C003/
  12.       | +--- base-weblog.css
  13.       | +--- C003-3column-liquid-left/
  14.       | +--- C003-3column-liquid-left.css
  15.       |
  16.       +--- C005/
  17.       | +--- base-weblog.css
  18.       | +--- C005-3column-fixed-left/
  19.       | +--- C005-3column-fixed-left.css
  20.       |
  21.       +--- C010/
  22.       | +--- base-weblog.css
  23.       | +--- C010-3column-liquid-left/
  24.       | +--- C010-3column-liquid-left.css
  25.       |
  26.       +-- styles-site.css

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

  1. @import url("/mt-memo/C010/base-weblog.css");
  2. @import url("/mt-memo/C010/C010-3column-liquid-left/C010-3column-liquid-left.css");
  3.  
  4. または
  5.  
  6. @import url("./C010/base-weblog.css");
  7. @import url("./C010/C010-3column-liquid-left/C010-3column-liquid-left.css");
  8.  
  9. または
  10.  
  11. @import url(http://bizcaz.com/mt-memo/C010/base-weblog.css);
  12. @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を再構築すればテンプレートが適用されます。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード