【解説】はてなブログのHTML/CSSの構造を解析する（2）

・テスト用ブログに投稿した「サンプルエントリー」を開いておく
　（デベロッパーツールを使うため）
・テスト用ブログの管理画面から、
　「デザイン→ カスタマイズをクリック→{} デザイン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の構造については、参考文献の書籍（はてなブログカスタマイズガイド: 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>