MediaQueriesをTypepadに導入


先日気になってTypepadにページの閲覧をiPhoneに対応する予定はあるか問い合わせたところ「ない」ときっぱり言われて凹んでいました。他のブログでは対応しているところもあり、有料なのに~と唇を噛み締めてました。なぜなら僕はUAで振り分けするしかないと思い込んでいたのです。

ところが・・・Media queriesなら自分でも対応できそう。きっかけになったのはこの記事。

Blog Hacks 2011 ? 今、Blogを楽しむ5つのHacks – ゆーすけべー日記

MediaQueriesって

Media queriesはアクセスしてきた端末の画面の大きさに合わせてデザインを変えられる。メリットはCSSさえ用意すれば良いということ。同じページに様々なデバイスからアクセスしてもらえるので更新などは今までと変わらない。ただしCSS3に対応していないとダメ。

ここに並ぶページを見ると分かりやすい、表示されたらブラウザの横幅を変化させてみるとわかります。

Media Queries

とてもいいのだけど問題はどこまでデザインを変更していくかという部分。

iPhone、スマホ対応とはいえ

スマートフォンやiPhoneでの見やすさ、読みやすさを追求するとひとつのカラムでぴったりの幅で構成するとスクロール時の横ずれも起きないのでベスト。しかしそうなると記事リストやカテゴリーリストをどこに表示するかとかいろいろと考えるべきことが増えてくる。

僕の場合3カラムで左からリスト、コンテンツ、その他のリンクという並び方になっている。
CSSだけで並び方を変えていくこともできるがテンプレートの変更まで含めて行ったほうが綺麗に作れる。単純に記事だけ読んでもらうならサイドのコンテンツを表示しないようにするのもあり。

本格的に対応するならこういった知識も取り込みたい。
トップページ – iPhone 3G DevWiki

でいろいろ考えた結果、まだ先の予定ですが大幅なレイアウト変更を考えているのでその時に一緒に考えることにして今回はユースケさんと同じように文字を大きくする方法を試してみる。

実践、MediaQueriesで文字を大きく表示する。

ユースケさんのページのコードを貼りつけて、自分のブログだとメインコンテンツ部分はidがbetaなので変更する。PCのブラウザで横幅を絞っていくと字は拡大される。

これぐらいの文字サイズがブラウザから見ると、こんな感じになる。

ところが対応後に僕のブログをiPhoneで見ても変更前と変更後で差がない。とりあえずこの記事【レビュー】自由に使えるiPhone/iPad/Android/PC向け切り分けCSSテンプレート | エンタープライズ | マイコミジャーナルを参考にして以下の部分を変更

(max-width: 479px)(min-device-width : 320px) and (max-device-width : 480px)

に変更してみたらiPhoneでも拡大された。これでいい感じかは微妙だけどとりあえずiPhoneやらスマートフォンでも見やすくなったので暫定OK。

これぐらいから

1000000516

これぐらいになった。

1000000517

あとMediaQueriesの指定部分でdeviceというのが追加されたためPCのブラウザを絞っても字が拡大しなくなった。

参考ページリンク

W3Cのドキュメント(英語)
Media Queries

MozillaのMediaQueriesに関するドキュメント(日本語)
Media queries – MDC Doc Center
*Mozillaのは独自のものも含んでいるので気をつけてください。

その他参考にしたページ

[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例 | コリス

[CSS]Media Queries(メディア クエリ)を使用したデバイスごとの指定方法のまとめ | コリス

【レビュー】自由に使えるiPhone/iPad/Android/PC向け切り分けCSSテンプレート | エンタープライズ | マイコミジャーナル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です