カスタマイズ

ブログ(Movabletype4)のカスタマイズ
効率の良いカスタマイズ環境

今回のメジャーアップグレードでシステム内のテンプレートとモジュールの関係がこれまでのバージョンとは大きく異なりました。

これまではページ全体のデザインを行うテンプレートというのもがいくつかあり、その中にカテゴリの表示やエントリーの表示などの部分も直接編集されていました。

それが、今回ページ全体のテンプレートしては数が少なくなり、カテゴリの表示なども数多くのモジュールを用いてパーツ化され、そのパーツ化されたモジュールを条件式によって表示の有無および表現の仕方を変えているようです。

この変更によりパーツ(モジュール)のなかのソースを変更することにより、そのパーツ(モジュール)を利用するテンプレートあるいは他のモジュールにも反映されることになり、効率的なデザイン変更が可能になっています。

以下が私のカスタマイズの大まかな考え方です。

• 基本的にリンクファイルをローカルのマシンにDreamweaverで作成して作業をします。サーバーに全てのリンクファイルをアップして管理画面で該当するテンプレート、モジュールにリンクをしていきます。
• ページ全体のデザインのテンプレートは「メインページ」「「アーカイブインデックス」「ウェブページ」「ブログ記事」「ブログ記事リスト」とシステムテンプレート内のテンプレートです。
  
  これらのテンプレート内に各モジュールが呼び出されて再構築の際にページが作成される仕組みになっています。
  
  まずは上記のテンプレートのソースを確認。（どのモジュールがどのページに呼び込まれるのかを確認する）
• スタイルシートは「ベース」「メイン」の二つがありますが、メインはベースとmtフォルダ内にあるスタイルシートを@importで呼び込んでいるだけのスタイルシートです。
  
  私のカスタマイズではMovabletypeのCSSは利用しないのでメインの中身を通常のサイトのスタイルシートに置き換えています。これもDreamweaverでリンクファイルを作成します。
• サイトの中の基本部分は「ヘッダー」「フッター」「サイドバー (3カラム)」になります。これらのモジュールを修正して通常のサイトと同様のデザインにしています。
  
  基本的な考え方は「ヘッダー」+メインのコンテンツ(エントリーやコメントなどのパーツ)+「サイドバー (3カラム)」+「フッター」という順番でページのデザインが成り立ちます。
  
  私のサイトの場合は3カラムから変更を加えることがないので、「サイドバー (2カラム)」のモジュールは使用していません。
  
  再構築の際にアーカイブ関連のページなのかエントリーのページなのかが条件式で判断されて各パーツの表示の有無が決まります。
• その他のモジュールは通常のサイトのスタイルシートに使用しているIDやClassやタグの使い方に合わせてソースを修正しています。
• 上記の作業を全てのページ、CSSで行ってサイトの再構築後に反映されているかどうか確認します。全部のテンプレート、モジュールのカスタマイズを一度にするのではなく、一つずつカスタマイズをして再構築して確認しながらの方が効率がいいです。

私自身もまだまだカスタマイズをしている途中なので、確認できていない部分でおかしなことをしているかもしれませんのでご了承ください。

解説本がいくつか発売されればそちらも参考にしつつ、訂正していこうと思います。

2009-03-01