iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)

WordPressを利用したウェブサイトが増えています、無料テーマやプラグインなどが公開されており、実装も簡単という点も人気の理由かもしれません。

最近のWebデザインのトレンドで、iPhoneやiPadなど解像度に応じてウェブサイトを最適化する「レスポンシブWebデザイン」を利用したWordPress無料テーマ、あつめました。

海外デザインブログSpeckyboy Magazineでレスポンシブデザインに対応した無料WordPressテーマ15個をまとめたエントリー「15 Free WordPress Themes with a Responsive Layout」が公開されていたので、今回はご紹介します。

詳細は以下から。

レスポンシブデザインの無料WordPressテンプレートまとめ

どれもデモページが用意されているので、実際にウィンドウ幅を変えながら表示すると分かりやすいかと思います。

Ari
通常3カラムで表示されたシンプルなレイアウト、ギャラリーなども実装されており個人ブログなどにも適したテーマ。

[button_square color=”red” url=”http://ari.elmastudio.de/”] デモページ [/button_square] [button_square color=”green” url=”http://wordpress.org/extend/themes/ari”] ダウンロード [/button_square]

Yoko

HTML5とCSS3でデザインされたWordPressテーマ。Google Webフォントなども利用されており、カスタマイズのしやすさもポイントです。

[button_square color=”red” url=”http://yoko.elmastudio.de/”] デモページ [/button_square] [button_square color=”green” url=”http://www.smashingmagazine.com/2011/06/07/free-html5-css3-wordpress-3-1-theme-with-responsive-layout-yoko/”] ダウンロード [/button_square]

iThemes2

apple社のWebサイトを連想させる洗練されたパーツが印象的なWordPress用テーマ、壁紙デザインなども変更可能。

[button_square color=”red” url=”http://themify.me/demo/#theme=itheme2″] デモページ [/button_square] [button_square color=”green” url=”http://themify.me/themes/itheme2″] ダウンロード [/button_square]

BonPress

テキストやイメージ画像、動画などジャンルに応じてアイコン表示で分かりやすいWordPressテーマ、Tumblrノリで利用できそうです。

[button_square color=”red” url=”http://demo.wpzoom.com/?theme=bonpress”] デモページ [/button_square] [button_square color=”green” url=”http://www.wpzoom.com/themes/bonpress/”] ダウンロード [/button_square]

Flexible

Facebookファンページ作成も可能なWordPressテーマ、詳しい内容についてはこちらのエントリーを参考に。

[button_square color=”red” url=”http://madeflexible.com/”] デモページ [/button_square] [button_square color=”green” url=”http://madeflexible.com/”] ダウンロード [/button_square]

Constellation Theme for WordPress

アーカイブや人気記事、カテゴリー表示などもダッシュボードから簡単に設定できる親切WordPressテーマ。

[button_square color=”red” url=”http://constellationtheme.com/demo/”] デモページ [/button_square] [button_square color=”green” url=”http://constellationtheme.com/”] ダウンロード [/button_square]

Renova WordPress Theme

カラムなど関係なくフルサイズのシングルカラムを利用したWordPressテーマ。

[button_square color=”red” url=”http://renova.llow.it/wordpress/”] デモページ [/button_square] [button_square color=”green” url=”http://www.llow.it/renova/”] ダウンロード [/button_square]

Simple Market Theme

HTML5でデザインされており、Googleフォントなどにも対応したシンプルでモダンなレイアウトのWordPressテーマ。

[button_square color=”red” url=”http://wp-ecommerce.org/store1/”] デモページ [/button_square] [button_square color=”green” url=”http://premium.wpmudev.org/project/simplemarket”] ダウンロード [/button_square]

Whiteboard

デザインの見た目だけではなく、表示速度などにもこだわったコーディングが特長のひとつでもあるWordPress

無料テーマ。

[button_square color=”red” url=”http://whiteboardframework.com/testdrive/”] デモページ [/button_square] [button_square color=”green” url=”http://whiteboardframework.com/”] ダウンロード [/button_square]

Blaskan

Webフォントが印象的なモノクロ&ピンクのオシャレWordPressテーマのひとつ。

[button_square color=”red” url=”http://blaskan.net/demo/”] デモページ [/button_square] [button_square color=”green” url=”https://github.com/persand/blaskan”] ダウンロード [/button_square]

Skelton

テーマファイルにはCSS3でデザインされたボタンやトグルなどを利用できるショートコードも実装された便利アイテム。

[button_square color=”red” url=”http://demos.simplethemes.com/skeleton/”] デモページ [/button_square] [button_square color=”green” url=”http://www.simplethemes.com/blog/entry/skeleton-wordpress-theme”] ダウンロード [/button_square]

Responsive Twenty Ten

WordPressにあらかじめ実装されているデフォルトテーマをレスポンシブデザインに改良したユニークなテーマ。

1140 Fluid Starkers WordPress Theme

ウィンドウの最大幅を1140pxのグリッドレイアウトを組むことができるWordPress用ワイヤーフレーム。

[button_square color=”green” url=”http://www.thedotmack.com/2011/07/19/1140-fluid-starkers-wordpress-theme/”] ダウンロード [/button_square]

レスポンシブデザインに関するjQueryプラグインなど

レスポンシブWebサイトを作成するときに便利なツールなどをまとめています、ご参考までに。

FitText

ウィンドウ幅に応じてフォントサイズを変更してくれるプラグイン、Webフォントを利用するときに便利。

[button_square color=”black” url=”https://github.com/davatron5000/FitText.js”] 無料ダウンロード [/button_square]

Lettering.js

タイポグラフィーのカーニングや編集なども可能にするプラグイン、こちらもWebフォントとの併用を想定しています。

[button_square color=”black” url=”https://github.com/davatron5000/Lettering.js”] 無料ダウンロード [/button_square]

Swipe Photo

iPhoneなどのタッチスクリーンを触るスワイプ機能に対応したギャラリー用プラグイン。

[button_square color=”black” url=”http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-2.1.0.zip”] 無料ダウンロード [/button_square]

FlexSlider

さまざまな画面解像度に対応するフレキシブルなイメージスライダー用プラグイン、これは便利。

[button_square color=”black” url=”http://flex.madebymufffin.com/files/FlexSlider-1.6.zip”] 無料ダウンロード [/button_square]

Responsive jQuery Slideshow

ふわっと画像が切り替わるエフェクトを加えたイメージスライド用jQueryプラグイン。

[button_square color=”red” url=”http://graphik.fi/lab/responsive-jquery-slideshow/”] デモページ [/button_square] [button_square color=”black” url=”http://blog.kiskolabs.com/post/5602656614/responsive-jquery-slideshow”] 無料ダウンロード [/button_square]

Fluid Width YouTube Video

ウィンドウ幅に応じてYouTube動画のビデオサイズを変更する方法をCSSで解決しています。

[button_square color=”red” url=”http://css-tricks.com/examples/FluidWidthYouTube/”] デモページ [/button_square] [button_square color=”black” url=”http://css-tricks.com/examples/FluidWidthYouTube.zip”] 無料ダウンロード [/button_square]