コーディングメソドロジー

第32回 Movable Type 変数

Movable Typeでは、テンプレート内で「変数」を使って情報を制御するためのタグが用意されてます。これらを使用することにより、 Movable Type (MT)でのサイト制作において、より効果的・効率的にコンテンツを管理するためのツールとして活用することが可能になります。

MTでスタイルシートを管理

MTでスタイルシートを管理

大規模サイトではスタイルシートの量も多くなり、各ページ内では少しの修正でも、テンプレート数が多くなると、変更箇所が多くて大変です。変更工数を減らし、変更漏れを防ぐ為に、スタイルシートを右のソースように、変数を使ってまとめておくことで、変更があった場合にいくつもの箇所を修正する必要がなく、一度に置換することができます。

各カテゴリでclassを変える

各カテゴリでclassを変える

カテゴリごとにページ内のデザイン変えたり、ローカルナビのカレント設定をする場合に、bodyにclassを与えることがあります。カスタムフィールドを使って、サイトの更新者がクラス名を書くという方法もありますが、更新箇所が増えてしまう上、手作業になるため、更新忘れなどの入力ミスの可能性が生じます。そのようなことを避ける為に、変数と条件分岐を使って自動的にclass名を取得できるようにします。
01行目でカテゴリの名前が"カテゴリA"の時に変数"bodyclass"に"l01"を与えています。02,03行目も同様に定義します。04行目で該当の記事が属しているカテゴリのbodyclassを取得しています。
これにより、更新者が記事エントリの際にカテゴリを選択するだけで、カレント設定やデザインの変更を自動で行うことができます。

変数を使った演算式とheightline.jsの連動

変数を使った演算式とheightline.jsの連動

下の図のように2種類のカテゴリが並列に並んでいた場合、エントリしていくとテキストの量や画像サイズの違いで、赤枠のようにエントリ毎に高さが変わってしまいます。デザイン上、青枠のように左右のエントリーの高さを揃える場合に、heightline.jsを使えば再現することができますが、左右のエントリ毎でheightlineのclass記述を揃えなればなりません。

※ heightline.jsの詳細: http://blog.webcreativepark.net/2007/07/26-010338.html

heightlineのclass名を揃える為に、変数を使った演算式を利用します。02行目のsetvarで0という値をcountに代入して、04行目のsetvarでopモディファイアを使い、エントリ毎にcountに1を足していくという記述をしています。このように記述することで、クラス名はclass="heightLine-group1","heightline-group2"と連番で出力されます。

変数を使った演算式とheightline.jsの連動

MTにはいろいろな設定が準備されているため、少しの工夫が、デザインの再現性や運用更新のしやすさに大きく影響してきます。単に「MTを導入する」というだけではなく、使い勝手の良い組み方をすることこそが、生きたサイトを作る第一歩と考えています。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム