mt.VicunaにHTML5を適用するとどうなるか
- MovableType | Vicuna | WWW
誕生日の更新から実に2週間以上経ってしまいましたが,どうにかこうにか生きております.
先週は,会社の新春ボウリング大会がありまして,スコア自体は大したことはなかったのですが(2ゲームのアベレージで160行きました),金を出してまで買う必要性を感じていなかった「電気湯沸かし器的なケトル」(いまいち品物の名称がよく分かっていないな(^^;)が景品として当たってしまいました.ここ最近寒いせいか,頻繁にコーヒーを飲むことが多くなっていたので普通に常用しています.
そんな話はさておき(苦笑),そこここで使われている(と思われる)mt.Vicunaのお話.サポートフォーラムが無くなってしまい,個人的にもちょっとだけテンションが下がっていたりしていますが,ここでmt.VicunaにHTML5を適用するとした場合に,マークアップがどのように変わるかを,超個人的な意見ではありますが書いてみようと思います.
mt.Vicunaの現在の階層構造
mt.Vicunaの場合,基本的にXHTML1.0 Strictを使っているので,ベースとなるマークアップに関してはある程度完成されていたります.俺自身もStrictについてはもう10年ほど触っているので,今のところ違和感は全くありません.
このテンプレートの階層構造をざっくりとですが書いてみると,以下のようになるかと思います.メインインデックスを基に書いていますが,記事単体とかもこんな感じになります.
- ヘッダー(id:header)
- コンテント(id:content)
- メイン(id:main)
- エントリー(class:section entry)
- サイドバー(id:utilities)
- メイン(id:main)
- フッター(id:footer)
divも非常に最小限で,とっても綺麗にまとまっていますね.
HTML5の構造にするとこうなる(と思う)
上記のdiv階層構造をHTML5にすると,こんな風になると考えられます(変更部分を強調しています).勿論,個人的な解釈だったりするので,間違っている部分もあるのかもしれません.
- header
- コンテント(id:content)
- メイン(id:main)
- article
- サイドバー(id:utilities)
- メイン(id:main)
- footer
ちょっと安易すぎじゃないか?と思う人もいるでしょうけど,あまりゴテゴテにするとHTML5でのマークアップが飾りとなってしまうし,そもそもHTML5では「レイアウト的なマークアップについては,div要素を使う」ことが勧められているのでこれでいいと思っています.
各ブロック内でのHTML5マークアップについて
これだけだったら簡単すぎるので,一応各ブロック内のマークアップについても書いておきます.勿論,個人的な解釈なので,色々意見はあるかと思いますが,参考にして下さい>作者様(ぉ
headerブロック
- h1(サイト名)
- p(サイトの概要)
- nav(グローバルナビゲーション)
サイト名とサイトの概要をhgroupで纏めるということも考えたけど,そこまで細かくする必要があるのか?と思ってしまい却下となりました(ぉ
コンテント内のメイン内にあるarticleブロック
ここについてのみ,個別記事の場合で書いてみます.
- header
- h1(記事のタイトル)
- ul(投稿者情報,投稿日時,カテゴリー名など)
- 記事本体(class:textBody)
- aside(関連する記事)
- footer(次の記事/前の記事)
- section(コメントの表示・コメントの投稿)
- section(トラックバック表示)
正直に言うと,次の記事/前の記事に関しては,footerでなくても良いような気もしていたりします.単純に「headerもあるんならfooterもあったほうが自然だろう」ということで入れているだけだったり(ぉ
この段階でちょっと思ったのですが,HTML5でマークアップした場合,記事ごとのタイトルやサブタイトルのマークアップが各テンプレートで統一されることとなるので,見出しレベルのマークアップを調整するプラグイン(見出しレベルを調整するモディファイアを追加する Movable Type プラグイン)が要らなくなりますね.まぁ,使っている人にしか分からないんですけどね(ぉぃ
コンテント内にあるサイドバーブロック
実を言うと,ここのマークアップが一番の悩みの種だったりします.というのも基本dl要素(定義リスト)でマークアップしているのですが,HTML5で定義リストの用途がより限定されたようですので,定義リストによるマークアップはなじまないというのが自分が出した結論です.
そうすると,sectionでまとめて...というのも考えられますね.サイドバー自体はdivのままだったりするんですが,関連リンク集のようなものでもあるので,asideでもよさそうな気もしていますし...
- ナビゲーション(class:navi)
- section
- h1(ウィジェットのタイトル1)
- (ウィジェットの内容1)
- section
- h1(ウィジェットのタイトル2)
- (ウィジェットの内容2)
- section
- その他(class:others)
- section
- h1(ウィジェットのタイトル3)
- (ウィジェットの内容3)
- section
- h1(ウィジェットのタイトル4)
- (ウィジェットの内容4)
- section
一応今のところはこれで行こうかな...と考えていますが,どんなもんでしょうかね?(え
footerブロック
ここの内容に関してはほとんど変化がありません.ただし,address要素の用途がより明確になりました(作成者の住所や連絡先を示している部分のみ使用する)ので,mt.Vicunaのテンプレートをそのまま使っている場合,コピーライト表示の部分は注釈等を表すsmall要素でマークアップする必要があります.うちの場合,コピーライト表示部分に自分のメールアドレスが入っていたりするのでそのままで問題無し(ぉぃ
一応まとめ(え?
基本こんな感じでマークアップしようかと考えていますが,いかがなものでしょうか?>作者様(ぉ
一応書いておくと,スマートフォン用のテンプレートについては,このマークアップをベースに,もっと簡略化する方向でいこうかな...と思っています.尤も,まだ形すら作っていませんけど(苦笑).
Comments:0