はてなブログのbodyタグに付与されるクラス名～ページ毎のデザイン変更を可能にする

はてなブログはbodyタグにクラス名が付与される。

このクラス名を駆使すればトップページ、記事ページでCSSを分ける等デザインの幅を広げることができる。

はてなブログにはある程度のカスタマイズの自由度があるが、ワードプレスに比べると難しかった。しかしこれを知っていればカテゴリー毎に異なったデザインを用意するなどが可能となる。

はてなブログはいくつかの種類のページがある。

これらにそれぞれ特徴的なクラス名が付与される。

例えばトップページ（はてなブログProの一覧形式指定）のクラスは以下のようになる。

トップページの例

  <body class="page-index enable-top-editarea page-archive globalheader-off">

この場合 page-index がトップページを表しており、page-archive は記事を一覧表示するアーカイブページとしてのクラスも付与されている。

記事ページの例

  <body class="page-entry enable-top-editarea enable-bottom-editarea category-カテゴリー1 category-カテゴリー2 globalheader-off">

記事ページの場合はpage-entry というクラスと自分が付けたカテゴリーを表すcategory-カテゴリー1 や category-カテゴリー2 のクラスが付与される。

page-index
トップページを表す
page-archive
一覧形式で表示するページ
page-archive-category
カテゴリーページを表す（一覧形式で表示されるがはてなブログPro加入者はある程度自由にHTMLで情報を記入できる）
page-entry
記事ページを表す
category-XXX
自分が付けたカテゴリー名
page-about
プロフィールのaboutページ
page-static_page
固定ページ