「Blog」と一致するもの

MovableType 4.2 2Column HTML5の解説（headerとブログ記事リスト）

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

今回は・・・

banner_header.mtmlのheaderについて

h1要素にはMTBlogName、副題としてh2要素にMTBlogDescriptionを利用、これらをhgroup要素でグループ化。

ブログの説明「MTBlogDescription」を記述されない方も多いことから、<mt:If tag="BlogDescription">とし、MTBlogDescriptionがある場合のみh2要素を出力。見出しをグループ化するhgroup要素だが1個以上のh1～h6要素があればよいのでh1のみでも問題はない。

<header id="branding">
<hgroup>
<h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><$MTBlogName encode_html="1"$></a></h1>
<mt:If tag="BlogDescription"><h2><$MTBlogDescription$></h2></mt:If>
</hgroup>
</header>

メインページとブログ記事リスト

メインページとブログ記事リストはol要素でマークアップ。ブログ記事リストという位なのでリストにするのは当然かも知れない。新しい順に並ぶのでul要素ではなくol要素が適当だろう。

<div id="main">
<ol class="semantic-list">
<MTEntries lastn="5">
<li>
<$mt:include module="ブログ記事の概要"$>
</li>
</MTEntries>
</ol>
</div><!-- / main -->

次回に続く（はず）

MovableType 4.2 2Column HTML5の解説

MovableType 4.2 2Column HTML5の解説（概要）

MovableType 4.2 無料テンプレート 2Column HTML5は、リリースから約1ヶ月経過し少しずつダウンロードして頂いております。

HTML5は初めてという方もいらっしゃるようなので、数回にわたって（簡単に）解説し（ていきたいと思い）ます。

まずは基本形。

<!DOCTYPE html>
<html lang="<$MTBlogLanguage$>">
<head>
<meta charset="<$MTPublishCharset$>">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script src="<$MTLink template="javascript"$>"></script>
<link rel="stylesheet" href="<$MTLink template="Reset_Stylesheet"$>">
<link rel="stylesheet" href="<$MTLink template="styles"$>">
<title><$MTBlogName encode_html="1"$></title>
</head>
<body>
<header>
<hgroup>
<h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><$MTBlogName encode_html="1"$></a></h1>
<mt:If tag="BlogDescription"><h2><$MTBlogDescription$></h2></mt:If>
</hgroup>
</header>
<div id="content">
<div id="main">
<ol>
<MTEntries lastn="5">
<li>
<$mt:include module="ブログ記事の概要"$>
</li>
</MTEntries>
</ol>
</div><!-- / main -->
<div id="sub">
<div class="inner">
<$MTWidgetSet name="サイドバー"$>
</div>
</div><!-- /sub -->
</div><!-- /content  -->
<footer>
<p><small>Copyright &copy; 2010 yourdomain, All Rights Reserved.</small></p>
</footer>
</body>
</html>

主要なところだけ抜き出していますが、XHTMLから比べると非常にシンプル。

http://html5shiv.googlecode.com/svn/trunk/html5.jsはIEでHTML5の新要素section要素やarticle要素をブロック要素として振るまえるようにし、http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.jsでCSSを少しまともに解釈出来るようにします。IE9に期待を込めて<!--[if lt IE 9]>としました。

header要素とfooter要素でコンテンツ部分との分離を行います。今までaddress要素でマークアップしていたCopyrightはfooter内のsmall要素に変更。
＊HTML5でsmall要素は、見栄えをコントロールするプレゼンテーションモジュールからセマンティックな「細目を表す注釈」へと変更になったので注意が必要です。

次回に続く（はず）

Adobe Creative Suite 5 Web Premiumが届きました！

もともとWindowsでFireworksを使っておりましたのでPhotoshopやIllustratorの出番はかなり少なく、非常に古いバージョンを利用しておりました。
（htmlやCSSはHTML エディタで書いておりましたので、Dreamweaverは体験版を9年くらい前に使ったきりでした...）

昨年購入したMac miniにSEEdit Proをインストールしてhtml5を書いてみた際「これとFireworksがあればWindowsはクロスブラウザチェックだけでいいじゃん！」と思っていた矢先にCS5の発表。

迷いもなくmac版のCreative Suite 4 Web Standard（無償アップグレード付き）を購入。そして日曜（6月6日）にアップグレードのCreative Suite 5 Web Premiumが届きました。

Adobe Creative Suite 5 Web Premium

こんなに盛りだくさんのツールを、どこまで使えるか心配です。

MovableType 4.2 無料テンプレート 2Column HTML5 リリースしました

先日より作成しておりました「MovableType 4.2 無料テンプレート 2Column HTML5」をリリースしました。

HTML5でマークアップしチョコっとCSS3を使ったMovableType 4 .2専用テンプレートです。

HTML5でマークアップしたテンプレート

詳細は「MovableType 4.2 無料テンプレート 2Column HTML5」およびデモブログでご確認ください。

追記：MT5用のテーマ「MovableType 5 無料テーマ HTML5」も！

Movable Type 4.2のテンプレートをHTML5で書いてみた

そろそろHTML5で作ってみようと思い、やってみた。

HTML5でマークアップしたテンプレート

「メインページ」「ブログ記事リスト」サイドバーの「最近のブログ記事」「アーカイブ」にはolで番号を入れてみた。ブログ記事とウェブページのbrとimgの /はそのままでも良いのだが、気持ち悪いのでregex_replaceとreplaceで消した。

まだHTML5の要素をよく理解していないので、大いに間違っている所もあると思う。

5月1日追記：少し変更したが、ブログ記事のアウトラインが変だ。まだまだ変更する予定

5月9日追記：ブログ記事のアウトラインも変更。まだまだ変更する予定！

関連情報