はてなブログにカテゴリ機能がついたので、CSSでデザインを当ててみる

HTML

<!-- タイトルのBOX -->

<div id="top-box">
  <div class="breadcrumb">
    
    <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://lealog.hateblo.jp/">トップ</a>
      &gt;
      <span itemprop="child" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
        jQuery
      </span>
    </div>
    
  </div>
</div>

<!-- 記事本体のBOX -->

うちのブログでは、サイトタイトルの下辺りです。
というわけで、狙うべきは"breadcrumb"クラスの模様。

CSS

#top-box .breadcrumb div{
	/* ここにお好みのスタイルを！ */
}

あえて1つ深いdivを取ってるのは、「カテゴリを絞り込んでいない状態」でも、"#top-box"のdivや".breadcrumb"のdivが存在するからです。
うっかり背景色なんか当ててしまった時には、謎の空間が出現することになります・・・！

HTML

<!-- h1の記事タイトル -->

<div class="categories ">
	<a href="/category/jQuery">jQuery</a>	
	<a href="/category/JavaScript">JavaScript</a>
</div>
   
<!-- 編集ボタンやらヘッダの終わりやら -->

カテゴリがないときは、

<div class="categories no-categories"></div>

となってます。

CSS

header.entry-header .category{
	/* ここにお好みのスタイルを！ */
}
header.entry-header .category a{
	/* ここにお好みのスタイルを！ */
}

header.entry-header .no-categories{
	/* ここにお好みのスタイルを！ */
}

ノーカテゴリな時も要素は存在するみたいやので、display:noneとかした方がいいかもしれません。

基本で当ててるデザインによっては、多少違うかもしれません。
まぁHTMLの構造がそう変わるとは思わないので、恐らく大丈夫やと思いますけど。