はてなブログのHTML構造

「はてなブログテーマ制作の手引き」というページがはてなによって公開されているのですが、掲載されている内容は悪く言えば不親切、良く言えば必要最低限という量で、まあ要するに本気でテーマを制作しようとなると何度も開発者ツールを開いては閉じての繰り返しでとても面倒なのです。

なので、この前ブログに導入した Hightlight.js のシンタックスハイライト機能をフル活用して、はてなブログのHTML雛形と全てのテーマで共通に読み込まれる globalheader.css によって指定されるスタイルをちまちまとまとめることにしました。

［2015/05/14］投稿日
［2015/05/14］最終更新日

サイドバーモジュール

基本構造

<div class="hatena-module hatena-module-XX">
    <div class="hatena-module-title">
        モジュール名
    </div>
    <div class="hatena-module-body">
        モジュール内容
    </div>
</div>

XX には各モジュール固有の文字列が入る。

• プロフィール…profile
• 検索…search-box
• リンク…links
• 最新記事…recent-entries
• 注目記事…entries-access-ranking
• 月別アーカイブ（リスト）…archive（date-archive-type="default"）
• 月別アーカイブ（カレンダー）…archive（date-archive-type="calendar"）
• カテゴリー…category
• 最近のコメント…recent-comments
• HTML…html
• 参加グループ…circles

モジュール内容

検索

<form class="search-form">
    <input class="search-module-input" type="text" placeholder="ブログ内検索"></input>
    <input class="search-module-button" type="submit" value="検索"></input>
</form>

リンク

<ul class="hatena-urllist">
    <li>
        <a href="#">リンク</a>
    </li>
</ul>