レイアウトのカスタマイズ

レイアウトとウィジェット、ウィジェットセット 前回、MTのインデッックステンプレートから出力される「メインページ」(=index.html、トップページ)のカスタマイズを行いました。実は、そのトップページの右カラムは「ウィジェットテンプレート(以下、ウィジェット)」というものを組み合わせてつくられ

NORI(伊藤のりゆき)

2009年3月9日 20:00

レイアウトとウィジェット、ウィジェットセット

 前回、MTのインデッックステンプレートから出力される「メインページ」(=index.html、トップページ)のカスタマイズを行いました。実は、そのトップページの右カラムは「ウィジェットテンプレート(以下、ウィジェット)」というものを組み合わせてつくられます。

 「ウィジェット」とは、1つの機能を持ち、それぞれが独立したパーツのことです。例えば、アイテム一覧(画像サムネイル)、カテゴリー、最近のコメント、「Powerd ByMT4」リンクバナーなどがあります。

 このウィジェットでできたページは、ウィジェットの配置を変更するだけで、レイアウトを修正できます(図1)。例えばウィジェット単位で、表示のオン・オフができたり、表示順序を変更したりできます。さらにそれらの指定はMTタグを書かずにマウスのドラッグ&ドロップで行えることが特徴です。

 このウィジェットの配置やどれを使うかなどを指定するだけでもMTのカスタマイズは可能です。そこで今回は、ウィジェットを使ったレイアウトの調整から、ウィジェットの自作までを紹介していきます。

 先ほど「ウィジェットはパーツである」という話をしました。そのウィジェットを1つのレイアウトとしてまとめておく箱を「ウィジェットセット」と呼びます。MTでレイアウトを変更するときは、ウィジェットセットを切り替えるか、ウィジェットセットの中の構成を変更します。前者はMTタグを使用する必要がありますが、後者の方法であればウィジェットのドラッグ&ドロップだけで可能です。

ウィジェットとテンプレートモジュール

 デフォルトのテンプレートでは、どのようにウィジェットが使用されているか見ていきましょう。

 インデックステンプレートの「メインページ」を開くと次のようなコードが見つかります。

<$mt:Include module="サイドバー"$>

 これは「サイドバー」という「テンプレートモジュール」を読み込んでいます。「テンプレートモジュール」とは、テンプレートをバラバラにして再利用しやすくしたパーツ(モジュール)のことで、ウィジェットと使用方法が異なるだけで内容は同じです。インデックステンプレートなどはhtmlファイルに対応したMTタグの集まりですが、テンプレートモジュールはファイルにはならないようなもっと小さな単位で使用するMTタグの集まりです。

 再利用したいMTタグの塊をテンプレートモジュールとして登録し使用します。デフォルトでは、htmlのmeta情報を出力する「HTMLヘッダー」などがMTタグといっしょに登録されています。しかし、このテンプレートモジュールは、MTタグを使用せずテキストだけの状態でも利用できます。

 「デザイン」メニューのテンプレートを開くと、上から3つ目の段にテンプレートモジュールがあります。テンプレートモジュールは、いくつでも作れますので、再利用したいパーツはモジュール化して<$mt:Include$>タグで「module」モディファイアを使用して読み込み、活用すると良いでしょう。

 テンプレートモジュールとウィジェットは、呼び方が異なるだけでほとんど同じです。テンプレートモジュールはタグで「module」モディファイアを使用しますが、ウィジェットは「widget」モディファイアで指定するか、ウィジェットセットの中で使います。

 次のページではデフォルトで登録されている「アイテム」ウィジェットをカスタマイズしましょう。

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30