サイドバー
基本構造
<aside id="sidebar"> <div id="side-a"> <!-- side-aの中身 --> </div> <div id="side-b"> <!-- side-bの中身 --> </div> </aside> <!-- End of sidebar -->
他と比べるとかなり単純な作りになっています。
テーマを片側サイドバーで作るときは #sidebar に配置指定を、両側サイドバーで作るときは #side-a, #side-b(そして#sidebar)を適切に設定します。中身の要素については全く区別がありません。
サイドバーモジュールの基本構造
<div class="hatena-module" id="side-information"> <div class="hatena-moduletitle">Information</div> <div class="hatena-modulebody"> <ul class="hatena-section"> <li class="to-artlist"><a href="#">記事一覧</a></li> <li class="to-print"><a href="#" rel="nofollow">印刷用の表示</a></li> </ul> </div> <!-- hatena-modulebody --> </div> <!-- hatena-module -->
一般的な sidebar の構造です。Ver1、Ver2時代にはてなダイアリーのテーマと互換性をとっていた時の名残で、クラス名などがそのまま残っています。
- .hatena-module : 表示要素のブロックです。sidebarの要素は必ず div.hatena-module に囲まれます。
- .hatena-moduletitle : モジュールのタイトルです。存在しないこともあります。
- .hatena-modulebody : モジュールの本体です。中の書式はモジュールにより様々です。
- ul.hatena-section : コメント一覧や最近の記事一覧など、モジュールの中身がリストになるときは、必ずこのクラスで出力されます。ただしulが存在しないこともあるので注意が必要です。(検索ボックスなど)
各モジュールのデザイン
各モジュール個別のデザインは特にする必要はありません(もちろんデザインしても構いません)。
標準モジュールのidやクラスのリストを載せておきますが、詳しい中身についてはデザイン編集からHTMLソースを表示させてみてください。
- #side-information : ブログの情報を表示。
- #side-search : 検索ボックス
- #side-tag-list : タグ一覧
- #side-recent-article : 最近の記事
- #side-recent-comment : 最近のコメント
- #side-month-list : 月別記事リスト
- #side-calendar : カレンダー
- #side-system-info : ランタイム、実行時間などのシステム情報。
- #side-login-information : ログイン情報の表示(システムモードのみ)。タイトルなし。
- .side-contents-list : コンテンツリスト