PTP ~ エキサイティングにいいモノがある

いいものやアプリをドーンと紹介していきます

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

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

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

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

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

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

  1. トップページ
  2. 記事ページ
  3. アーカイブページ(カテゴリー・月別・検索結果)
  4. アバウトページ
  5. 固定ページ

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

body タグにクラスが付く

例えばトップページ(はてなブログ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 のクラスが付与される。

付与されるクラス名一覧

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

これらのクラス毎にcssを書いて細かくカスタマイズすることが出来るようになる。

想定するカスタマイズ例
  • 〇〇ページだけサイドバーを表示しない
  • 〇〇ページだけにコンテンツを表示する
  • あるカテゴリーは背景の色を変える
  • 写真カテゴリーは写真のサイズを大きめ

などなど夢が広がってくる。

body タグのカスタマイズでこれで随分とワードプレスとも戦えるようになるはずだ。はてなブログの強みははてなが管理する堅牢なインフラだと考える。よりコンテンツに集中しやすくなるのがメリット。がんばりましょう。 

Webデザイン良質見本帳  目的別に探せて、すぐに使えるアイデア集

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

 

 

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

  • 作者: 伊藤庄平,益子貴寛,久保知己,宮田優希,伊藤由暁
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2017/02/25
  • メディア: 単行本
  • この商品を含むブログを見る
 

 

 

© 2016-2020 PTP All rights reserved.