MovableTypeテンプレートのdecoweb > 編集方法 > テンプレート設定方法

テンプレート設定方法

ダウンロードしたデータは解凍できたかな?

ここではダウンロードしたテンプレートをMovableType管理画面から設定する方法を教えます。
(※MovableTypeインストールに関しては公式サイトより行ってください)

Step1

『管理画面』を開き、『ブログの一覧』からテンプレートを変更したいブログをクリック。

MovableType設定方法イメージ図

『環境設定』の『テンプレート』をクリック。

MovableType設定方法イメージ図

Step2

『インデックス・テンプレート』が開きます。まずは『インデックス』から設定して行きましょう。

MovableType設定方法イメージ図

解凍してできたフォルダを開きます。

MovableType設定方法イメージ図

フォルダ内にある『インデックスフォルダ』を開くと中に『アーカイブページ』『スタイルシート』『メインページ』のテキストがあるよ。
それぞれのテキストを各テンプレート名へ上書きして再構築します。

MovableType設定方法イメージ図

Step3

では、さっそくやってみよう!
管理画面のテンプレート名『メインページ』をクリックします。

MovableType設定方法イメージ図

するとメインページが開き、テンプレートの内容にHTML文章が表示されてるよ。

MovableType設定方法イメージ図

解凍してできたフォルダ内にある『メインページ』テキストを開きHTML文章をすべてコピーします。

MovableType設定方法イメージ図

MovableType設定方法イメージ図

MovableType設定方法イメージ図

管理画面の『テンプレートの内容』のHTML文章を削除します。

MovableType設定方法イメージ図

MovableType設定方法イメージ図

削除した部分にテキストコピーしたHTML文章を貼り付けます。
ここでは、マウスの右をクリックし貼り付け。又は「Ctrl+V」で貼り付けしてくださいね。

MovableType設定方法イメージ図

『保存と再構築』をクリック。
再構築することで、新しいHTML文章に更新されるので再構築を忘れないでね!

MovableType設定方法イメージ図

再構築中。

MovableType設定方法イメージ図

解凍してできたフォルダ『インデックス』『アーカイブ』『システム』内のテキストを、管理画面でそれぞれのページのHTML文章に上書きして『保存と再構築』をクリックしてね!

上で説明した管理画面『インデックス』以外は、『環境設定』の『テンプレート』をクリックして戻り、それぞれのタブをクリックすると表示されるよ。

MovableType設定方法イメージ図

MovableType設定方法イメージ図

間違えて他のページに上書き、再構築するとエラーや表示がくずれるので、間違えたら正しいテキストを再度上書きして再構築してね。

Step4

最後に、解凍してできたフォルダ内にある『ファイルのアップロード』を忘れずにアップロードしてね!

このフォルダ内にテンプレートで使用している基本画像が入ってるよ。


管理画面の『ファイルのアップロード』をクリック。

MovableType設定方法イメージ図

『ファイル』部分に『参照』をクリックして解凍したフォルダ内の『ファイルのアップロード』画像を一つずつ開いてね。
(※フォルダ内にある画像はすべてアップロードしてね)

MovableType設定方法イメージ図

MovableType設定方法イメージ図

画像を選んだら、『アップロード・パスを設定(オプション)』をクリック。

MovableType設定方法イメージ図

すると『パス』の設定が表示されるよ。

MovableType設定方法イメージ図

<サイト・パス>表示のままにして『/』の右側部分に『images』と入力。
(※『images』以外にしないでください。『images』とすることでスタイルシートで画像の表示等を指定してます)

MovableType設定方法イメージ図

入力したら『アップロード』をクリック。

MovableType設定方法イメージ図

画像がアップロードされ、ファイルの処理方法を聞いてくるよ。

MovableType設定方法イメージ図

通常の新規エントリーを作成して画像を表示するわけではなく、テンプレートの画像を表示するためなので、『HTMLを表示』にチェックし、サムネイルにはチェックしないで、『埋め込み』をクリックしてね。

MovableType設定方法イメージ図

するとHTML文章が表示されるけど、『閉じる』をクリックしてね。

MovableType設定方法イメージ図

もし、下のような表示がでたら、同じ画像名が使用されてるので上書きしてOKなら『はい』をクリックしてね。
(※decowebの『ファイルのアップロード』内にある画像名は、表示位置が同じ場合、同じ画像名を使用しています)

MovableType設定方法イメージ図

後は同じように画像すべてをアップロードしてね。

Step5

テキストの再構築、画像のアップロードがすべて終わったら、サイトの確認をしてみよう!
右上にある『サイトを確認』をクリック。

MovableType設定方法イメージ図

無事にWeb上に公開できたかな?

MovableType設定方法イメージ図