まだ完全ではありませんが、このサイトをぼちぼちとモバイル対応に修正しています。まぁ、対応といってもCSSで見栄えを変えているだけですけど。とりあえず、ブラウザの横幅を縮めていくと、あるところ（横幅500px）を境にモバイル用のデザインに変更するようにしてみました。
いまのデザインは、もともと左側を幅500pxで作っていて、iPhoneやAndroidでも拡大すれば綺麗に収まるようにと考えていました。ただ、Google Analyticsによると訪問してくれる人の2割が何らかのモバイル端末を使っているようなので、そろそろ対応しておいた方がいいかなぁっという感じです。
WordPressを使っているので、本来ならKtai-StyleやWPtouch、Mobilepressなどのプラグインを使ったほうが、jQuery Mobileを利用して最適なモバイルサイト作れるとは思うのですが、そこまでやる時間と気力はありません……。
というわけで、お手軽にCSS3のMedia Queriesで解像度（ブラウザの幅）によってCSSを変更してみました。CSSで見栄えを変えているだけなので、軽量化されたりするわけではありませんが、一応はモバイルサイトっぽくなっていると思います。
Media Queriesというのは、下記みたいなやつです。
[css]
@media screen and (min-width: 501px) {
#main { ・・・ }
}
@media screen and (max-width: 500px) {
#main { ・・・ }
}
[/css]
この例だとブラウザの横幅が500px以上のときと以下のときとでCSSを分けています。
一昔前まではこういうのはjava scriptでUA判別して～とかやってたものですが、CSS（とhtml）だけで出来るようになったんだねぇっと調べながら感心してしまいました。HTML5とかCSS3とか、がんばって勉強しないとどんどん取り残される気がする……。
