センターブロックのデザインを変更したい

[tag:ProCSS逆引きCSS block.css]

　該当ＣＳＳ　

block.css

　該当プロパティー

/*--------------------------------------
中央ブロック
--------------------------------------*/
/* ブロック */
div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
border-bottom: 1px solid #CCC;
}

/* ブロックコンテンツ */
div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
}
 

参考事例

　センターブロックに背景色をつけたい。　

方法
backgroundを追加しcolorを指定する。

div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
background: #色指定;
border-bottom: 1px solid #CCC;
}

　センターブロックコンテンツに背景色をつけたい。　

方法
backgroundを追加しcolorを指定する。

/* ブロックコンテンツ */
div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
　background: #色指定;
}

　センターブロックに背景画像を使いたい。　

方法
backgroundを追加しurl(画像パス)を指定する。

div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
background: url(画像パス) no-repeat 0 0;
border-bottom: 1px solid #CCC;
}

　センターブロックコンテンツに背景画像を使いたい。　

方法
backgroundを追加しurl(画像パス)を指定する。

div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
background: url(画像パス) no-repeat 0 0;
}

　センターブロックの幅を決めたい。　

方法
センターブロックの幅の最大値はlayout.cssのdiv#wrapperで指定するdiv#centerblocksのサイズに順ずる。
それに対してのサイズ設定はmargin、paddingで指定する。

/* ブロック */
div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
border-bottom: 1px solid #CCC;
}

　センターブロックコンテンツの幅を決めたい。　

方法
センターブロックコンテンツの幅の最大値はでdiv.block-center指定する値に順ずる。
それに対してのサイズ設定はmargin、paddingで指定する。

/* ブロックコンテンツ */
div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
}

　解説　

センターブロックコンテンツ（内容を表示するブロック）
センターブロック（左右ブロックコンテンツを囲むブロック）
タイトルはセンターブロックに含まれセンターブロックコンテンツの上に位置する。