wizaman's blog (legacy) 今までこのブログはレスポンシブデザインに対応していませんでした。PCからの閲覧しか想定してなかったのですが、スマートフォンから見づらいって言われたので、手軽に対応できそうならやっておくかと。で、対応させました。普段PCからしか見ない人にはほぼ無関係の話だと思いますけどね。
レスポンシブデザインとは
昔はモバイル向けサイトなどは、リクエストを送信したユーザのユーザエージェント情報を見て、PCか携帯かを判断して専用のレイアウトで組まれたページをレスポンスとして返すことをしていました。レスポンシブデザインは、表示幅に合わせてレイアウトを切り替えることを同じファイルで実現します。これによってユーザーエージェント情報をいちいち調べなくていいし、ユーザ環境の中で動的にレイアウトを切り替えられるし、別々にデザインすることによる不整合の発生を防げます。近年のトレンドですね。
要は、スマートフォンの縦持ちや、PCでブラウザの窓を狭くした時とか、その幅に合わせたレイアウトになります。サイドバーが記事の下に回るとか、そういう対応ですね。スマートフォンなんかは縦持ち横持ちの切り替えがページ読み込み後にできるので、ここでレイアウトを切り替えるにはレスポンシブデザインが都合がいいわけです。
Suffusionでレスポンシブレイアウト
今使ってるSuffusionテーマは人気が高く更新も活発に行われるため、対応してるんじゃないかな？と思い、調べてみたら、
バージョン4.4.0（2012年12月リリース）からサポートされているようです。私がWordPressに移行した時点で既に対応されてましたね・・・。ということで、レスポンシブレイアウト機能を有効にしておきました。
管理画面→外観→Suffusion Options→Layouts→Responsive Layouts まで移動して、「Enable responsive layouts」にチェックを入れて設定を保存するだけ。うわー、簡単すぎる・・・。
とりあえずスマートフォンから見やすくなったからもういいやってことで、細かい設定はいじってませんが、どのブレイクポイントを有効にするかとか、各ブレイクポイントごとの設定があります。ブレイクポイントはレイアウトを切り替える表示幅のことですね。デフォルトでは、980px、650px、480px、320px、240pxすべてが有効になっています。幅240pxは初代iPhoneとかですね。今頃そんな環境の人あまりいないと思うけど。
はい。最初にやっておけばよかったですね。デフォルトで有効にしてくれても別に困らないのだけど。