maesblog

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」というのがあるようですね。

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

関連記事

コメント

    • 必須

    コメント