MovableType 4.2 2Column HTML5の解説（ブログ記事）

2010年7月01日

Posted by @Style : 01:26 | コメント (0) | トラックバック (0)

引き続き、「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説です。

ブログ記事について

ブログ記事リストではないのでol要素でリスト化する必要はない。divで余白の調整、ブログ記事全体をarticleとする。前々回の解説のように「ブログ記事のタイトル」と「メタデータ」をheader要素とした。
＊余白の調整もarticle要素に任せて良いかもしれない。

タグ・トラックバック・コメントはセクションを分けた。それぞれのタイトルをheader要素でマークアップ。

他のブログから受けたトラックバックの内容はaside要素とした。コメントごとにarticle。コメントとトラックバック時刻はメタデータと同様にtime要素とした。

コメントフォームも解説すると長くなるので次回に。

<article>
<header>
<h2>ブログ記事のタイトル</h2>
<ul>
<li>メタデータ</li>
</ul>
</header>

ブログ記事の本文
ブログ記事の続き

<section>
<h3>タグ:</h3> 
<ul>
<li>エントリータグ</li>
</ul>
</section>

<section>
<header>
<h3>トラックバック</h3>
<p>トラックバックURL</p>
</header>

<aside>
<h4><$MTPingBlogName$> - 
<a href="<$MTPingURL$>"><$MTPingTitle$></a> (<a href="#ping-<$MTPingID$>">
<time datetime="<$MTPingDate format_name="iso8601"$>"><$MTPingDate format="%x %k時%M分"$></time></a>)</h4>
<p><$MTPingExcerpt$> <a href="<$MTPingURL$>">続きを読む</a></p>
</aside>
</section>

<section>
<header>
<h3>コメント</h3>
</header>

<article>
<header>
<h4><$mt:CommentAuthorLink$><time pubdate="pubdate" datetime="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></time></h4>
</header>
コメント本文
</article>

<h3>コメントする</h3>
コメントフォーム
</section>
</article>