テーマ開発ドキュメント（Ver2用）

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

コンテンツ一覧

adiaryにはコンテンツ一覧を自動的に生成しサイドバー（等）に階層表示する機能があります。階層は任意で３階層まで指定できます。

<div class="hatena-module side-contents-list">
<div class="hatena-moduletitle">コンテンツ</div>
<div class="hatena-modulebody">
<ul class="hatena-section side-contents-list">
	<li><a href="/about.html">adiaryについて</a></li>
	<li><a href="/theme_doc/satsuki-main">メイン部</a>
	<ul class="hatena-section side-contents-list">
		<li><a href="/theme_doc/satsuki-mainh2">記事タイトル</a></li>
		<li><a href="/theme_doc/satsuki-bodyheader">記事ヘッダ</a></li>
	</ul></li>
</ul>
</div></div>

コンテンツはul階層の入れ子になっています。注意点は、他のモジュールはid指定で出力されるのに対し、コンテンツ一覧はクラス出力のみであることです。

これは理由があり、例えばこのテーマドキュメントのように「コンテンツがメインのサイト」としてadiaryを利用する場合、「日記帳の詳細設定」→「wiki設定」→「最上位コンテンツを項目化」をチェックすることで複数のモジュールをコンテンツのリストとして出力できるからです。この場合次のようになります。

<div class="hatena-module side-contents-list">
<div class="hatena-moduletitle"><a href="～">はじめに</a></div>
<div class="hatena-modulebody">
<ul class="hatena-section side-contents-list">
	<li><a href="～">テンプレートとテーマ</a></li>
</ul>
</div></div>

<div class="hatena-module side-contents-list">
<div class="hatena-moduletitle"><a href="～">satsukiテンプレート</a></div>
<div class="hatena-modulebody">
<ul class="hatena-section side-contents-list">
	<li><a href="～">ヘッダ部</a></li>
	<li><a href="～">メイン部</a>
	<ul class="hatena-section side-contents-list">
		<li><a href="～">記事タイトル</a></li>
		<li><a href="～">記事ヘッダ</a></li>
	</ul></li>
</ul>
</div></div>

<div class="hatena-module side-contents-list">
<div class="hatena-moduletitle"><a href="～">テーマ作成Tips</a></div>
<div class="hatena-modulebody">
<ul class="side-contents-list hatena-section">
</ul>
</div></div>

コンテンツに関するモジュールが複数出力されていることが分かります。コンテンツメニューの書式は普通のサイドバーモジュールと変えた方が扱いやすいです。

カレンダー

単純なようで、複雑なクラス構造をしているのがカレンダーです。

<div class="hatena-module" id="side-calendar">
<div class="hatena-moduletitle">カレンダー</div>
<div class="hatena-modulebody"><div class="side-calendarbody">
<table class="calendar" summary="calendar">
<tr class="calendar-month">
	<td class="calendar-prev-month" colspan="2">
	<a href="～/200709"><<</a></td>
	<td class="calendar-current-month" colspan="3">
	<a href="～/200710">2007/10</a></td>
	<td class="calendar-next-month" colspan="2">
	<a href="～/200711">>></a></td>
</tr>
<tr>
	<td class="calendar-sunday   w0">日</td>
	<td class="calendar-weekday  w1">月</td>
	<td class="calendar-weekday  w2">火</td>
	<td class="calendar-weekday  w3">水</td>
	<td class="calendar-weekday  w4">木</td>
	<td class="calendar-weekday  w5">金</td>
	<td class="calendar-saturday w6">土</td>
</tr>
<tr>
	<td></td>
	<td class='calendar-day w1'>1</td>
	<td class='calendar-day w2'>2</td>
	<td class='calendar-day w3 day-today'>3</td>
	<td class='calendar-day w4'>4</td>
	<td class='calendar-day w5'>5</td>
	<td class='calendar-day w6'>6</td>
</tr>
<tr>
	<td class='calendar-day w0'>7</td>
	<td class='calendar-day w1 w0 holiday' title="体育の日"><a href="～">8</a></td>
	<td class='calendar-day w2'>9</td>
	<td class='calendar-day w3'>10</td>
	<td class='calendar-day w4'>11</td>
	<td class='calendar-day w5 day-selected'><a href="～">12</a></td>
	<td class='calendar-day w6'>13</td>
</tr>
（中略）
<tr>
	<td class='calendar-day w0'>28</td>
	<td class='calendar-day w1'>29</td>
	<td class='calendar-day w2'>30</td>
	<td class='calendar-day w3'>31</td>
	<td></td>
	<td></td>
	<td></td>
</tr>
</table>
</div></div> <!-- side-calendarbody/hatena-modulebody -->
</div> <!-- hatena-module -->

カレンダーをあまり装飾しようと思わなければシンプルなのですが、同時クラス指定を駆使して多用な条件に対応しようと思い始めると非常に面倒くさくなります。*1

• 選択している日が当日の場合（"day-today day-selected"）
• 祝日を選択している場合（"holiday day-today"）
• 日曜や土曜日が当日の場合（"w6 day-today"）
• 祝日を選択していて、しかも当日の場合（"holiday day-today day-selected"）