サイドバー

基本構造

<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 : コンテンツリスト