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

記事本文の構造を示します。

記事記述用として必要なクラスは次で示します。

• 非公開メッセージ
• div.section
• div.footer
• 見出し要素
  • 時刻付き見出し

非公開メッセージ
<div class="section">
  <h3><a href="～" name="～"><span class="sanchor">■</span></a>見出し</h3>
  ～本文～
  <h4><a href="～" name="～"><span class="sanchor"></span>小見出し</a></h4>
  ～本文～
  <h5><a href="～" name="～">小々見出し</a></h5>
  ～本文～
</div>
<div class="footnote">
  ～注釈～
</div>
<div class="section">
  <h3><a href="～" name="～"><span class="sanchor">■</span></a>見出し２</h3>
  ～本文～
</div>

非公開メッセージ

非公開記事の場合、div.section の手前に次のHTMLが出力されます*1。

<strong class="warning">【この記事は非公開です】</strong><br>

div.section

記事本文はいくつかの「div.section」からなります。div.section の外に記事本文が出力されることは現状ありませんが、できれば div.section がなくてもまともに表示できるようにしてください。

div.footer

	<p class="footnote"><a href="～" name="fn2">*2</a> : 注釈1</p>
	<p class="footnote"><a href="～" name="fn3">*3</a> : 注釈1.1</p>

注釈が出力されます。注釈は各セクションごとに（div.sectionの直後に）出力されます。

見出し要素

<h3><a href="～" name="～"><span class="sanchor">■</span></a>見出し</h3>
<h4><a href="～" name="～"><span class="sanchor"></span>小見出し</a></h4>
<h5><a href="～" name="～">小々見出し</a></h5>
<h3><a href="～" name="～"><span class="sanchor">■</span></a>見出し</h3>

見出し要素は標準では"h3"のみアンカーマーク（span.sanchor）が付きます。アンカーが空の場合は、見出し全体がリンクになります*2。h4にアンカーマークが付くこともあります。（h5にアンカーマークが付くことがありません）

konomiテーマのようにクラス指定を使ってアンカーを画像に変えることもできます。

div.body h3 span.sanchor {
	font-size: 0pt;
	padding: 16px 23px 0 0;
	line-height: 0;
	background-image:    url("petal-large.gif");
	background-position: bottom right;
	background-repeat:   no-repeat;
	width: 0; height; 0:
	_padding: 0;
	_width: 23px; _height: 16px; /* for IE */
	color: #fef;
}

時刻付き見出し

見出しおよび小見出しにはその項目が書かれた時刻（または日付）が付くこともあります。

<h3>
	<a href="～#1152588924" name="1152588924"><span class="sanchor">■</span></a>
	時刻付き見出しです <span class="timestamp">2006/07/11</span>
</h3>

意外に多くの情報が出力されるのがこの記事ヘッダ部です。

• はてブアイコン
• 書き込み日時
• カテゴリ
• 書き込んだ人
• 編集へのリンク
• 親記事へのリンク
• div.clear

<div class="body-header">
	～親記事へのリンク～
	～はてブアイコン～
	～書き込み日時～
	～分類～
	～書き込んだ人～
	～編集リンク～
</div>
<div class="clear"></div>

はてブアイコン

<a href="～" class="bookmark-icon"><img src="～" border="0" height="12" width="16"></a>
<a href="～" class="bookmark-icon"><img src="～" border="0" height="12" width="16"></a>
<a href="～" class="bookmark-count"><img src="～" border="0"></a>

日記帳の設定ではてなブックマークアイコンを表示する設定にしてあるとき、はてブアイコンが表示されます。「B!」などと書かれたアイコンで表示例はオフィシャルサイトを参照ください。

書き込み日時

<span class="write-date">2007/10/10 11:11</span>

記事の書き込み日時を表示します。wikiコンテンツの場合、日記帳の設定によっては記事日付（時刻なし）が出力されることもあります。

２つが同時に出力されることはありません。出力クラスの指定も同じ（示したとおり）です。

カテゴリ

(A)<span class="category">【<a href="～">adiary</a>::<a href="～">リリース</a>】</span>
(B)<span class="category">【<a href="～">adiary</a>】</span>

