更新:2018-05-07
カスタマイズやテーマ作成が捗るよう、はてなブログのid、classをツリーと図に表してみました。自分用ですが、せっかくなので公開します。
取り上げるid、classの選定や画面上への表示には、以下で紹介されているサンプルテーマ「Boilerplate」を利用しています。
ツリー
トップページ、記事ページなど
#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ページ
見にくいって言わないで…
こんな記事も書いています
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る