カテゴリースラッグ欄に、英数字で名前をつける。

まず、カテゴリー作成時にカテゴリースラッグとして英数字の名前をつけます。
この名前をcssのクラス名として使います。

例)「日記」のカテゴリースラッグを「diary」に設定。

クラス名として出力

カテゴリーアーカイブページに表示する場合

<div <?php if (is_category()) { echo 'class="' . get_category_parents($cat,FALSE,' ',TRUE) . '"';
} ?>>
/*ここに内容*/
</div>

個別記事ページに表示する場合

<div <?php $cat = get_the_category();
 echo 'class="' . get_category_parents($cat[0],FALSE,' ',TRUE) . '"';
?>>
/*ここに内容*/
</div>

と書くと、

例えば、
親カテゴリーのカテゴリースラッグ名が「parent」で
子カテゴリーのカテゴリースラッグ名が「cat1」
の場合、下記のように出力されます。

<div class="parent cat1">
/*ここに内容*/
</div>

あとはCSSでデザインを編集すればOK!

テンプレートタグの説明

WordPressで、親カテゴリーを表示する関数が
get_category_parents();
です。

この関数はパラメータ挿入ができ、
get_category_parents(1,2,’3’,4);

1.カテゴリーIDを指定 デフォルトは、「$cat」(表示しているカテゴリーIDを挿入)
2.リンクを設定 TRUE ・・・ リンクする
FALSE ・・・ リンクしない(デフォルト)
3.カテゴリー名の区切り文字を指定 デフォルトは、「/」
4.カテゴリースラッグの表示を指定 TRUE ・・・ 表示 
FALSE  ・・・ 非表示(デフォルト)