レスポンシブWebデザインのWordPressテーマ「iTheme2」に変えました。


パソコン、スマホ、タブレットなど、デバイスにより異なる解像度に対応する「レスポンシブWebデザイン」を採用したWordPressテーマ、「iTheme2」にブログデザインを変更しました。

テーマ探し

「レスポンシブ wordpress テーマ」でググッて見つけた、このまとめ記事から。
■Photoshop VIP ☞ iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)

色々ありますが、苦手なcssをいじらずに管理画面で指定出来そうな「iTheme2」にしました。ダウンロードサイトはこちらです。
■iTheme2

ところでこれまで「レスポンシブルデザイン」だとばかり思っていましたが、「レスポンシブWebデザイン」が正しい用語だそうで。

にゅるにゅるとレスポンシブ!

ブラウザの横幅を変えたり、スマホ縦横の向きを変えると、解像度にあわせてデザインがにゅるにゅる動きます。

image
↑1024あたり。

image
↑640あたり。右サイドバーがフッターに回り込みます。

image
↑480あたり。ナビゲーションバーとサーチボックスがアイコンに変わります。

オリジナリティを表現出来る

WordPressの定番プラグインWPtouchでスマホ対応しているブログがほとんどだと思います。このブログでも3年前に紹介してから愛用してきました。
■iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場

今やWordPressを使っているブログで結構このデザインを見かけるのですが、ブログの個性とかが失われている感が若干あるかと思います。レスポンシブWebデザイン対応のテーマに変えることで、あらゆるデバイスでオリジナリティを表現したいですね。(私の場合テーマ入れたらそのままなので微妙ですけど。。。)

管理画面で色々指定出来る

iTheme2は管理画面もすごいです。テーマ有効化すると管理画面メニューに「iTheme2」が追加され、そこから様々なスタイルを設定できます。

image
↑ヘッダーバナーを設定している様子。

 

 

 

ということで、細かいところの手直しはまだこれからですが、リニューアル完了しました。レスポンシブWebデザインの仕組みについて興味ある方はこちらをどうぞ。
■ASCII.jp:スマホ対応の新潮流「レスポンシブWebデザイン」とは?