今すぐできる超絶シンプルなMTのCMSカスタマイズテクニック

第6回完成したサイトを「テーマ」して保存しよう!

本連載の最終回では、Movable Type 5からの新機能である「テーマ」機能を使って、これまで制作してきたウェブサイトやブログの設定をテーマとして保存、別のウェブサイトに適用させてみよう、というお話をしていこうと思います。テーマとは、MTで作成したテンプレート、テンプレートセット、カテゴリ、フォルダやファイル、カスタムフィールドの設定をまとめてテーマとして保存し、そして別に作成したブログやウェブサイトにボタン一つでそのテーマを適用させることができるようになる、という機能です。

利用例として、

  • MTで制作したサイトの設定をバックアップするために使う
  • 製作段階で設置した仮設置ブログを、本公開ブログに移行するときに使う
  • サイトのテンプレートとして転用できそうなテーマを一度作成しておけば、似たようなウェブサイトを作成する場合に便利

などが挙げられます。たとえば、フランチャイズのチェーン店など、似たようなサイトを複数作成する場合に、一度テーマとしてサイトを構築しておけば、制作の手間が大幅に省けます。

  • 作成したテーマの配布が可能

また、企業用サイトのテーマ、写真アルバム用のテーマ、ブログのテーマ、など目的に合わせたテーマを作成して、オンラインから配布することが可能です。

とにかくバックアップという意味も込めて、作成したウェブサイトとブログはとりあえずテーマとして保存しておくことをおすすめします。

テーマでできること、できないこと

テーマ機能には保存できるものとできないものがあります。

 テーマ機能
 エクスポートインポート
テンプレート(設定ふくむ)
カテゴリ
ブログ記事[1][1]
フォルダ
ウェブページ×[2]
blog_static(ファイルなど)[3]
カスタムフィールド[4][4]
アセット情報××
テーマのサムネール×

※参考:http://www.slideshare.net/Dakiny/mtddc-tokyo-gamo021-4885673
※1:ブログ記事のエクスポート、インポートを使用
※2:テーマのyamlファイルを編集すればウェブページも含んだテーマ制作が可能
※3:JPG、JPEG、GIF、PNG、JavaScript、CSS、ICO、FLV、SWFswfが可能
※4:カテゴリ別の設定ができない

また、テーマを作成するうえでのテンプレートの構造の注意点として以下がありますので気をつけましょう。

  • 他のブログのテンプレートをIncludeせず、同じブログ内でテンプレート構造を完結させる。
  • リンクや画像のURLは、絶対パスで記述せず、ブログルートからの相対パスで記述する。
  • カテゴリーやフォルダ、カスタムフィールドをテンプレートタグで指定する場合は、それらを忘れずにテーマに含める。
  • プラグインに依存するMTタグがある場合は、必要なプラグインを同時に配布する。

テーマのエクスポート

今回は第1回第5回を通して作成してきた企業サイトのテーマ化のエクスポート方法について説明していきます。

最終的に、⁠ウェブサイト」のテーマ1つ、⁠ブログ」のテーマ2つを作成します。

作成するパーツ
作成するパーツ

ウェブサイトの配下にあるブログもまとめて一括でテーマ化にしたいところなのですが、MT5の標準機能ではできません。ウェブサイト、ブログは別個のものとして、それぞれにテーマとして保存する必要があります。

では実際のテーマ作成作業について説明していきます。

  • 「ウェブサイト(company)」のトップ > ツール > テーマのエクスポート

を開きます。

ウェブサイトテーマのエクスポートを開く
ウェブサイトテーマのエクスポートを開く

「名前」「出力ファイル名⁠⁠、⁠バージョン」などの入力項目はわかりやすい名称をつけます。また、それぞれオプションを設定することができます。

フォルダ

フォルダをテーマとしてエクスポートすることができます。テーマ適用時に、自動でフォルダを作成します。今回の例では、ウェブページ用として作成した「about」のフォルダがエクスポートされるように設定しています。

ファイル

エクスポートするウェブサイトのディレクトリ配下にあるトップレベルフォルダに格納されているファイル(JPG、JPEG、GIF、PNG、JavaScript、CSS、ICO、SWF、FLV)をエクスポートできます。フォルダ名は、フォーム内に一行ずつ記載します。ブログのサイトルート直下のみ指定可能です。

