HTML5 で作成されている WordPress デザインテーマ20選

この記事について

今回は WordPress テーマの中から HTML5 で記述されたものを集めました。
まだ登場して間もないせいかシンプルな作りのものが多くなっています。
ソースを読むことで HTML5 コーディングの勉強ができますので、実際にテーマとして使用しなくとも気に入ったデザインのものがあれば開いてみてはいかがでしょうか。

デザインテーマの紹介

ZeroWeight

ZeroWeight - Thumbnail
清涼感のある配色とすっきりしたレイアウトのテーマ。
コードを埋め込むスタイルが設定されている。

PICK UP「コード埋め込み部分」

ZeroWeight - PICK UP


Impresso ($37)

Impresso - Thumbnail
シックな配色のポートフォリオ用テーマ。
「Our clients」部分はスライドギャラリーになっていて見た目以上のデータを配置できる。

PICK UP「スライドギャラリー」

Impresso - PICK UP


Cakifo

Cakifo - Thumbnail
シンプルで使いやすいデザインのテーマ。
スライドギャラリーは画像ごとに個別記事ページへのリンクを設定できる。

PICK UP「個別記事ページ」

Cakifo - PICK UP


Pulse ($69)

Pulse - Thumbnail
画像コンテンツを豊富に設置できるギャラリー用のテーマ。
「Video Widget」エリアはページ遷移なしに動画を切り換えられる。

PICK UP「Video Widget エリア」

Pulse - PICK UP

Theme Page: Pulse – WPZOOM

Temple Gate

Temple Gate - Thumbnail
シックな色使いのすっきりとしたテーマ。
記事のメタ情報が見やすいようにレイアウトされている。

PICK UP「エントリー一覧」

Temple Gate - PICK UP


Twilight

Twilight - Thumbnail
シックな色使いのギャラリーサイト用テーマ。
横幅が広く設定されていて3つのカラムそれぞれに十分な領域が確保されている。

PICK UP「サイドバー」

Twilight - PICK UP


Constellation

Constellation - Thumbnail
極力枠線を排除した広さを感じるテーマ。
画面に追従する「feedback」ボタンと「Contact us」ボタンが特徴。

PICK UP「feedback ウィンドウ」

Constellation - PICK UP


PressWork

PressWork - Thumbnail
広く取られたサイドバーが特徴的なテーマ。
管理画面から記事毎のサイドバーの表示・非表示を設定できる。

PICK UP「個別記事ページ (サイドバー非表示設定)」

PressWork - PICK UP


Rooling ($35)

Rooling - Thumbnail
白と紫色を基調としたポートフォリオサイト用テーマ。
上部メニューはドロップダウン方式になっている。

PICK UP「ドロップダウンメニュー」

Rooling - PICK UP


Natural Living Organic Green ($49)

Natural Living Organic Green - Thumbnail
白と緑で爽やかにまとめられたテーマ。
サイドバー内のタブで「Popular Posts」と「Recent Comments」を切り換えられるようになっており、少ないスペースでも多くの情報を格納できる。

PICK UP「サイドバー」

Natural Living Organic Green - PICK UP


Whiteboard

Whiteboard - Thumbnail
巨大なヘッダーイメージが特徴的なテーマ。
アンカーテキストの hover 属性にはグラデーション効果が設定されている。

PICK UP「アンカーテキスト」

Whiteboard - PICK UP


Platform

Platform - Thumbnail
シンプルなレイアウトのテーマ。
個人ブログの基本となる機能は実装されているのでデザインの叩き台としても有用。

PICK UP「サイドバー」

Platform - PICK UP


Theme Three ($35)

Theme Three - Thumbnail
個別記事ページへのリンクが設定された大きなスライドギャラリーが特徴的なテーマ。
ヘッダーカラーを変更するためのウィンドウが用意されている。

PICK UP「ヘッダーカラー変更ウィンドウ」

Theme Three - PICK UP


Domestica ($69)

Domestica - Thumbnail
不動産業サイトに適したテーマ。
サイドバーには条件指定型の物件検索フォームが用意されている。

PICK UP「物件検索フォーム」

Domestica - PICK UP


Wellness ($49)

Wellness - Thumbnail
健康を意識したサイトに適しているテーマ。
上部メニューはドロップダウン方式になっている。

PICK UP「ドロップダウンメニュー」

Wellness - PICK UP


The Fashion

The Fashion - Thumbnail
コンテンツの区切りがはっきりと分かるようにタイトルや見出しのサイズが考えられているテーマ。
画像付きで3件まで表示できる「Featured Posts」が特徴的。

PICK UP「サイドバー」

The Fashion - PICK UP


The Travel Theme

The Travel Theme - Thumbnail
旅行記ブログに適したテーマ。
大きなスライドギャラリーは個別記事へのリンクになっていてデザイン性と機能性を兼ね備えている。

PICK UP「スライドギャラリー」

The Travel Theme - PICK UP


California

California - Thumbnail
余計な装飾を完全に省いたテーマ。
それでも上部メニューのおかげで不便さは感じない。

PICK UP「個別記事ページ」

California - PICK UP


Voyage ($69)

Voyage - Thumbnail
記事カタログエリアは様々なパターンの記事レイアウトを同時に採用できるようになっている。
また小サイズのスライドギャラリーを埋めこめられるようになっていて1ページ辺りの情報量は大きめ。

PICK UP「スライドギャラリー」

Voyage - PICK UP

Theme Page: Voyage – WPZOOM

Stereotype One Page ($32)

Stereotype One Page - Thumbnail
2011/11/04 現在ではまだ製作途中でページ遷移を実装できていない状態。
ポートフォリオテーマとして良いデザインなので今後に期待したい。

PICK UP「ポートフォリオエリア」

Stereotype One Page - PICK UP

MakeLeaps

MakeLeapsは見積書・納品書・請求書の発行管理クラウドソリューション。このブログでは、国内のフリーランスや中小企業の読者の悩み解決・成長に役立つ情報やMakeLeapsのニュースなどをお届けします!

MakeLeapsの他の記事