テーマ開発ドキュメント

サイドバーにはサイドバーモジュールと呼ばれる単位（divブロック）でデータが出力されます。モジュールは「最近の記事」や「最近のコメント」が１つのモジュールとなっています。

• 全体構造
• モジュール
  • ul.hatena-section
• infomationモジュール
• 最近の記事
• 最近のコメント
• 最近のトラックバック
• カテゴリ一覧
• 過去の月別一覧
• 検索
• 管理メニュー
• システム情報

• コンテンツ一覧
• カレンダー

■全体構造

<div class="sidebar">
　<div class="side-a">
　　　<div class="side-a-top"></div><div class="side-a2">
　　　　　サイドバー前半
  　  </div><div class="side-a-bottom"></div>
  </div>
　<div class="side-b">
　　　<div class="side-b-top"></div><div class="side-b2">
　　　　　サイドバー後半
  　  </div><div class="side-b-bottom"></div>
　</div>
</div>

サイドバー装飾のため複数のブロックが置かれていますが、基本的には両サイドバーへの対応を見越した次ような構成です。

<div class="sidebar">
  <div class="side-a">
    サイドバー前半
  </div>
  <div class="side-b">
    サイドバー後半
  </div>
</div>

■モジュール

モジュールはサイドバーのブロックの別名です。モジュールは次の構造をしています。

<div class="hatena-module" id="モジュールID">
<div class="hatena-moduletitle">タイトル</div>
<div class="hatena-modulebody">
（内容）
</div> <!-- hatena-modulebody -->
</div>

ul.hatena-section

モジュール内で使用するリスト要素は、（はてなダイアリーからの）慣例として ul.hatena-section の中にli要素として出力されます。

ulは出力されないこともあるので、ulの存在を前提とした位置調整（マージンやパディング）は推奨できません。必ず、div.hatena-module にて内部の出力域を正しく設定するための padding を設定してください。

■infomationモジュール

<div class="hatena-module" id="side-infomation">
<div class="hatena-moduletitle">Infomation</div>
<div class="hatena-modulebody">
<ul class="hatena-section">

日記帳の説明やRSSなどへのリンクが出力されるクラスです。タイトル部は標準で非表示に設定されています。*1

RSS以外のLIRS, hina-diのリンクを消したい場合は次のようにします。

a.side-lirs, a.side-hina { display:none; }

■最近の記事

<div class="hatena-module" id="side-recent-diary">
<div class="hatena-moduletitle">最近の記事</div>
<div class="hatena-modulebody">
<ul class="hatena-section">
	<li><a href="〜">adiary 1.43リリース情報</a></li>
		：
</ul>

記事が１件もなかったり、非表示に設定されているときは出力されません。

■最近のコメント

<div class="hatena-module" id="side-recent-comment">
<div class="hatena-moduletitle">最近のコメント</div>
<div class="hatena-modulebody">
<ul class="hatena-section">
	<li><a href="〜">記事タイトル</a>
	    <span class="author"><a href="〜">名前</a></span></li>

コメントが１件もなかったり、非表示に設定されているときは出力されません。

■最近のトラックバック

<div class="hatena-module" id="side-recent-trackback">
<div class="hatena-moduletitle">最近のトラックバック</div>
<div class="hatena-modulebody">
<ul class="hatena-section">
	<li><a href="〜">トラックバックを受信した記事タイトル</a>
	    <span class="tb-from">from</span>
	    <a href="〜">送信元ブログ名</a> <span class="author">送信元執筆者</span></li>

トラックバックが１件もなかったり、非表示に設定されているときは出力されません。

送信元執筆者は存在しないときは出力されません。

■カテゴリ一覧

<div class="hatena-module" id="side-category-list">
<div class="hatena-moduletitle">カテゴリ一覧</div>
<div class="hatena-modulebody">
<ul class="hatena-section main-category">
	<li><a href="http://adiary.blog.abk.nu/&category?cat=adiary">adiary</a>
	    <a class="switch" href='〜'>▼</a> (139)
	<ul class="hatena-section sub-category">
		<li><a href="〜">アナウンス</a> (6)</li>

カテゴリが１種類しか存在しないとき、非表示に設定されているときは出力されません。

サブカテゴリがあり閉じられる機構が付いているため若干複雑になっています。上位カテゴリには ul.main-category、サブカテゴリには ul.sub-category がクラス出力されます。

■過去の月別一覧

<div class="hatena-module" id="side-month-list">
<div class="hatena-moduletitle">過去ログ</div>
<div class="hatena-modulebody">
<ul class="hatena-section">
	<li><a href="〜/200710">2007年10月</a> <span class="count">(<span>2</span>)</span></li>
	<li><a href="〜/200709">2007年09月</a> <span class="count">(<span>2</span>)</span></li>

標準では出力されず、設定により出力できます。記事が１件も存在しない月は出力されません。

■検索

<div class="hatena-module" id="side-search">
<div class="hatena-moduletitle">検索</div>
<div class="hatena-modulebody">
<form method="GET" action="〜" name="search">
<input type="text" name="word" size="12" value="">
<input type="submit" value="検索"><br>
<input type="radio" name="all" value="0" >タイトル
<input type="radio" name="all" value="1" checked>全文
</form>
</div> <!-- hatena-modulebody -->
</div> <!-- hatena-module -->

これはulではなくフォームで出力されます。

■管理メニュー

<div class="hatena-module" id="side-login">
<div class="hatena-moduletitle">管理メニュー</div>
<div class="hatena-modulebody">
<ul class="hatena-section">
<li><a class="login" href="/?login" title="ログイン"><span>ログイン</span></a>

デフォルトでは非表示になっていますが、通常右上に表示されるログインや管理、日記を書くなどのリンクをサイドバーに配置したいときに使用します。具体的には右上の表示をオフにし、サイドバーの表示をオンにします。

（cssサンプル）
div.adminmenu { display: none; }
div#side-login { display: block; }

■システム情報

<div class="hatena-module" id="side-system-info">
<div class="hatena-moduletitle">System info</div>
<div class="hatena-modulebody">
Apache : worker<br>
Runtime : mod_perl2<br>
RDBMS : PostgreSQL<br>
</div></div>

システム情報は標準では常に出力されます。消去したい場合はCSSで次のようにします。

div#side-system-info { display: none; }