記事ヘッダ

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

<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; }

関連記事