Loading...

【カスタマイズ用】はてなブログのHTML構造まとめ

現在ひっそりと工事中です。そのため表示が崩れている箇所があります。読みにくくなっていたらすいません。

タイトル画像(【カスタマイズ用】はてなブログのHTML構造まとめ)

こんにちは、Kome(@chankomeppy)です。

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

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

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

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

大まかな構造

はてなブログのHTML構造

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

5つの主なパーツ

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

  1. ブログヘッダーエリア
  2. タイトル下編集エリア
  3. メインコンテンツエリア
  4. サイドバーエリア
  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-recent-entries

(最新記事)

div.hatena-module-title

div.hatena-module-body

ul.recent-entries .hatena-urllist

li.urllist-item .hatena-urllist
(最新記事をリスト形式で表示)

関連記事

div

.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
(関連記事をリスト形式で表示)

注目記事

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#bottom-editarea

フッター(デザインより編集可能)

footer#footer

はてなブログフッター

footer#footer-inner

address.footer-address
(〇〇のブログ)

p.services
(Powerd by Hatena Blog)

さいごに

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