先日より作業を行っている「HTML5のMovable Type 5テーマ」はこんな感じ。

現在、マークアップはほとんど終了した。テンプレートの構成はブログ向けとしたためにシンプルになった。

ウェブサイトテンプレート

インデックステンプレート

• JavaScript
• jquery.js
• RSD
• Site Map
• slimbox2.css
• slimbox2.js
• スタイルシート
• メインページ
• リセットスタイルシート
• 最新記事のフィード

アーカイブテンプレート

• ウェブページ

テンプレートモジュール

• HTMLヘッダー
• カテゴリ
• コメント
• サイドバー
• トラックバック
• ナビゲーション
• ナビゲーションリスト
• バナーフッター
• バナーヘッダー
• ブログ記事の概要
• ヘッダナビ
• ヘッダナビリスト

システムテンプレート

• コメントプレビュー
• コメント完了
• ダイナミックパブリッシングエラー
• ポップアップ画像
• 検索結果

ブログテンプレート

インデックステンプレート

• JavaScript
• RSD
• メインページ

アーカイブテンプレート

• ウェブページ
• カテゴリ別ブログ記事リスト
• ブログ記事
• 月別ブログ記事リスト（不要？）

テンプレートモジュール

• HTMLヘッダー

システムテンプレート

• コメントプレビュー
• コメント完了
• ダイナミックパブリッシングエラー
• ポップアップ画像

HTMLヘッダーは、ウェブサイトとブログで共通化できないこともないが、一部区別したいところがあったので別になっている。レイアウトや細かいデザインはこれから。

MovableType 5（MT5 MTOS5）テーマ1030 とMovableType 4.2 無料テンプレート 2Column HTML5を元にして、HTML5でマークアップしたテーマを作成中

MovableType 5（MT5 MTOS5）テーマ1030 とは全くの別物。

まだ検索以外のシステムテンプレートとサイドバーには手をつけていない。なかなか進まないが今月中に完成させたい。

一緒に注文したiPhone 4 Dockも「納期は5~7営業日」となっていたのですが28日に分割発送、30日に到着。本日、iPhone 4 Bumperが届きました。

ぴったりフォフィットし、開口部やボタンの作りは「さすが」と思わせるものがありますね。

普段は裸で使って、車（eKワゴン）での充電時にダッシュボード下の「プチごみ箱」に放りこむので、その時だけ装着の予定。

昨日までの「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説でメインカラムがほぼ終了しましたので、本日はサイドバーについて解説します。

グローバルナビゲーションを設けておらず、主となるナビゲーションをカテゴリとしてnav要素でマークアップした。＊ブログにより違うかもしれない。
TrackBackとPoweredをaside要素、その他をsection要素でマークアップした。

また、ブログ記事リストなどと同様に「Recent Entries」と「Archives」はul要素ではなくol要素でリスト化した。

<nav>
<h2>Categories</h2>
<ul>
<li>カテゴリー</li>
</ul>
</nav>
<section>
<h2>Recent Entries</h2>
<ol>
<li>ブログ記事</li>
</ol>
</section>
<section>
<h2>Archives</h2>
<ol>
<li>月別アーカイブ</li>
</ol>
</section>
<section>
<h2>Tags</h2>
<ul>
<li>タグ</li>
</ul>
</section>
<section>
<h2>Comments</h2>
<ol>
<li>ブログ記事タイトル</a>
<div><span>コメント投稿者 投稿月日</span></div>
</li>
</ol>
</section>
<aside>
<h2>TrackBacks</h2>
<ol>
<li>ブログ記事タイトル</a>
<div><span>送信者</span></div></li>
</ol>
</aside>
<section>
<h2>Photo</h2>
<ol>
<li>サムネイル</li>
</ol>
</section>
<section>
<h2>Feed</h2>
<ul>
<li>Atom</li>
</ul>
</section>
<aside>
<h2>Powered by </h2>
<ul>
<li>Movable Type</li>
<li>@Style</li>
</ul>
</aside>
<section>
<h2>Search</h2>
<ul>
<li>検索フォーム</li>
</ul>
</section>

コメントとトラックバックの「┗」はCSSの:before擬似要素で表示した。

div.comment-author span:before , div.ping-name span:before {
    content: " ┗ ";
}

昨日の「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説でコメントフォームについてやり残していましたので続きです。

コメントフォームでinput要素type属性の値に新しく加えられたemailとurlを利用した。

<label for="comment-email">電子メール</label>
<input type="email" value="">
<label for="comment-url">URL</label>
<input type="url" value="" >

現在実装できているのはOperaだけらしいが、コメント時に妥当なメールアドレスやURLを記述しないでボタンをクリックすると、以下のようにエラー表示してくれる。