【カスタマイズ用】はてなブログのHTML構造まとめ - 【ちゃんこめBlog】インド在住OLの雑記ブログ

こんにちは、Kome（@chankomeppy）です。

はてなブログでカスタマイズをしていると、CSSが狙い通りに反映しないことが時々あると思います。

そんな時、はてなブログデフォルトのidやclassを理解していれば、セレクタを詳しく指定することができるので、細かい部分もピンポイントでカスタマイズできるようになります。

というわけで、自分の備忘録も兼ねて、はてなブログのHTML構造をまとめてみました。

はてなブログでカスタマイズしている人や、テーマを自作する方の参考になれば幸いです。

大まかな構造
- 5つの主なパーツ
  - Tips: ページの種類とclass名
ヘッダーエリア
タイトル下編集エリア
メインコンテンツエリア
サイドバー
フッター
その他
全体図まとめ
さいごに

大まかな構造

はてなブログのHTML構造

bodyの中に色々と詰まっています。

5つの主なパーツ

はてなブログはざっくりと5つのパーツに分けることができます。

ブログヘッダーエリア
タイトル下編集エリア
メインコンテンツエリア
サイドバーエリア
フッター編集エリア

ヘッダーエリアには、ブログのタイトルと説明文が表示されます。タイトル画像はデザイン＞カスタマイズ＞ヘッダーからアップロードできます。

タイトル下編集エリアには、デザイン＞カスタマイズ＞ヘッダ＞タイトル下に記述したHTMLが表示されます。

メインコンテンツエリアには、ブログトップページや記事ページ、アーカイブページなどが表示されます。

サイドバーエリアには、デザイン＞カスタマイズ＞サイドバーで選択したモジュール（プロフィールや検索、人気記事など）が表示されます。

フッター編集エリアには、デザイン＞カスタマイズ＞フッタに記述したHTMLが表示されます。

Tips: ページの種類とclass名

ベースとなるbodyは、ページの種類によって以下のclassを持ちます。

トップページ（全文形式）
.page-index
トップページ（一覧形式）
.page-index .page-archive
記事ページ
.page-entry
アーカイブページ
.page-archive
カテゴリーページ
.page-archive-category
aboutページ
.page-about
固定ページ
.page-static_page

これらのclass名を使用すれば、ページの種類ごとにまとめてスタイルを指定することができます。

例えば、記事ページ本文（p）のフォントサイズのみを変更したい場合は、以下のように記述すればOKです。

.page-entry p {
  font-size: 17px;
}

以下のように記述すると、トップページのヘッダー（#blog-title）の背景色にだけ、黒色が適用となります。（他のページでは灰色が適用）

#blog-title {
  background-color: #aaa;
}
.page-index #blog-title {
  background-color: #000;
}

まとめて指定できるので、かなり便利ですー

次に、各エリアについて細かく見ていきます。

ヘッダーエリア

#blog-titleの中に、ブログタイトル名#titleとブログ説明文#blog-descriptionが入っています。

header #blog-title

ブログヘッダー

div#blog-title-inner

div#blog-title-content

h1#title
（ブログタイトル名）

h2#blog-description
（ブログ説明文）

タイトル下編集エリア

#top-editarea内に、グローバルメニューなどを設置するのが一般的です。

div#top-editarea

タイトル下（デザインより編集可能）

メインコンテンツエリア

①記事ページ、②トップページ（一覧形式）、③アーカイブページの3つのパターンをまとめました。

記事ページ

.entryの中に、記事ヘッダー.entry-header、記事本文.entry-content、記事フッター.entry-footerが入っています。

article.entry

記事ページ

div.entry-inner

header.entry-header

記事ヘッダー

div.date .entry-date .first
（記事投稿日）

h1.entry-title
（記事タイトル）

a.entry-title-link .bookmark
（記事タイトルリンク）

div.entry-categories .categories
（記事カテゴリー）

div.customized-header

div.entry-header-html
記事上（デザインより編集可能）

div.entry-content

記事本文

ul.table-of-content
（目次）

h2 h3 h4 h5 h6 p etc...
（見出し、段落など）

footer.entry-footer

記事下部分

p.entry-footer-section

span.author-vcard
（投稿者名）

