cBlog

Tips for you.

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

スポンサーリンク
※当ブログのAmazon、iTunes、サウンドハウス等のリンクはアフィリエイトを利用しています。

更新:2018-05-07

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

取り上げるid、classの選定や画面上への表示には、以下で紹介されているサンプルテーマ「Boilerplate」を利用しています。

help.hatenablog.com

 

ツリー

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

#2018/05/07 <body>付与クラスをより詳しく。ツリーに公式関連記事等追加。

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

html
 ┣head
 ┗body
   ┣div#globalheader-container
   ┣div#container
   ┃ ┗div#container-inner
   ┃   ┣header#blog-title
   ┃   ┃ ┗div#blog-title-inner
   ┃   ┃   ┗div#blog-title-content
   ┃   ┃     ┣h1#title
   ┃   ┃     ┗h2#blog-description
   ┃   ┣div#top-editarea
   ┃   ┣div#top-box
   ┃   ┃ ┗div.breadcrumb
   ┃   ┃   ┗div.breadcrumb-inner
   ┃   ┃     ┣a.breadcrumb-link
   ┃   ┃     ┣span.breadcrumb-gt
   ┃   ┃     ┣span.breadcrumb-child
   ┃   ┃     ┣span.breadcrumb-gt
   ┃   ┃     ┗span.breadcrumb-child
   ┃   ┣div#content
   ┃   ┃ ┗div#content-inner
   ┃   ┃   ┣div#wrapper
   ┃   ┃   ┃ ┗div#main
   ┃   ┃   ┃   ┗div#main-inner
   ┃   ┃   ┃     ┣article.entry
   ┃   ┃   ┃     ┃ ┗div.entry-inner
   ┃   ┃   ┃     ┃   ┣header.entry-header
   ┃   ┃   ┃     ┃   ┃ ┣div.date
   ┃   ┃   ┃     ┃   ┃ ┃ ┗a
   ┃   ┃   ┃     ┃   ┃ ┃   ┗time
   ┃   ┃   ┃     ┃   ┃ ┃     ┣span.date-year
   ┃   ┃   ┃     ┃   ┃ ┃     ┣span.hyphen
   ┃   ┃   ┃     ┃   ┃ ┃     ┣span.date-month
   ┃   ┃   ┃     ┃   ┃ ┃     ┣span.hyphen
   ┃   ┃   ┃     ┃   ┃ ┃     ┗span.date-day
   ┃   ┃   ┃     ┃   ┃ ┣h1.entry-title
   ┃   ┃   ┃     ┃   ┃ ┣div.categories
   ┃   ┃   ┃     ┃   ┃ ┣div.customized-header(記事ページのみ)
   ┃   ┃   ┃     ┃   ┃ ┃ ┗div.entry-header-html
   ┃   ┃   ┃     ┃   ┃ ┗div.entry-header-menu
   ┃   ┃   ┃     ┃   ┣div.entry-content
   ┃   ┃   ┃     ┃   ┗footer.entry-footer
   ┃   ┃   ┃     ┃     ┣p.entry-footer-section
   ┃   ┃   ┃     ┃     ┃ ┣span.author
   ┃   ┃   ┃     ┃     ┃ ┗span.entry-footer-time
   ┃   ┃   ┃     ┃     ┃   ┗a
   ┃   ┃   ┃     ┃     ┃     ┗time.updated
   ┃   ┃   ┃     ┃     ┣div.hatena-star-container
   ┃   ┃   ┃     ┃     ┃ ┣span.hatena-star-comment-container
   ┃   ┃   ┃     ┃     ┃ ┗span.hatena-star-star-container
   ┃   ┃   ┃     ┃     ┣div.social-buttons
   ┃   ┃   ┃     ┃     ┃ ┗div.social-button-item
   ┃   ┃   ┃     ┃     ┣div.customized-footer
   ┃   ┃   ┃     ┃     ┃ ┣div#entry-footer-secondary-modules(記事ページのみ)
   ┃   ┃   ┃     ┃     ┃ ┃ ┗div.hatena-module-related-entries
   ┃   ┃   ┃     ┃     ┃ ┃   ┣div.hatena-module-title
   ┃   ┃   ┃     ┃     ┃ ┃   ┗div.hatena-module-body
   ┃   ┃   ┃     ┃     ┃ ┃     ┗ul.related-entries
   ┃   ┃   ┃     ┃     ┃ ┃       ┗li.related-entries-item
   ┃   ┃   ┃     ┃     ┃ ┃         ┗div.related-entries-item-inner
   ┃   ┃   ┃     ┃     ┃ ┃           ┣a.related-entries-image-link
   ┃   ┃   ┃     ┃     ┃ ┃           ┃ ┗img.related-entries-image
   ┃   ┃   ┃     ┃     ┃ ┃           ┣div.related-entries-date-link
   ┃   ┃   ┃     ┃     ┃ ┃           ┣a.related-entries-title
   ┃   ┃   ┃     ┃     ┃ ┃           ┗div.related-entries-entry-body
   ┃   ┃   ┃     ┃     ┃ ┗div.entry-footer-html(記事ページのみ)
   ┃   ┃   ┃     ┃     ┗div.comment-box
   ┃   ┃   ┃     ┃       ┣ul.comment
   ┃   ┃   ┃     ┃       ┃ ┣li.entry-comment
   ┃   ┃   ┃     ┃       ┃ ┃ ┣p.comment-user-name
   ┃   ┃   ┃     ┃       ┃ ┃ ┃ ┣img.hatena-id-icon
   ┃   ┃   ┃     ┃       ┃ ┃ ┃ ┗a.comment-user-id
   ┃   ┃   ┃     ┃       ┃ ┃ ┃   ┗span.comment-nickname
   ┃   ┃   ┃     ┃       ┃ ┃ ┃     ┣span.user-name-nickname
   ┃   ┃   ┃     ┃       ┃ ┃ ┃     ┣span.user-name-paren
   ┃   ┃   ┃     ┃       ┃ ┃ ┃     ┣span.user-name-hatena-id
   ┃   ┃   ┃     ┃       ┃ ┃ ┃     ┗span.user-name-paren
   ┃   ┃   ┃     ┃       ┃ ┃ ┣div.comment-content
   ┃   ┃   ┃     ┃       ┃ ┃ ┗p.comment-metadata
   ┃   ┃   ┃     ┃       ┃ ┃   ┣a.permalink
   ┃   ┃   ┃     ┃       ┃ ┃   ┣time
   ┃   ┃   ┃     ┃       ┃ ┃   ┣span.hatena-star-comment-container
   ┃   ┃   ┃     ┃       ┃ ┃   ┗span.hatena-star-star-container
   ┃   ┃   ┃     ┃       ┃ ┗li.read-more-comments
   ┃   ┃   ┃     ┃       ┗a.leave-comment-title
   ┃   ┃   ┃     ┗div.pager
   ┃   ┃   ┃       ┣span.pager-prev
   ┃   ┃   ┃       ┃ ┗a
   ┃   ┃   ┃       ┃   ┗span.pager-arrow
   ┃   ┃   ┃       ┗span.pager-next
   ┃   ┃   ┃         ┗a
   ┃   ┃   ┃           ┗span.pager-arrow
   ┃   ┃   ┗aside#box2
   ┃   ┃     ┗div#box2-inner
   ┃   ┃       ┗div.hatena-module
   ┃   ┃         ┣div.hatena-module-title
   ┃   ┃         ┗div.hatena-module-body
   ┃   ┗div#bottom-editarea
   ┗footer#footer
     ┗div#footer-inner
       ┣div.guest-footer(ログインしていない場合のみ)
       ┣address.footer-address
       ┃ ┗a
       ┃   ┣img
       ┃   ┗span.footer-address-name
       ┗p.services
         ┣a
         ┗a.report-abuse-link

