読者です 読者をやめる 読者になる 読者になる

cBlog

Tips for you.

はてなブログのidとclassのツリーと図解を作ってみた

Webデザイン

カスタマイズやテーマ作成が捗るよう、はてなブログのid、classをツリーと図に表してみました。自分用ですが、せっかくなので公開します。

取り上げるid、classや画面上への表示は、サンプルテーマ「Boilerplate」を利用しています。

help.hatenablog.com

 

ツリー

トップページ、記事ページなど

<xxx>がHTMLタグ、#xxxがCSSのid、.xxxがCSSのクラスです。

<body>のクラスには、トップページでは.page-index、記事ページでは.page-entry、aboutページでは.page-about、archiveページでは.page-archiveが付きます。

<html>
 ┣<head>
 ┗<body>
   ┣#globalheader-container
   ┣#container
   ┃ ┗#container-inner
   ┃   ┣#blog-title
   ┃   ┃ ┗#blog-title-inner
   ┃   ┃   ┗#blog-title-content
   ┃   ┃     ┣#title
   ┃   ┃     ┗#blog-description
   ┃   ┣#top-editarea
   ┃   ┣#top-box(カテゴリーページのみ)
   ┃   ┃ ┗.breadcrumb
   ┃   ┣#content
   ┃   ┃ ┗#content-inner
   ┃   ┃   ┣#wrapper
   ┃   ┃   ┃ ┗#main
   ┃   ┃   ┃   ┗#main-inner
   ┃   ┃   ┃     ┣.entry
   ┃   ┃   ┃     ┃ ┗.entry-inner
   ┃   ┃   ┃     ┃   ┣.entry-header
   ┃   ┃   ┃     ┃   ┃ ┣.date
   ┃   ┃   ┃     ┃   ┃ ┣.entry-title
   ┃   ┃   ┃     ┃   ┃ ┣.categories
   ┃   ┃   ┃     ┃   ┃ ┣.customized-header(記事ページのみ)
   ┃   ┃   ┃     ┃   ┃ ┃ ┗.entry-header-html
   ┃   ┃   ┃     ┃   ┃ ┗.entry-header-menu
   ┃   ┃   ┃     ┃   ┣.entry-content
   ┃   ┃   ┃     ┃   ┗.entry-footer
   ┃   ┃   ┃     ┃     ┣.entry-footer-section
   ┃   ┃   ┃     ┃     ┣.social-buttons
   ┃   ┃   ┃     ┃     ┣.customized-footer
   ┃   ┃   ┃     ┃     ┃ ┗.entry-footer-html(記事ページのみ)
   ┃   ┃   ┃     ┃     ┗.comment-box
   ┃   ┃   ┃     ┃       ┣.comment
   ┃   ┃   ┃     ┃       ┃ ┗.entry-comment
   ┃   ┃   ┃     ┃       ┃   ┣.comment-user-name
   ┃   ┃   ┃     ┃       ┃   ┃ ┗.hatena-id-icon
   ┃   ┃   ┃     ┃       ┃   ┣.comment-content
   ┃   ┃   ┃     ┃       ┃   ┗.comment-metadata
   ┃   ┃   ┃     ┃       ┗.leave-comment-title
   ┃   ┃   ┃     ┗.pager
   ┃   ┃   ┃       ┣.pager-prev
   ┃   ┃   ┃       ┗.pager-next
   ┃   ┃   ┗#box2
   ┃   ┃     ┗#box2-inner
   ┃   ┃       ┗.hatena-module
   ┃   ┃         ┣.hatena-module-title
   ┃   ┃         ┗.hatena-module-body
   ┃   ┗#bottom-editarea
   ┗#footer

 

archiveページ

┗#main-inner
  ┗.archive-entries
    ┗.archive-entry
      ┣.archive-entry-header
      ┃ ┣.date
      ┃ ┗.entry-title
      ┣.categories
      ┗.archive-entry-body
        ┣.entry-description
        ┗.social-buttons

 

サイドバーモジュール

.hatena-moduleには、モジュール別に以下のクラスが付きます。

モジュールclass
プロフィール .hatena-module-profile
検索 .hatena-module-search-box
リンク .hatena-module-links
最新記事 .hatena-module-recent-entries
関連記事 .hatena-module-related-entries
注目記事 .hatena-module-entries-access-ranking
月別アーカイブ .hatena-module-archive
カテゴリー .hatena-module-category
最近のコメント .hatena-module-recent-comments
HTML .hatena-module-html
参加グループ .hatena-module-circles
執筆者リスト .hatena-module-authors-list

 

プロフィールモジュール
┗.hatena-module-profile
  ┣.hatena-module-title
  ┗.hatena-module-body
    ┣.profile-icon-link
    ┃ ┗.profile-icon
    ┣.id
    ┗.profile-description

 

リンク・最新記事・月別アーカイブ・カテゴリー・最近のコメントモジュール
┗.hatena-module-xxx
  ┣.hatena-module-title
  ┗.hatena-module-body
    ┗.hatena-urllist

 

検索モジュール
┗.hatena-module-search-box
  ┣.hatena-module-title
  ┗.hatena-module-body
    ┗.search-form
      ┣.search-module-input
      ┗.search-module-button

 

図解

タグ、id、class名と画面上の表示を対応させています。原色を選んだら超サイケデリックな見た目になっちゃいました。

高解像度なのでプリントして手元に置いておくとか。

 

記事ページ

f:id:cruller:20161023101049p:plain

 

archiveページ

f:id:cruller:20161023101131p:plain

 

見にくいって言わないで…

 

こんな記事も書いています

yaritakunai.hatenablog.com

yaritakunai.hatenablog.com

yaritakunai.hatenablog.com

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)