タイトルの横に、カテゴリごとのアイコンがあるブログ。よく見かけますよね。結構ベタなテクニックなのですが、これを使うことで変化に富んだブログになると思います。応用としては、タイトル文字の色を変えたり、背景色を変えたり実は意外と使えたりします。今日はそんなやり方をご紹介。

まずは、MTの設定から。

１、カテゴリを作る。名前は日本語でも英語でも。お好きなように。
２、『カテゴリの編集』で『説明』部分に半角英数字で適当な単語を入力

次に、スタイルシートを編集。

１、まずはベースとなるクラス名を決める。たとえば『articleBase』など。ここは任意で構いません。
２、『カテゴリの編集』で入力した説明を、先ほどのベースの名前のあとにつけて、カテゴリの数だけクラスを作る。
ex), 説明が『Blog』の場合　→　.articleBaseBlog{width:○○px;}
説明が『infomation』の場合　→ .articleBaseinfomation{margin:○○px}
３、好きな配色、画像、padding、marginを設定

最後にカテゴリを表示させる部分。主に『ブログ記事の概要』や『ブログ記事』を編集します。

以下のように設定します。
<div class=”articleBase<MTEntryCategories><$MTCategoryDescription$></MTEntryCategories>”>
<h4><$MTEntryDate language=”en” format=”%A, %B %dth”$>
<mt:EntryTags>
<span class=”tags”><$mt:TagName$></span>
</mt:EntryTags>
</h4>
</div>
大切なのは１行目です。ほかは分かりやすくするために一緒に記入してるので、あまり気にしないでください。
最初に設定したベースとなるクラス名のあとに<MTEntryCategories><$MTCategoryDescription$></MTEntryCategories>を入れるのがポイントです。<$MTCategoryDescription$>で最初に設定した『説明』を表示させます。それによりクラス名を変える事が可能になります。

これで、出来上がりです。このテクニックは他の部分でも応用がきくのでぜひ！たとえばベースの名前を変えて、説明の設定をそのままに。新しいクラスを作れば、場所によっては同じカテゴリでも違うデザインに出来たりします。