単一記事の表示時

単一の記事を表示するときの <article> の構造を示します。

概要

<div id="article-box">
	<article id="article" class="article"><!-- コンテンツ時は wiki クラスも一緒に出力 -->
		<!-- 記事本文 -->
	</article>
	<aside id="com">
		<!-- コメント欄 -->
	</aside>
</div>

記事とコメント欄全体をbox(枠線等)で囲むこともできるように、このような構造になっています。

通常 #article-box は使う必要はないでしょう。

記事部

<article id="article" class="article"><!-- コンテンツ時は wiki クラスも一緒に出力される -->
	<h2>
		<a href="#" class="date">2015/05/23(土)</a>
		<a href="#" class="title">記事タイトル</a>
	</h2>
	<div class="body">
		<div class="body-header">
			<div data-module-name="dea_art-info">
				<!-- 投稿者、記事タグ、編集リンクなど -->
			</div>
		</div>
		<div class="body-main">
			<!-- <div>非公開記事メッセージ</div> -->
			<!-- 記事本文 -->
		</div>
		<div class="body-footer">
			<div data-module-name="dea_node-list"><!-- 関連記事があるとき -->
				<h3>関連記事</h3>
				<ul class="art-list">
					<li><a href="#">関連記事1</a></li>
					<li><a href="#">関連記事2</a></li>
				</ul>
			</div>
			<div class="social-buttons">
				<!-- ツイートボタン等。デザイン編集から配置したとき -->
			</div>
		</div>
	</div> <!-- End of body -->
</article>
  • body-header, body-footerは(中の要素がなくても)常に出力されます。
  • body-header や body-footer はデザイン編集によって中身が変わることがあります。

コメント部

<aside class="comment" id="com"><!-- コメント欄 -->
	<div class="caption">
		<span class="caption-title">コメント</span>
		<span class="com-num">(<span class="num">2</span>件)</span>
		<span class="abbr-msg"><a href="#">※古いコメントもすべて表示</a></span><!-- 省略時のみ -->
	</div>
	<div class="commentbody">
		<div class="commentview">
			<div class="swiches"><!-- 管理者のみ表示 -->
				<input type="checkbox"><label>投稿者情報の表示</label>
				<input type="checkbox"><label>すべて選択</label>
			</div>
			<div class="comment-one" id="c1">
				<div class="commentator">
					<span class="canchor"><a href="#c1">1</a>:</span>
					<span class="commentator author">おなまえ</span>
					<span class="comment-date">2015年04月01日(水) 午後10時38分</span>
				</div>
				<div class="comment-text"><!-- コメント本文 --></div>
				<div class="ip-host-agent"><!-- 管理者のみ出力。ボタン操作時のみ表示。 -->
					example.com (127.0.0.1)<br>
					Mozilla/5.0 (XXX) Safari/537.85.10
				</div>
			</div> <!-- comment-one -->

			<!-- コメントが複数あるときは、comment-one の繰り返し -->

			<div class="com-buttons"><!-- 管理者のみ表示 -->
				<button>表示に設定</button>
				<button>非表示に設定</button>
				<button>削除</button>
				<input type="checkbox"><label>削除確認</label>
			</div>
		</div><!-- end of comemntview -->

		<hr id="com-form-separator">

		<form data-module-name="dec_comment-form">
			<span class="caption-name">名前</span>
			<span class="separater">:</span>
			<span class="comment-author"><input type="text" name="name" class="w160 comment-author"></span>
			<button type="submit" id="post-comment">投稿</button><br>

			<textarea class="comment-txt w600" name="comment_txt" rows="3" required></textarea>

			<div class="post-comment-email"><!-- 設定時のみ -->
				<span class="caption-email">E-Mail(任意/非公開)</span>
				<span class="separater">:</span>
				<input class="w300" type="email">
			</div>
			<div class="post-comment-url"><!-- 設定時のみ -->
				<span class="caption-url">URL(任意)</span>
				<span class="separater">:</span>
				<input class="w300" type="url" name="url" value="<@esc(Form.url)>">
			</div>
			<!-- コメントフォーム追加メッセージ(設定時のみ) -->

		</form> <!-- comment form -->
	</div> <!-- commentbody -->
</aside> <!-- comment -->
  • コメントが存在せず、かつコメントを投稿できないとき、<aside id="com">は出力されません。
  • コメントが存在しないとき、<div class="comment-one">は1つも出力されません。
  • コメントを投稿できないとき、<form data-module-name="dec_comment-form">は出力されません。
  • コメントが存在しないか、コメントを投稿できないとき、<hr id="com-form-separator">は出力されません。
OK キャンセル 確認 その他