カテゴリー別デザイン

TypePadでトップページをぱっと見てどのカテゴリーの記事なのか、わかるようにしたい！という考えから実践した、カテゴリー別デザインの方法を紹介します。実際にこのウェブログのトップページには適用されています。これは、テンプレートの構成とスタイルシートが有る程度理解している人向けです。
注）必ずテンプレートのソースのバックアップをとるなどしてからチャレンジしてください。あくまで自己責任でお願いしますm(_ _)m

まず、書き出される記事にカテゴリーのidを付ける必要があります。
<div id="center">
<div class="content">
<MTEntries>
の内側に、記事のidをつける以下の一文が書かれていると思います。
<a id="a<$MTEntryID pad="1"$>"></a>
その文の”上に”以下の一文を書きます。
<div id="a<MTEntryCategories><$MTCategoryID$></MTEntryCategories>">
そして、下の方をみると</MTEntries>がありますので、その”上に”</div>を記述します。
こうすることによって、「aカテゴリーID」というidを記事につけることができます。（例　a18032)

ここでポイントなのは「a」を先頭に追加していることです。スタイルシートでは数字だけのものはidやclassとして認識してくれないというのもあるのですが、もしカテゴリーを決めずに投稿しても「a」というidがつくので判別できるからです。

ここで一端保存して再構築をし、サイトの確認をして下さい。見た目上は変わりませんがソースをみると、カテゴリーごとのidを確認できると思います。当然そのidはスタイルシートの変更の時に必要になりますので、メモをしておいて下さい。

次に、スタイルシートの編集をします。（ここでは例としてカテゴリーidを「a18032」としています。）
本来はcontentクラスで囲われている部分なのですが、カテゴリーidの方が内側なのこちらが優先されます。

以下実際のこのウェブでの現時点での設定の一例です。
・記事全体
#a18032 {
background-color: #FFFFFF;
border: 1px solid #FF1100;
margin: 12px;
}

・記事のタイトル
#a18032 h3 {
color: #FFFFFF;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: large;
text-align: left;
font-weight: bold;
background-color: #FF1100;
margin-bottom: 10px;
}

・記事本文
#a18032 p{
color: #333333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}
・日付やコメント等へのリンク
#a18032 p.posted {
color: #999999;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: x-small;
border-top: 1px dotted #999999;
text-align: left;
font-weight: bold;
margin-bottom: 5px;
line-height: normal;
padding: 3px;
}

といったようにすることにより、idが一致した場合はそれが適用されます。

以上長くなりましたが、この方法を使えばカテゴリーごとにまったく違うデザインをすることが可能になると思います。
この方法は他のテンプレートページにも応用が利くと思いますので、また今後紹介していく予定です！