
こんにちは、Kome(@chankomeppy)です。
はてなブログでカスタマイズをしていると、CSSが狙い通りに反映しないことが時々あると思います。
そんな時、はてなブログデフォルトのidや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
が入っています。
ブログヘッダー
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
が入っています。
記事ページ
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
が入っています。
トップページ(一覧形式)
section.archive-entry
記事
div.archive-entry-header
div.date .archive-date .first
(記事投稿日)
h1.entry-title
(記事タイトル)
(記事タイトルリンク)
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
(検索ワードをフォーム内に表示)
アーカイブ一覧ページ
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
が入っています。
○○=各モジュールの種類名です。
プロフィール
.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
(読者になるボタン)
検索
.hatena-module
.hatena-module-search-box
(検索)
div.hatena-module-title
div.hatena-module-body
form.search-form
(検索フォーム)
カテゴリー
.hatena-module
.hatena-module-category
(カテゴリー)
div.hatena-module-title
div.hatena-module-body
ul.hatena-url-list
(カテゴリーをリスト形式で表示)
最新記事
.hatena-module
.hatena-module-recent-entries
(最新記事)
div.hatena-module-title
div.hatena-module-body
ul.recent-entries .hatena-urllist
li.urllist-item .hatena-urllist
(最新記事をリスト形式で表示)
関連記事
.hatena-module
.hatena-module-related-entries
(関連記事)
div.hatena-module-title
div.hatena-module-body
ul.related-entries .hatena-urllist
li.urllist-item .related-entries-item
(関連記事をリスト形式で表示)
注目記事
.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・・・
(注目記事をリスト形式で表示)
リンク
.hatena-module
.hatena-module-links
(リンク)
div.hatena-module-title
div.hatena-module-body
ul.hatena-urllist
(リンクをリスト形式で表示)
月間アーカイブ
.hatena-module
.hatena-module-archive
(月間アーカイブ)
div.hatena-module-title
div.hatena-module-body
ul.hatena-urllis
(年月をリスト形式で表示)
HTML
.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
(記事タイトルリンク)
全体図まとめ
各パーツを個別にみてきましたが、最後に全体図をまとめます。
div#globalheader-container
はてなブログヘッダー
div#container
div#container-inner
ブログヘッダー
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#bottom-editarea
フッター(デザインより編集可能)
footer#footer
はてなブログフッター
footer#footer-inner
address.footer-address
(〇〇のブログ)
p.services
(Powerd by Hatena Blog)
さいごに
ブログカスタマイズやテーマ作成のお役に立ちましたら嬉しいかぎりです。
-
リンクChapter1でHTMLとCSSの基本について分かりやすく解説されています。「HTMLって何?」「CSSって何?」というビギナーの方にオススメ。Kindle Unlimited
対象。
-
リンク辞書的な感じで使える入門書。はてなブログのカスタマイズでもよく使うCSSが分かりやすくまとめられている。ブログをこれからどんどんカスタマイズしていきたい!という方にオススメ。
-
リンクレスポンシブデザインのWebサイトを作るためのテキスト。高度なカスタマイズをしたり、ブログテーマを自作したりする上級者の方にオススメ。Kindle Unlimited
対象。