HTML5でWordPressのテンプレート(Theme)作成

この週末ちょっと時間があったので、自分でWordPressのテーマを作ってみました。せっかくなので、勉強がてらHTML5で組んでみることにしました。

「HTML5」とは、ホームページ作成で広く使われているマークアップ言語HTML(現行のバージョンは4.01)の時期バージョンとなります。またJavaScript APIやCSS3などの次世代Web技術を総称してHTML5と呼ぶこともあります。むしろ最近では後者の意味で使われることが一般的になってきています。

今回HTML5でマークアップしテンプレートを作成したわけですが、実際やるとなるとやはり難しかったです。意味付け(セマンティック)の部分では大変悩みましたね。

参考にしたサイトは以下となります。

どちらもタグを解説したサイトとなりますが、特にHTML5.JPhtml5doctorは大変役に立ちました。『html5 を使ったブログのデザイン』『aside を見直す』などの記事があり、事細かにタグの使い方、考え方について解説してくれています。

そんなこんなで、テーマのブログデザインは以下のように作りました。

<header>
 <hgroup>ブログタイトル</hgroup>
 <navi>ブログメニュー</navi>
</header>

<article>
 <header>エントリータイトル</header>
 <div>エントリー</div>
 <section>
  <article>コメント1</article>
  <article>コメント2</article>
 </section>
</article>

<div>
 <navi>サイドメニュー</navi>
</div>

<footer>
 <address>クレジット</address>
</footer>

まだまだうまくできていない部分もあると思うので、今後もっともっと洗練させていきたいですね。

マークアップ後の構文チェック(バリデート)には、以下のサイトが利用できます。

またアウトラインのチェックには以下のサイトが利用できます。

HTML5でWebサイトを構築したら、表示したいのがHTML5のロゴですね!WorldWide Web Consortium(W3C)が普及推進を目的にHTML5のクリエイティブ・コモンズライセンスの下で提供してくれています。以下のサイトよりダウンロードできます。

しかも面白いことに使用したHTML5の技術を選択してロゴをカスタマイズすることができます。私は「SEMANTICS」と「CSS / STYLING」の技術を使ったので、ロゴは以下のようになります。

HTML5 Powered with CSS3 / Styling, and Semantics

ということで、これまで使用していたテーマ「TwentyTen」とはお別れです…。ちなみにTwintyTenにもHTML5版の「TwentyTen Five」というのがあるようですね。

すでに新しいテーマに切り替えましたが、まだまだ完成しているわけではないので日々改良していく予定です。

コメント一覧

  1. ピンバック: HTML5 & CSS3のクロスブラウザー対応方法まとめ | mae's blog

     

  2. ピンバック: HTML5のaudio要素(audioタグ)で自作デモ曲をマークアップしてみました | mae's blog

     

  3. html5で検索してたらだどり着きました。とてもよかったのでブックマークに登録させていただきました。

    oba1  返信

    • oba1さん
      コメントありがとうございます。そしてブックマークに登録してくださり、ありがとうございます。引き続きHTML5についても詳しく情報発信していければと思っています。

      今後ともよろしくお願いいたします。

      mae  返信

  4. ピンバック: 2011年を振り返る(ブログ&日常編) | mae's blog

     

  • 必須

コメント