カテゴリ情報を出力します。カテゴリを利用していない場合（カテゴリ「未分類」の記事しか存在しない場合）は、カテゴリ欄を出力されません。

カテゴリ情報も、該当記事がサブカテゴリまで指定されているかどうかによって、(A)と(B)の２つの表示形式のいずれかに分かれます。

書き込んだ人

<span class="author" title="<@t.id>"><a href="～">書き込んだ人</a></span>

書き込んだ人の名前を表示します。日記帳の設定により表示をオン／オフできます。

IE以外のモダンブラウザで書き込んだ人の名前の手間に"by"を付けたい場合は次のようにします。

div.body-header span.author:before { content: " by "; }

編集へのリンク

<a href="～" class="diary-edit"><span>（編集）</span></a>

記事の編集権限がある場合編集リンクが表示されます。

親記事へのリンク

<div class="upnode"><a href="～"><span>≪</span>親記事へ</a></div>

その記事がwikiコンテンツであり、なおかつ親記事を持つ場合にリンクを出力します。

ヘッダと同じ行に左揃えで出力したいため、このクラスはデフォルトでフロートオブジェクトになっています。配置を変更する場合は、floatを解除するよう注意してください。

デフォルトの設定
div.upnode	{ float:left; padding-bottom: 0.5em; }

div.clear

floatオブジェクトによる回り込みを本文に影響させないためのクラス出力です。

div.clear	{ clear: both; }

記事タイトルは、記事を閉じるスイッチ、記事日付と共に出力されます。

• 開閉スイッチ
• 記事日付
• 記事タイトル

<h2>
	<a class="switch" href="～"><span class="open">▼</span></a>
	<a class="date" href="～"><span class="date">2007/10/10(水)</span></a>
	<span class="title"><a href="～">記事のタイトル</a></span>
</h2>

開閉スイッチ

<a class="switch" href="～"><span class="open">▼</span></a>

記事本文を開いたり閉じたりするスイッチです。JavaScriptにより実装されています。spanのクラスは開いているとき"span.open"であり、閉じているとき"span.close"です。クラス指定で表示を変更することができます。

またkonomiテーマなどのように画像アイコンなどに置き換えることもできます。

div.day h2 a.switch {
	font-size: 0pt;
	padding: 30px 26px 0 0;
	background-image: url("sakura-small.gif"); /* アイコン画像 */
	background-position: center;
	background-repeat: no-repeat;
	width: 0px; height: 0px;
	_padding: 0px;
	_width: 26px; _height: 30px; /* for IE */
}

デザイン上スイッチが邪魔ならば消してしまってもよいと思います。

div.day h2 a.switch { display: none; }

記事日付

<a class="date" href="～"><span class="date">2007/10/10(水)</span></a>

記事固有の日付です*1。wikiコンテンツなどでは出力されないことがあります。日付欄が出力されなくても位置ずれを起こさないように注意してください。（wiki化記事の判別はメイン部のdiv出力を参照してください。）

記事タイトル

<span class="title"><a href="～"><@t.title></a></span>

実際の記事タイトルです。span.title は常にh2中に存在します。

ページ送りを表示する領域です。

• ヘッダとフッタに（クラス名を除いて）同一内容が出力されます。
• ページ送りがないときは出力されません。
• ヘッダは埋め込みテキスト後、フッタは埋め込みテキスト前に出力されます。

• メッセージ部
  • メッセージ強調表示
• ページ送り（ヘッダ／フッタ共通）

メッセージ部

検索条件などを表示する領域です（例）。

基本的に記事と同じ構造ですが、div.system-msg が出力されること、div.day-additional が出力されないことに注意が必要です。p.ni はインデントをしないクラス指定です。（記事部参照）

<div class="system-msg"><div class="day"><div class="day2">
<h2><span class="title">メッセージ欄</span></h2>
	<div class="body"><div class="section">
		<p class="ni">メッセージ</p>
		<p>メッセージ２</p>
	</div></div>
</div></div></div>

メッセージ強調表示

