WordPress 3.5 リリース目前!WordPressのアップグレードについておさらいしておこう という記事を書いたのに、自分がアップグレードしないのはだめだよね、ということでWordPress 3.5 にアップグレード、テーマを Twenty Twelve に変えました。
そのまま使うのはちょっとさみしいし、でも時間もないし、ということで1日(かかってないかな?)の突貫工事で子テーマを作りました。
今回は背景のちょこっと以外はほとんど画像を使わずCSSで。IE8以下は多分さみしい感じだと思います。
スマホも余り確認できてません。
おいおい直していくので、これは!!って言うところがあったら教えていただけたら嬉しいです。
せっかくなのでTwenty Twelve のコンテンツ幅を広げるやり方など
Twenty Twelveのコンテンツ幅はブラウザ幅600px以上で最大幅が960pxに設定されています。
Twenty Twelve の style.css の 1433行目あたり。
.site { margin: 0 auto; max-width: 960px; max-width: 68.571428571rem; overflow: hidden; }
max-width: 68.571428571rem というのが少しわかりにくいですね。
フォントサイズを基準に計算した数字で、Twenty Twelve は14px = 1rem となっているので、960 ÷ 14 というように計算します。
例えばココを
.site { max-width: 1200px; max-width: 85.7142857142rem; }
に書き換えてみると、ぐぐっと全体の幅が広がるのがわかると思います。
コンテンツ部分と、サイドバーの部分は、幅が%で指定されているので、割合を変えなくてよければ、これだけで自動的にコンテンツ幅も広がってくれます。
この記述はメディア・クエリの中ですので、600px以下に影響はありません。
これだけなら簡単ですね!
Twenty Twelveをいじってみて少しずつ分かってきたので、おいおい記事にしていければ、と思います。
それでは、楽しいカスタマイズライフを!
ピンバック: 今さら聞けない、WordPressのテーマ「Twenty Twelve」のサイドバーとメインコンテンツの幅の比率を変えたい | ローカルブロガーのメモ帳