レシポンシブデザインってなにそれおいしいの〜PC用テーマをレシポンシブデザインに対応させる〜

2016年2月21日Web-log・ココログ関連,WordPress

GoogleのPageSpeed Insightsの点数向上を目指しています。目的は、表示速度を速くして、見にこられた方のストレスを減らすためです。

頑張ると、100点近くまで行きます。ウェブサイトの綺麗な出来上がりを見るために、GTmetrixでも確認しています。

GTmetrixの点数を上げようとすると、テーマファイルも綺麗にする必要がありそうです。私は、Orange and Blackと言うテーマを使っています。

このテーマは、もうメンテナンスされてないみたいです。検索結果のページネーションがうまくいかないというバグもあります。作者に連絡を入れたのですが、反応がありませんでした。

そんな訳で、かなりカスタマイズして使っています。でも、あまり考えずにカスタマイズしてたら、CSSがぐちゃぐちゃになってしまいました。

これはまずい…。見栄えがあまり変わらずに、軽くてCSS的に綺麗なテーマに直したい…。

テーマを作る上で必須なのが、モバイル対応です。今は、JetPackプラグインのモバイルテーマをカスタマイズして使っています。

ですが、PCで見るときとスマートフォンで見る時とで、見栄えが大きく変わってしまいます。カスタマイズしないと、他のウェブサイトと同じ表示になってしまいます。追加している専用のCSSも増えてしまうので、あまり良い感じではありません。

どうやったら、モバイルテーマを自作できるのだろうと調べていたら、「レシポンシブデザイン」にすれば良いということがわかりました。基本的にスマートフォン用にデザインして、PC用にカスタマイズすると言う考え方です。

今のテーマ、Orange and Blackは、PC用です。これを改造して、レシポンシブデザインにする事にしました。まだ途中なのですが、次の方法でできそうです。

  1. 元のテーマで、widthを絶対値で設定しているところを削除
  2. CSSのメディアクエリを使って、画面幅が768以上(iPadはPCサイトに見える事を想定)だったらデザインを変える
  3. HTMLヘッダに、viewport指定を入れる

次のサイトを参考にさせていただいています。

なんとなく、それらしく出来てきました。PageSpeed Insightsのスコアもまずまずです。

レスポンシブデザイン

完全に切り替えるためには、まだチューニングが必要です。頑張ります。

[amazonjs asin="4048863231" locale="JP"]

Posted by お市のかた