システム開発ブログ

Movable Type

Webサイト構築・Web戦略

事業開拓部

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

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

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

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