MT でページごとのデザインに変化をつける

/ 事業開拓部　

橋本 (2009年11月 8日 23:48)
Movable Type / Webサイト構築・Web戦略 / 事業開拓部

MTは、各カテゴリー、エントリーともに共通のテンプレートを使用するため
どうしてもページごとの見た目が単調になりがちです。

MTテンプレートに少し記述を追加するだけで、簡単にデザインに変化をつける事ができます。

□カテゴリーごとに、読込む画像を変える
ヘッダーの下のメインとなる画像や、ページタイトルに使うと効果的です。
　テンプレート「ブログ記事リスト」への記述
<img src="<$mt:BlogURL$>image/<$mt:CategoryLabel$>.jpg">

　テンプレート「ブログ記事」への記述
<img src="<$mt:EntryCategory$>.jpg">

□カテゴリーごとに書き出す項目を変える
　カテゴリー「cat」の時だけ「main.jpg」が書き出されます。
　これの応用で、カテゴリーによって書き出す内容を全く変える事もできます。

　テンプレート「ブログ記事リスト」への記述
<mt:IfCategory name="cat">
<img src="<$mt:BlogURL$>image/main.jpg">
</mt:IfCategory>

　テンプレート「ブログ記事」への記述
<mt:EntryIfCategory name="cat">
<img src="<$mt:BlogURL$>image/main.jpg">
</mt:EntryIfCategory>
　

次は読込むCSSを変える方法です。

□「body」のIDでスタイルを区別する
<mt:if name="main_index">
<body id="top">
<mt:Else name="Category_archive">
<body id="<$mt:CategoryLabel$>">
<mt:Else name="entry_archive">
<body id="<$mt:EntryCategory$>">
</mt:Else></mt:Else></mt:If>
　カテゴリー「cat」の場合、スタイル名の前に「#cat」をつける事で
　カテゴリー「cat」のページだけに有効なスタイルを指定出来ます。
#cat h1 {
}
#cat h2 {
}

□読込むCSSをファイルごと変える
<mt:if name="main_index">
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<mt:Else name="Category_archive">
<link rel="stylesheet" href="category_<$mt:CategoryLabel$>.css" type="text/css" />
<mt:Else name="entry_archive">
<link rel="stylesheet" href="entry_<$mt:EntryCategory$>.css" type="text/css" />
</mt:Else></mt:Else></mt:If>
　カテゴリー「cat」の場合、以下のCSSファイルを読込みます。
　ブログ記事リスト：ctegory_cat.css
　ブログ記事　　　：entry_cat.css

これに「ウェブページ」が加われば、さらにバリエーションが広がりますね。

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
Movable Typeを使用したWebサイト構築