Wordpress 3.5.2へアップデートしたところ、デフォルトテーマのTwenty Twelveが紹介されていました。いまどきのレスポンシブデザインということで試しに変えてみました。
レシポンシブデザインとはブラウザのウィンドウサイズに合わせてレイアウトを変えてくれるものです。試しにウィンドウサイズを変えてみると確認できるかと思います。
これってどうやって実現しているのかよく分からないのですが、CSSの記入方法が特殊で修正するのに苦労しました。フォントサイズやマージンをpxとrem両方入力する必要があります。
remの数値はrembaseという数値で割って算出するのです。
例を挙げると以下のようにします。
margin: 0 10px;
margin: 0 0.714285714rem;
margin: 0 0.714285714rem;
これに伴い画像ファイルサイズの指定に問題が出てきました。
いままでの記事の画像にはwidthとheightをpxで指定していたため、ウィンドウサイズを小さくするとpxが優先されて縮小されるため縦長な画像になってしまうのです。
修正するにはすべての記事のwidthをheightを消さないといけないかなぁと思ったら、CSSにて以下のように指定したら消さなくてもうまくいきました。
.entry-content img {
width: 400px;
width: 28.57142857rem;
height: none;
}
width: 400px;
width: 28.57142857rem;
height: none;
}
とりあえずrem指定しておけばいいみたいですね。
heightを100%にしたのはサイズがまちまちだったためです。
コメント
自分のサイト（さくらのＶＰＳ）では、下記テーマを使っています。（少しカスタマイズして）レスポンシブデザイン対応です。
http://www.elmastudio.de/wordpress-themes/yoko/
久しぶりです！
こちらはまだまだカスタマイズが必要で恥ずかしいです。
レスポンスデザインのところなんですけど、マイＷＥＢサーバーはNgnix + php-fpm にapacheから切り替えました。チューニングはまだまだですが。
nginxは使ったことないです。使い勝手ってどうなんでしょう？
Fedora 18がsystemdになってからapacheでgracefulが使えなくなって不便だし、違うWebサーバを使うって手もありですね。