murak.net

アクセス解析・Googleアナリティクス・ネット戦略・SEO・Webプログラミングなどを綴るブログ

CSS3のMedia Queriesでスマートフォンなどマルチデバイスに対応したテーマを入れてみた

このブログを作るにあたり、スマートフォンやiPadなど各種デバイスに対応できるように、CSS3のMedia Queriesを使ったWordPressテーマを採用してみた。

かちびと.net さんの

css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ

に紹介されていた YOKO というテーマが気に入ったので、サイトからダウンロードし、一部カスタマイズしてインストールしてみた。以下は色々な幅での表示例。

CSS3のMedia Querysに対応したテーマ:幅1024px超の表示

CSS3のMedia Querysに対応したテーマ:幅1024px以下の表示

CSS3のMedia Querysに対応したテーマ:幅880px以下の表示

CSS3のMedia Querysに対応したテーマ:幅620px以下の表示

このように、リキッドレイアウトによりデバイスの幅に応じてレイアウトやデザインが変わる。WordPressにはスマートフォン用の専用プラグインを入れるという方法もあるが、このようなCSS3のMesia Querisを使ったデザインを採用すれば、これひとつだけで各種デバイスに対応できるので、メンテナンスも容易になるだろう。

関連しているかもしれない記事


投稿者: 村上 和久

アクセス解析・Webコンサルティングのアナライズネット代表・Webアナリスト。Googleアナリティクスの導入とカスタマイズ、ウェブ分析、アクセス解析に関するセミナーなどを行っている。

コメントは受け付けていません。