Twenty Ten テーマの大まかなレイアウト構成を見たので、
それぞれにどんなスタイルが割り振られているかを見ながら、
レイアウト（デザイン）の変更を考えます。
全体ののレイアウト〜wrapper
style.cssの157行目当たりから始まる部分を見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /* =Structure-------------------------------------------------------------- *//* The main theme structure */#access .menu-header,div.menu,#colophon,#branding,#main,#wrapper { margin: 0 auto; width: 940px;}#wrapper { background: #fff; margin-top: 20px; padding: 0 20px;} |
これを見ると全体の幅が940pxで、上に20pxのmargin、左右に20pxのpadding（余白）がとってある事がわかります。
maeginのautoで中央寄せをしてますね。
背景色の指定
また、wrapperの背景が白になっていますね。
style.cssの200行目当たりにはbodyの背景色指定もあります。
1 2 3 4 5 6 7 | /* =Global Elements-------------------------------------------------------------- *//* Main global 'theme' and typographic styles */body { background: #f1f1f1;} |
まとめるとこんな感じです。
まずは、bodyとwapperの背景色をいろいろ変えてみるのも面白いと思います。
例えばbodyとwrapperの背景色を同じにすれば全体が同じ色の境目のないデザインになります。
やってみましょう。↓こんな感じになりました。
CSSです。bodyの背景色は「外観」の「背景」からでも変えられますが、wrapperも指定したいので、CSSに書き込みました。
1 2 3 4 5 6 7 | body { background-color: #FFFFFE; border-top: 3px solid #7D7D7D;}#wrapper{ background: none; } |
一番上に薄いグレーのボーダーを指定してちょっと装飾してみています。
このCSSは子テーマを作るときに作ったstyle.cssに書き込んでもいいですし、新たなCSSファイルをつくって読み込ませてもよいでしょう。親テーマのCSSを子テーマのCSSで上書きしてくれる仕組みになっていますので、このように変更したい点だけピックアップして指定します。
親テーマTwenty Tenのstyle.cssをじかに変更しないように注意して下さい。
次はヘッダー部分をいじってみる予定です。