便利なのに可変スタイルとMedia Queriesが難しく感じた理由

結論から言えば今現在は固定スタイルでMedia Queriesでスタイルは変更せず、スマートフォンサイト用ではWordPressのプラグインWPtouchを使って変更させています。

それではなぜ便利なのに可変スタイルとMedia Queriesが難しく感じたかを説明します。まずは下記の画像をご覧ください。赤い印の部分がMedia Queriesで幅を変えるたびにスタイルを変更しないといけない場所です。

上記の図を見てもほとんど赤い印が付いていると思います。この全てに対してブラウザサイズが小さくなるたびにスタイルを変えていかなければなりません。上記図でスタイルの何を考えないといけないかを簡単に説明すれば次のような感じになります。

• ヘッダー部分のメニューの数とiphoneサイズになった時のデザイン
• Google AdSense広告の表示方法とサイズの問題
• スマートフォンサイズになった時に表示させたくないブロック（サイドバーなど)をdisplay: noneで見えなくしてもhtmlコード自体は残っているので不要なコードが残る
• PC用の大きい画像サイズがcssによって小さく見せるだけなのでスマートフォンでは重くなる
• スマートフォンサイズになった時コメント欄をタブなどで別に表示させないと1ページがやたらと長くなり見にくい

簡単に言えばこんな感じですが、これは投稿記事ページだけのスタイルで、この他にもトップページのスタイル、インデックステンプレートのスタイル、固定ページのスタイルなど考えるとスマートフォンサイト用のテンプレートを用意していたほうが楽だと思いました。

結局現在、iphone用にはWordPressのプラグインWPtouchを使っています。又タブレットサイズについてはipadでは確認していませんがipad表示をシュミレーション出来るiPad Peekでサイトを確認したらとりあえず大丈夫だったのでPC用と同じレイアウトにしています。

最終更新日: 2013年3月23日