span.entry-footer-time
（投稿日時：〇分/時間/日/か月/年前）

div.hatena-star-container
はてなスター

div.hatena-star-metadata
（デフォルトで非表示）

div.social-buttons
（SNS拡散用ボタン）

div.social-button-item
（各種SNSボタン）

div.customized-footer

div.entry-footer-modules

div.hatena-module .hatena-module-related-entries
（記事下の関連記事）

div.entry-footer-html
記事下（デザインより編集可能）

div.comment-box

ul.comment
（コメント）

a.leave-comment-title
（コメントを書くボタン）

div.pager .pager-permalink .permalink

span.pager-prev
（前の記事へのページャ）

span.pager-next
（次の記事へのページャ）

記事上と記事下は、デザイン＞カスタマイズ＞記事から編集できます。ここにアドセンス広告を入れたり、カスタマイズしたSNSシェアボタンを設置しているブログをよく見かけます。

articleの下にはページャがあります。

Tips: 記事本文内でCSSが効かないとき

CSSはセレクタ（タグ名、id、class）を詳しく指定した方が優先順位が高くなります。

例えば、記事本文内の見出し（h3）のスタイルを指定する場合、優先順位は上から順に高くなります。

.page-entry .entry .entry-inner .entry-content h3
.entry .entry-inner .entry-content h3
.entry-inner .entry-content h3
.entry-content h3
h3

記事本文内でCSSが効かないよ～という時は、上の例のようにセレクタを細かく指定してみると、解決できるのではないかと思います。

トップぺージ（一覧形式）

.archive-entryの中に、アーカイブ記事ヘッダー.archive-entry-header、カテゴリー.categories、サムネイル.entry-thumb-link、アーカイブ記事説明文.archive-entry-bodyが入っています。

div.archive-entries

トップページ（一覧形式）

section.archive-entry

記事

div.archive-entry-header

div.date .archive-date .first
（記事投稿日）

h1.entry-title
（記事タイトル）

a.entry-title-link
（記事タイトルリンク）

div.categories
（カテゴリー）

a.archive-category-link
（カテゴリーリンク）

a.entry-thumb-link
（サムネイル）

div.entry-thumb
（アイキャッチ画像）

div.archive-entry-body

p.entry-description
（記事説明文）

span.social-buttons
（はてなスター表示）

トップページのカテゴリー名を装飾したい！という場合は、以下のように指定できます。

.page-index .page-archive 
.archive-entries .categories {
  background-color: darkorange;
  font-size: 80%;
} 
.page-index .page-archive 
.archive-entries .categories a {
  color: #fff;
}

アーカイブページ

トップページ（一覧形式）とほとんど同じです。

header.archive-header-category
【日別･月別アーカイブ、カテゴリー別記事の場合】

h2.archive-heading
・yyyy-mm-ddから1日間/1か月間の記事一覧
・カテゴリー名

div.search-result
【キーワード検索の場合】

h2.archive-heading
・〇〇の検索結果

form.search-result-form
（検索ワードをフォーム内に表示）

div .archive-entries

アーカイブ一覧ページ

section.archive-entry

アーカイブ記事

div.archive-entry-header

div.date .archive-date
（記事投稿日）

h1.entry-title
（記事タイトル）

a.entry-title-link
（記事タイトルリンク）

div .categories
（アーカイブ記事カテゴリー）

a.entry-thumb-link
（サムネイル）

div.entry-thumb
（アイキャッチ画像）

div.archive-entry-body

p.entry-description
（記事説明文）

span.social-buttons
（はてなスター表示）

アーカイブページのみにスタイルを適用する場合は、.page-archiveではなく.page-archive:not(.page-index)と記述してください。

.page-archiveだと、トップページ（一覧形式）にもスタイルが適用となってしまうためです。

アーカイブページのカテゴリー名を装飾したい！という場合は、以下のように指定できます。

.page-archive:not(.page-index) 
.archive-entries .categories {
  background-color: darkorange;
  font-size: 80%;
} 
.page-archive:not(.page-index) 
.archive-entries .categories a {
  color: #fff;
}

サイドバー

.hatena-module.hatena-module-○○という箱の中に、タイトル.hatena-module-titleと本体.hatena-module-bodyが入っています。

○○＝各モジュールの種類名です。