<body>のクラスには、ページの種類によって次表のクラスが付きます。

ページの種類 付与クラス
トップページ page-index
記事ページ page-entry
aboutページ page-about
archiveページ page-archive
archive/categoryページ page-archive
page-archive-category
category-カテゴリー名
categoryページ page-category-category_name
category-カテゴリー名
searchページ page-archive
固定ページ page-static_page
static-page-カスタムURL
AND
static-page-layout-entry
OR
static-page-layout-header-footer

archive/categoryページ(/archive/category/カテゴリー名)は、カテゴリーのリンクから飛べるページで一覧形式です。categoryページ(/category/カテゴリー名)は全文形式で、リンクはされていないようです。

 

archiveページ

#2018/05/07 より詳細に。

┗div#main-inner
  ┗div.archive-entries
    ┗section.archive-entry
      ┣div.archive-entry-header
      ┃ ┣div.date
      ┃ ┃ ┗a
      ┃ ┃   ┗time
      ┃ ┃     ┣span.date-year
      ┃ ┃     ┣span.hyphen
      ┃ ┃     ┣span.date-month
      ┃ ┃     ┣span.hyphen
      ┃ ┃     ┗span.date-day
      ┃ ┗h1.entry-title
      ┣div.categories
      ┣a.entry-thumb-link
      ┃ ┗div.entry-thumb
      ┗div.archive-entry-body
        ┣p.entry-description
        ┗span.social-buttons
          ┣a.bookmark-widget-counter
          ┃ ┗img
          ┗span.star-container
            ┣span.hatena-star-comment-container
            ┗span.hatena-star-star-container

 

サイドバーモジュール

#2018/05/07 ツリーをより詳細に。

.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

 

プロフィールモジュール
┗div.hatena-module-profile
  ┣div.hatena-module-title
  ┗div.hatena-module-body
    ┣a.profile-icon-link
    ┃ ┗img.profile-icon
    ┣span.id
    ┃ ┣a.hatena-id-link
    ┃ ┗a
    ┃   ┗i.badge-type-pro
    ┗div.profile-description

 

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

 

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

 

図解

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

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

 

記事ページ

記事ページ図解

 

archiveページ

archiveページ図解

 

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

 

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

yaritakunai.hatenablog.com

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

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