トフでもできる!? Movabletype.netテーマ開発

もくじに戻る

テーマを書き換えよう

新しいサイト・ブログを用意

それでは、テーマを作っていきましょう!
テーマを作るには、これからテンプレートを編集してもよいサイト、またはブログが必要です。
MovableType.net のダッシュボードから、「新しくウェブサイトを作る」か「新しくブログを作る」をクリックし、テーマ作成用の環境を用意しましょう。
このテーマ作成講座では、ブログをもとにテーマ作成を進めていきます。

新規ブログ

既存のサイトを使いたくない場合はブログの横にある+ボタンをクリックし、新しいブログを作って作業しましょう。

用意したブログの初期設定をしていきましょう。
ブログURL、名前を設定します。ブログURLは「sample」、名前は「テーマサンプル」と入力します。 テーマは、「Blank」を選択し、新規ブログ作成ボタンをクリックします。

新規ブログが作成されました。
「Blank」はメインページのテンプレートのみ用意されている空のテーマです。今回は既存のテンプレートを使用してテーマを作成していくので、以下のボタンからダウンロードしたテーマファイルを読み込み、必要なテンプレートを用意しておきましょう。
テーマファイルの読み込み方法は、マニュアル「テーマのインポート(読み込む)」もしくは実践編2「テーマを書き出す・読み込む」から確認することができます。

 ダウンロードボタン

テーマが適用されたらテンプレートの構成を確認してみましょう。デザイン>テンプレート で見ることができましたね。

大事なものは揃っています!

書き換えの準備をしよう

今回は、練習のため一度すべてHTMLの状態に戻してしまいます

前ページでダウンロードしたサンプルのzipファイルを解凍し、HTMLのファイルをエディタで開きコピーして、現在適用されているテンプレートの内容に上書きして書き換えてください
どのフォルダがどのテンプレートに対応しているかを確認しながら行いたい場合は、前ページのサンプルテーマをダウンロードしようを参考にしてください。

月別、カテゴリ別の記事アーカイブは両方archive.htmlの内容を入れましょう。
また、テンプレート・モジュールはすべて削除してください。
すべて書き換わったら準備完了です!

まっしろ…

書き換えたことでMTタグが消えて、記事やぺージが自動で増えないサイトになってしまいました。さらにCSSへのリンクも切れてしまったので、スタイルが当たっていない状態です。。。
ですが安心してください。これにMTタグを入れ込むことでテーマとして動くようになります

今回はMTタグを覚えてもらうために、あらかじめCSSでのスタイルの設定はしてあります。CSSを書き換える際は、テンプレート>インデックス・テンプレートからstyles.cssを開き、書き換えます。

続いて、画像を準備します。

おー!

よろこぶトフ
サンプルを見る