Advertisement

 

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

 

1140 Fluid Starkers WordPress Theme

 

レスポンシブデザインに関する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]

 

 

レスポンシブデザインの便利ツール

 

Responsive Web Design Sketch Sheets

ウィンドウ幅に応じてレイアウトが変わってくるので、まとめて確認することができるスケッチ用PDFシート。印刷して手書きのモックアップに最適。

 

 

 Screenfly

URLを打ち込むとさまざまなデバイスで表示された様子を確認することができるWebサービス。

 

 

 Adaptive Images in HTML

スマートフォンなどのモバイル端末でサイトを表示したときのイメージファイルをリサイズします。

 

 

レスポンシブデザインに関するその他リソース、補足など

 

これまでにまとめられているレスポンシブWebデザインに関するエントリーを、いくつかピックアップさせてもらっています、感謝。

 

[list type=”hot”] [li]iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ – かちびと.net [/li]

[li][CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル – coliss.com [/li]

[li]css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ – かちびと.net [/li][/list]

 

CSS3のメディアクエリを利用したWebサイトデザイン30個まとめ+使い方

手前味噌となりますが、ウィンドウ幅に応じて変化するデザインに注目したまとめエントリー。

 

[参照元 : 15 Free WordPress Themes with a Responsive Layout – Speckyboy Magazine]