システムメッセージ内に特に強調表示をしたい場合、<strong class="error">によりメッセージ表示が行われます。例えば検索を行った際に表示されます。

ページ送り（ヘッダ／フッタ共通）

クラス名の相違はありますが、中身は同一です。（フッタでは div.page-haed が div.page-foot になるだけ）。Ver1.43での出力形式は次のようになっています。

<div class="calendar page-head">
	<a href="～～" class="prev-page">前の記事</a>&nbsp;
	&nbsp;<a href="～～" class="next-page">次の記事</a>
</div>

なお、class="calendar"ははてな互換のためのクラス出力です。使用しないでください。

例えばヘッダ側のページ送りだけ表示したくないときは、

div.page-head { display:none; }

とします。IEを除くモダンブラウザではページ送りに修飾を付けることもできます。

a.prev-page:before { content: "≪"; }
a.next-page:after  { content: "≫"; }

メイン部は<div class="main">要素からなる記事本文を表示する領域です。

メイン部はさらに、メインヘッダ部、メインフッダ部、メイン記事部に分かれます。

• 構造
• メイン記事部
• メイン部ラスト

構造

<div class="main">
  <!--ヘッダ部-->
  メッセージ部
  <div class="page-head">
    ページ送り
  </div>

  １つ目の記事データ
  ２つ目の記事データ

  <div class="page-foot">
    メインフッタ（ページ送り）
  </div>
  メイン部ラスト
</div>

div.page-head, div.page-foot は同時にcalendarクラスが指定されていますが、はてな互換のためのクラスです。使用しないでください。

メイン記事部

記事本文の領域です。一つの記事は次の構造をしています。

<div class="day"><div class="day2">
	<h2 id="day1"> ～記事タイトル～ </h2>
	<div class="body">
		<div class="section body-header">
 			記事ヘッダ
                </div>
		<div class="clear"></div>
		    :
		～～記事本文～～
		    :
	<div class="clear"></div>
	</div> <!-- end of body -->

	<div class="day-additional"><div class="day-additional2">
		コメント欄
		トラックバック欄
	</div></div> <!-- end of day-additonal2/day-additonal -->
</div></div> <!-- end of day2/day -->

• その記事がwikiコンテンツである場合、１行目の"day"クラスに同時クラスとして"wiki"クラスが出力されます（class="day wiki"となります）。
• 単一表示モードのとき "day-single" が、複数表示モードのとき "day-plural" が "day" クラスに同時クラスとして出力されます（Ver1.44以降）。
• day-additional領域は、コメント／トラックバック欄のあるなしに関わらず必ず出力されます。ただしメッセージ欄やシステムモード（管理画面）では出力されません。
• h2は常に出力されます。しかし、ユーザーが埋め込みテキストを用いてタイトルなし欄を出力する利便性を考えた場合、h2がなくてもきちんと表示される方が望ましいです。

またシステムモードでは外側にdiv.editが出力されます。これを利用してシステムモードでの表示を変更することができます（Satsuki系のテーマでは、システムモードのみ背景色を付けています）。

<div class="edit"><div class="day"><div class="day2">
	記事データ
</div></div></div> <!-- end of day2/day/edit -->

メイン部ラスト

<div class="footer calendar">
<hr class="footer"><!--フッタ-->
	<div>埋め込みテキスト「s.text_footer」</div>
	<a href="http://adiary.org/">adiary</a> Version 1.43.<br>
</div>

adiaryのバージョンを出力している部分です。div.calendar ははてな互換のための出力です。使用しないでください。埋め込みテキストを使用した場合、adiaryバージョン表記の手前に出力されます。

テーマでよく見られるように、IEを除くモダンブラウザ使用時に、テーマのバージョンを出力する場合は次のようにします。

div.footer:after {
	content: "Mitsuki Theme Rev0.91beta Designed by Kaede.";
}

強制はしませんが、テーマ利用者のことを考えた場合この表記はシンプルなものにし"Coptyright"とは書かないようにしましょう。知らない人からみたら、ブログの記事の著作権表示と混同してしまいます。