前回（【解説】はてなブログのHTML/CSSの構造を解析する - daisuke20240310のブログ）は、はてなブログのHTML/CSSの構造を解析するための準備を行いました。
今回は、具体的に、HTML/CSSの構造の中身を見ていきます。
参考文献
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
準備編2：はてなブログのHTML/CSSの構造を解析する（2） ← 今回
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する
準備物
下記準備物の入手方法については、第1回目の事前準備（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）で説明しています。
（デベロッパーツールを使うため）
・テスト用ブログの管理画面から、
「 デザイン→ カスタマイズをクリック→{} デザインCSS」で開いておく
・「Minimalism」テーマのCSSソースファイル
・「サンプルエントリー」のHTMLのソースファイル
はてなブログのHTMLの全体像
通常のWebページというのは、以下のようなHTMLの構造をしていて、はてなブログも同様です。
分かりやすいように、はてなブログが使用してるHTMLタグと「サンプルエントリー」の内容を記載しておきました。
<html> <head> <title>サンプルエントリー - daisuke20240310testのブログ（ブラウザのタイトルで使われる）</title> </head> <body> <header>daisuke20240310testのブログ（ブログタイトルのあるヘッダー領域）</header> <div id="content"> 記事本体（コンテンツ）、サイドバーなど（メイン領域） </div> <footer>はてなブログをはじめよう！（はてなブログの運営が用意したフッター領域）</footer> </body> </html>
HTMLタグだけなら、そんなに複雑ではないですが、CSSは非常に複雑になりがちです。
はてなブログのHTML/CSSの構造については、参考文献の書籍（）に、とても丁寧に解説されているので、そちらも参照して頂ければと思います。
bodyタグの全体像
ここは、随時追記していきたいと思いますが、まずは、bodyタグ（目に見えるところのほとんど全部）の構造を書いていきます。
「サンプルエントリー」のHTMLのソースファイルを開くと、bodyタグを見つけることができます。
さらに進んでいくと、headerタグを見つけることができます。この中はブログのタイトルなどが入っています。
その下に、divタグに#contentを見つけることができます。ここからが記事本体の全体です。ちなみに、#contentの#はIDセレクタを示していて、contentは識別子です。IDセレクタはページ内で一度しか使用できません。
さらにdivタグが複数あり、階層が深くなっていきますが、あまり重要ではない（と思う）ので進んでいくと、articleタグに.entryを見つけることができます。ちなみに、.entryの.はクラスセレクタを示しており、entryは識別子です。クラスセレクタはページ内で複数記述することができ、複数個所を一気にスタイルを変更することができます。
.entryは、1つのdivタグの.entry-innerを挟みますが、headerタグの.entry-headerと、divタグの.entry-contentと、footerタグの.entry-footerを持っています。
headerタグの.entry-headerは、記事のタイトルが入っています。
divタグの.entry-contentは、目次の.table-of-contentと、以降は、記事の具体的な内容が入っています。
footerタグの.entry-footerは、記事の著者、記事の日付、読者になるリンク、複数のSNSボタン、コメントを書くリンクなどが入っています。
以下は、最小限のHTMLのソースコードに、実際に記事に見えるパーツを入れたものです。ここに書いた内容がだいたい理解できていれば、テーマのカスタマイズは十分に可能だと思います。
<body> <div id="globalheader-container"><iframe id="globalheader"></iframe></div> <nav> <div class="blog-controlls-title">ブログタイトル（ナビゲーション用）</div> <a href="">読者になる</a> </nav> <div id="container"> <div id="container-inner"> <header id="blog-title"> <div id="blog-title-inner"> <div id="blog-title-content"> <h1 id="title">ブログタイトル</h1> <h2 id="blog-description">ブログのひとこと説明</h2> </div> </div> </header> <div id="top-editarea"></div> <div id="top-box">パンくずリスト</div> <div id="content"> <div id="content-inner"> <div id="wrapper"> <div id="main"> <div id="main-inner"> <article class="entry"> <div class="entry-inner"> <header class="entry-header">記事タイトル</header> <div class="entry-content">記事本体</div> <footer>記事の著者、記事の日付、読者になるリンク、複数のSNSボタン、コメントを書くリンクなど</footer> </div> </article> <div class="pager">次の記事、前の記事</div> </div><!-- "main-inner" --> </div><!-- "main" --> <aside id="box1"><div id="box1-inner"></div></aside> </div><!-- "wrapper" --> <aside id="box2"> <div id="box2-inner"> <div class="hatena-module hatena-module-profile">プロフィール</div> <div class="hatena-module hatena-module-search-box">検索</div> <div class="hatena-module hatena-module-links">リンク</div> <div class="hatena-module hatena-module-recent-entries">最新記事</div> <div class="hatena-module hatena-module-archive"月別アーカイブ</div> </div> </aside> </div><!-- "content-inner" --> </div><!-- "content" --> <div id="bottom-editarea"></div> </div><!-- "container-inner" --> </div><!-- "container" --> <footer> <div id="footer-inner"> <p>Powered by Hatena Blog | ブログを報告する</p> </div> </footer> </body>
おわりに
今後は、具体的にテーマのカスタマイズを進めていきます。その際、HTML/CSSの構造の情報について、追加で必要になった場合は、こちらの記事に追記する予定です。
この記事が、誰かの助けになれば幸いです。
