テーマ更新とレスポンシブデザイン

1年強ぶりにテーマを更新しました。WordPress 3.2からのデフォルトテーマ、Twenty Elevenを参考に改変を加えてみました。

分かりやすい変更はヘッダー画像だと思います。これまでもランダムに(といっても2〜3種類だけですが)変わるようにしていましたが、サイドバーにも投稿画像のサムネイルをランダムにピックアップしていましたので、これらを統合しました。タイル状に並べた画像があまり多いとごちゃごちゃして嫌だったので、12枚までに抑えて、固定ページへのナビゲーションメニューを画像の右側に移しました。

フォントの大きさだとかコメントフォームだとか(Twenty Elevenのものそのまんま)ちょこちょこと変わってますが、もう一つの大きな変更は、Twenty Elevenのレスポンシブデザインを採用したことです。iPhoneなど表示領域の小さなデバイスで表示した際には見やすいようにレイアウトやサイズが変わります。上記ヘッダー画像の数もそれに応じて減るようになってます。

このレスポンシブデザインは手持ちのiPhone (4S, 3GS)、iPad (初代)で確認しながら作業していたのですが、どうしても思い通りにCSSが適用されずに苦労しました。その原因はWebkitのバグにあり、max-widthの値を実際の値より20pxほど大きく指定しなくてはなりませんでした。これからレスポンシブデザインを採用される方はご注意ください。

参考:レスポンシブ・ウェブデザインのMedia Queriesの設定と15px