WordPress 3.5 にアップグレード、テーマを Twenty Twelve に変えました

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 3.5 にアップグレード、テーマを Twenty Twelve に変えました」への1件のフィードバック

  1. ピンバック: 今さら聞けない、WordPressのテーマ「Twenty Twelve」のサイドバーとメインコンテンツの幅の比率を変えたい | ローカルブロガーのメモ帳

コメントをどうぞ♪