レスポンシブWebデザインのWordPressテーマに変更!PCもiPhone、Androidも同じイメージのデザインで最適な表示に!

WordPress Logo
WordPress Logo / Phil Oakley

普段はプログラムを組んだりしているので、技術的な事に興味がある@Mori2ndです。

最近、レスポンシブWebデザインというキーワードを各所で聞くようになって興味を持つようになっていました。

ブログ名を変更したことですし、これを機に私のブログにもレスポンシブWebデザインのテーマに変更してみることにしました。

スポンサードリンク

レスポンシブWebデザインとは?

レスポンシブWEBデザインとは、WEBサイトの表示切り替えの基準を「デバイス(ブラウザ)の種類」によって判別するのではなく、「デバイス(ブラウザ)の表示幅」によって判別しようというものです。
しかも、表示幅ごとのHTMLファイルを用意するのではなく、1つのHTMLファイルをCSS3(メディアクエリー)で制御して表示を切り替える というものです。

これからのマルチデバイス対応~レスポンシブWEBデザインとは?~ | Sanow Labs blog

 

なぜレスポンシブWebデザインに?

今まではiPhoneやAndroidなどのスマートフォン向けに最適表示してくれるWPtouchというWordpressのプラグインを使っていました。

機能的にはすばらしいですが、一般的なPC用のテーマと見比べたときに、イメージが全然違ってくるんですよね。

レスポンシブWebデザインのテーマにしたことで、イメージはそのままに、PC用やiPad用、iPhone用などそれぞれの画面サイズに合わせて表示してくれるようになりました。

 

デザインがどう変わったのか?

Before

 

After
web1

 

基本的なイメージをそのままによりシンプルになりました。

画面サイズが変わるとサイズに合わせてデザインも変わります。

 

iPad 横 サイズ
web2

 

iPad 縦 サイズ
web3

 

iPhone サイズ
iphone1

 

どうでしょうか?イメージはそのままにデザインが変化しているのがわかりますよね。

ちなみにPC用のブラウザで横幅を変えるとデザインが変わっていきますので、よかったら見てみてください。

おわりに

 

レスポンシブWebデザインのテーマにしたことでPC用やiPad用、iPhone用などデバイスにあわせて表示され、イメージも統一することができました。

最後に私が参考にしたサイトや利用したテーマをご紹介させていただきます。

 

レスポンシブWebデザインについて
これからのマルチデバイス対応~レスポンシブWEBデザインとは?~ | Sanow Labs blog(サノウラボブログ)

 

レスポンシブWebデザインの無料テーマの紹介
Photoshop VIP ☞ iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)
最近のWebデザインのトレンドで、iPhoneやiPadなど解像度に応じてウェブサイトを最適化する「レスポンシブWebデザイン」を利用したWordPress無料テーマ、あつめました。 ...

 

適用したWordpressテーマ「Yoko」。こちらをカスタマイズしました。
Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko | Smashing Magazine
WordPress theme Yoko ...

スポンサードリンク