プロフィール

div

.hatena-module
.hatena-module-profile

（プロフィール）

div.hatena-module-title
（サイドバータイトル）

div.hatena-module-body
（サイドバー本体）

a.profile-icon-link

img.profile-icon
（プロフィール画像）

span.id

span.user-name-nickname
（ニックネーム）

span.user-name-hatena-id
（はてなブログID）

div.hatena-follow-button-box
.btn-subscribe
.js-hatena-follow-button-box
（読者になるボタン）

検索

div

.hatena-module
.hatena-module-search-box

（検索）

div.hatena-module-title

div.hatena-module-body

form.search-form
（検索フォーム）

カテゴリー

div

.hatena-module
.hatena-module-category

（カテゴリー）

div.hatena-module-title

div.hatena-module-body

ul.hatena-url-list
（カテゴリーをリスト形式で表示）

注目記事

div

.hatena-module
.hatena-module-entries-access-ranking

（注目記事）

div.hatena-module-title

div.hatena-module-body

ul.entries-access-ranking .hatena-urllist

li.urllist-item .entries-access-ranking-item .rank1,2,3･･･
（注目記事をリスト形式で表示）

リンク

div

.hatena-module
.hatena-module-links

（リンク）

div.hatena-module-title

div.hatena-module-body

ul.hatena-urllist
（リンクをリスト形式で表示）

月間アーカイブ

div

.hatena-module
.hatena-module-archive

（月間アーカイブ）

div.hatena-module-title

div.hatena-module-body

ul.hatena-urllis
（年月をリスト形式で表示）

HTML

div

.hatena-module
.hatena-module-htmls

（HTML）

div.hatena-module .hatena-module-html
（HTML）

div.hatena-module-title

div.hatena-module-body

フッター

#bottom-editarea内に、新たなフッターを設置したり、スクリプトを記述したりします。

div#bottom-editarea

フッター（デザインより編集可能）

その他

記事ページ、カテゴリーページではパンくずリストも表示されます。

パンくずリスト#top-boxは#top-editareaと#contentの間に入ります。

div#top-box

div.breadcrumb

パンくずリスト

div.breadcrumb-inner

a.breadcrumb-link
（トップ）

span.breadcrumb-gt
（＞←この部分）

span.breadcrumb-child
（カテゴリー）

a.breadcrumb-child-link
（記事タイトルリンク）

全体図まとめ

各パーツを個別にみてきましたが、最後に全体図をまとめます。

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
（カテゴリー）

a.breadcrumb-child-link
（記事タイトルリンク）

div#content

div#content-inner

div #wrapper

div#main

div#main-inner

メインコンテンツ
･･･記事ページ
･･･トップページ
･･･アーカイブページ

aside#box2

サイドバー

div#box2-inner

サイドバーモジュール

div#bottom-editarea

フッター（デザインより編集可能）

footer#footer

はてなブログフッター

footer#footer-inner

address.footer-address
（〇〇のブログ）

p.services
（Powerd by Hatena Blog）

さいごに

ブログカスタマイズやテーマ作成のお役に立ちましたら嬉しいかぎりです。

ブログブログカスタマイズ

HTML・CSSを学べる書籍

リンク
Chapter1でHTMLとCSSの基本について分かりやすく解説されています。「HTMLって何？」「CSSって何？」というビギナーの方にオススメ。Kindle Unlimited対象。
リンク
辞書的な感じで使える入門書。はてなブログのカスタマイズでもよく使うCSSが分かりやすくまとめられている。ブログをこれからどんどんカスタマイズしていきたい！という方にオススメ。
リンク
レスポンシブデザインのWebサイトを作るためのテキスト。高度なカスタマイズをしたり、ブログテーマを自作したりする上級者の方にオススメ。Kindle Unlimited対象。

大まかな構造

5つの主なパーツ

Tips: ページの種類とclass名

ヘッダーエリア

タイトル下編集エリア

メインコンテンツエリア

記事ページ

Tips: 記事本文内でCSSが効かないとき

トップぺージ（一覧形式）

アーカイブページ

サイドバー

プロフィール

検索

カテゴリー

最新記事

関連記事

注目記事

リンク

月間アーカイブ

HTML

フッター

その他

全体図まとめ

さいごに