console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

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

ぞくぞくと機能が増えてってますね!
ユーザーのフィードバックを受けて、こつこつ対応していく・・。
試行錯誤の繰り返しやろうけど、すごく楽しそうやなーと思います。(いっそ働かせてほs(ry

カテゴリ検索結果画面

検索されるということは、もちろん検索結果用の表示があるということで、いわゆる「パンくずリスト」で実装されている模様。
そりゃもちろんデザインをいじりたくなるわけで。
何にスタイルを当てればいいか、調べてみました。

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の構造がそう変わるとは思わないので、恐らく大丈夫やと思いますけど。

要望として

割と記事を書いてしまった後やと、再編集するのもすごく手間です・・。
自動で対応してくれたりせーへんかしら・・?(ちらっ

期待して、作業するのはちょっと待ってみることにしますw