今回は、CSSや画像をすべて格納している「common」フォルダを指定します(⁠⁠common」フォルダはFTPなどからアップロードしているものでも可で、つまりMT上からアップロードしていないファイルも指定可能です⁠⁠。

「common」フォルダを指定
「common」フォルダを指定
テンプレートセット

ウェブサイトに含まれるテンプレートセットを全てエクスポートできます。

カスタムフィールド

ブログ記事やウェブページのカスタムフィールドも設定できます。カテゴリ別の設定は含むことができません。

出力形式

「テーマディレクトリへのインストール」: 今のMovable Type環境下の/themes/フォルダにテーマを保存します。保存したテーマは、ブログやウェブサイトの[テーマの一覧]に表示されます。

「ZIP形式アーカイブでダウンロード」: テーマをZIP形式でエクスポートします。エクスポートしたZIPは解凍して他のMovable Type環境下の/themes/フォルダにアップロードすることで、他のMovable Type 環境下でも同様にテーマとして使えるようになります。

どちらの形式でもかまいませんが、今回は「テーマディレクトリへのインストール」をした前提として説明を進めていきます。

同じ要領で、作成してあるブログ2件もテーマとしてエクスポートしましょう。

「ブログ(news)」> ツール >テーマのエクスポート

フォルダオプションは何も指定しません。

ブログテーマのエクスポート
ブログテーマのエクスポート
「ブログ(商品一覧)」 > ツール > テーマのエクスポート

カスタムフィールドのオプション指定はすべてチェックします。フォルダオプションは何も指定しません。

ブログテーマのエクスポート
ブログテーマのエクスポート

ブログ内に作成した記事はテーマファイルには含まれません。記事もコピーしたい場合は、

  • 「ブログ」> ツール> 記事のエクスポート

から記事をエクスポートしておきましょう。

記事のエクスポートでは、アップロードしたファイルそのものは含まれないので注意が必要です。

テーマのインポート

次は、エクスポートしたテーマを、他の作成したウェブサイトに適用させてみましょう(テーマのエクスポート時に、⁠zip形式アーカイブでダウンロード」を選択した場合は、エクスポートしたzipは解凍してFTPなどで、/themes/フォルダにアップロードしておきましょう⁠⁠。

まずは、第1回でも説明したような、ウェブサイトの作成、ブログの作成を行います。

ウェブサイトの作成

テーマを、先程作成したウェブサイト用のテーマ(ここでは、⁠companyのテーマ」を指定)を適用させて、再構築しましょう。

ウェブサイトの作成
ウェブサイトの作成

さらに同じ要領でブログ2つも新規作成し、それぞれエクスポートしておいたテーマを適用させ、再構築します。

エクスポートしたテーマを適用し、再構築
エクスポートしたテーマを適用し、再構築

今回の連載を通して作成したウェブサイトでは、第2回でマルチブログの設定を行っています。その場合、ウェブサイトのメインページのテンプレートに指定してある、参照するブログのidを後で変更する必要がありますので注意してください。

これで、まったく同じウェブサイトとブログが瞬く間に生成できてしまいました!

以上、第6回ではテーマのエクスポート・インポートまでの一連の最低限の説明の中を行ないました。テーマのサムネイルの作成方法やもっと複雑なテーマの作成にチャレンジしたい場合は、先日シックス・アパートが開催したMTDDC テーマ編の開催レポートや、ドキュメントを参考にすると良いと思います。

全6回の連載を通して、HTML/CSSの知識だけで、最低限のMTタグと最低限の操作で、MTのCMSカスタマイズができるようになることを目的に、実際の規模が小さい企業サイト制作の例を示しながら解説をしてきました。この連載をきっかけに、Movable Typeにハードルを感じているウェブデザイナーのみなさんが、MTに触れるきっかけになれば幸いです。

また、2010年9月9日までMovable Type コンテスト 2010のエントリーを募集しています!すでに公開されているMTサイトや、テーマなど、誰でも何点でも応募可能ですので、ぜひMTサイトの制作にチャレンジし、そして応募してみてください。すでに応募されたサイトやテーマも数百単位で公開されていますので制作事例の参考にもなると思います。

以上で「今すぐできる超絶シンプルなMTのCMSカスタマイズテクニック」連載は終了です。これまでどうもありがとうございました!

おすすめ記事

記事・ニュース一覧