単一記事の表示時
単一の記事を表示するときの <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">は出力されません。