レイアウトのカスタマイズ
リンクバナーウィジェットを作る
先ほどは、すでにあるウィジェットを修正しましたが、新しいウィジェットを作成して、ウィジェットセットで新たにドラッグできる要素を追加しましょう。作成するウィジェットは、リンクバナーです。最初に、リンクバナー用の画像を作成しアイテムとしてアップロードしておきます。ウィジェットで使用するバナー用の画像を一意に特定したいので、バナー画像のタグとして「@linkbanner」と登録しておきます（図3-1）。
ウィジェットの新規作成は「デザイン」メニューのウイジェットのページで、ウィジェットテンプレートのところにある「ウィジェットテンプレートを作成」をクリックします。
ウィジェットの名称として「リンクバナー」とタイトルフィールドに入力します。次に編集フィールドにMTタグを使ってテンプレートを記述していきます。
実際に記入するテンプレートのコードは次の通りです。
最初の2行はxhtmlのdivタグです。ほかのウィジェットでも使用しており、主に左右のマージンをつける役割をもっています。このウィジェットも、そのほかのウィジェットと同様にマージンをつけて表示するためにつけました。クラス「banner-widget」は、このウィジェット専用に新たに作りましたが、CSSファイル等では特に何も指定していません。
3行目の、
その条件で検索されたアイテムに対して、というファンクションタグが機能します。前者は、オリジナル画像の縦横比率を維持したまま、横幅160pxになるような画像を作成し、そのURLを返すMTタグです。後者は、アイテムの名前を返すMTタグです。
その画像はタグで囲まれているため、http://togoru.net/へのリンクになります。
保存するとウィジェットが作成されます。
ウィジェットセットに登録する
できたウィジェットは、ドラッグ＆ドロップでウィジェットセットに登録します。
デザインメニューのテンプレートモジュール一覧にある「サイドバー」をクリックして編集画面を開きます。
レイアウトが3カラムになっている場合、右カラムは「3カラムのサイドバー（メイン）」というウィジェットセットを使用しています。2カラムの場合は「2カラムのサイドバー」というウィジェットセットです。
インクルードテンプレートから該当する「3カラムのサイドバー（メイン）」をクリックすると、四角いブロックが並んでいるウィジェットセットのページにいきます。ここでは、左のエリアにあるのが現在使用中の「インストール済み」ウィジェット、右にあるのが未使用の「利用可能」ウィジェットです。インストール済みウィジェットの順番は、そのまま出力結果に反映します。右の中に先ほど作成した「リンクバナー」ウィジェットがあるのを確認して、それを左のエリアの中まで、ドラッグ＆ドロップします（図3-3）。
ウィジェットの順序を入れ替えたいときも、ドラッグ＆ドロップで可能ですので、位置が気になるときは調整してください。
ウィジェットセットの変更が完了したら「保存」してメニューバーの右から2つ目にある「サイトを再構築」アイコンをクリックします。再構築ウィンドウにある再構築対象のドロップダウンリストから「すべてのファイル」を選択し「再構築」します。
再構築が終了したら「サイトを再構築」アイコンの右にある「サイトの表示」アイコンをクリックして、トップぺージを見るとリンクバナーを確認できます（図3-4）。
今回は、MTタグを使わなくてもレイアウトを自由に組み替えられるウィジェットについて紹介しました。ウィジェットは一度作ればドラッグ＆ドロップで組み替えられ、便利なので積極的に使うと良いでしょう。
次回は、ブログ記事やアーカイブファイル名など保存ディレクトリやファイル名のカスタマイズを紹介します。
【参考文献】
「テンプレートタグリファレンス 」（http://www.movabletype.jp/documentation/appendices/tags/）（アクセス：2009/02）
「entry タグを含むテンプレートタグ 」（http://www.movabletype.jp/cgi-bin/mt4/mt-search.cgi?tag=entry&blog_id=3&IncludeBlogs=3）（アクセス：2009/02）
「asset タグを含むテンプレートタグ 」（http://www.movabletype.jp/cgi-bin/mt4/mt-search.cgi?tag=asset&blog_id=3&IncludeBlogs=3）（アクセス：2009/02）
