はてなブログのページ構成

現在使っているテーマ

今は公式テーマのWideboardをカスタマイズして使っています。

• シンプル
• ソースコードを載せる時に変な箇所で改行されにくい（横幅が100%だから）

という点が気にいっていました。
ただし、最近記事が増えてきて、

• 検索ボタンやカテゴリが一番下にあるので使いづらい

というところが気になるようになり、右側にプロフィールやカテゴリを載せたくなってきました。
そこで今、２カラムの横に広がるリキッドレイアウトのオリジナルcssを作成中です。

はてなブログのページ構成

cssを作成するにあたって、はてなブログのおおまかなhtml構造を確認したのでメモとして簡単に残しておきます。
（デザインに関係しないと思われる箇所とか細かいところは割愛）

body
+ div#globalheader-container
+ div#container
  + div#container-inner
    + header#blog-title
    + div#content
      + div#content-inner
        + div#wrapper
          + div#main
            + div#main-inner
              + article#entry ・・・・・・・・・・(1)
                + div#entry-inner
                  + header#entry-header
                  + div#entry-content
                  + footer#entry-footer
              + article#entry
              + article#entry
              + ...

        + aside#box2          ・・・・・・・・・・(2)
          + div#box2-inner
            + div.hatena-module-profile
            + div.hatena-module-category
            + div.hatena-module-recent-entries
            + ...
+ footer#footer

• (1) article#entry が１記事分の内容。繰り返し出現します。
• (2) サイドバー。ここにプロフィールやカテゴリ、最近の記事などが入ります。

はてなブログのhtmlは想像したよりも分かりやすい構成だと思います。
当面の目標は #box2 を幅固定で右側に表示し、#wrapperか#main をウィンドウサイズに追従して広がるようにすることです。

参考

はてなブログテーマ制作の手引き - はてなブログ ヘルプ