テーマのお試し

オンラインユーザ+1min

ゲストユーザ: 4

 2009年1月 6日(火) 15:24 JST

センターブロックのタイトルを変更したい。

  • 2008年12月 1日(月) 21:01 JST
  • 投稿者:
    auge
  • 閲覧件数
    123

タグ:procss逆引きcss block.css header.thtml

 該当CSS 

block.css

 該当プロパティー

/* ブロックタイトル */
div#centerblocks h2,
div#centerblocks h3,
div#centerblocks h4 {
margin: 0 0 1em 0;
padding: 0;
font-weight: bold;
}
div#centerblocks div.block-center h2 {
font-size: 125%;
}
div#centerblocks div.block-center h3 {
font-size: 110%;
}
div#centerblocks div.block-center h4 {
font-size: 100%;
}
 

参考事例

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

方法
backgroundにcolorを指定する。

/* ブロックタイトル */
div#centerblocks h2,
div#centerblocks h3,
div#centerblocks h4 {
margin: 0 0 1em 0;
padding: 0;
background: #色指定;
font-weight: bold;
}

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

方法
backgroundにcolorを指定する。

div#centerblocks div.block-center h2 {
background: #色指定;
font-size: 125%;
}
センターブロックタイトルの背景に画像を使いたい。
方法
backgroundにurl(画像パス)を指定する。
画像の表示はpaddingで表示領域を確保するか
heightの値を指定する。
/* ブロックタイトル */
div#centerblocks h2,
div#centerblocks h3,
div#centerblocks h4 {
margin: 0 0 1em 0;
padding: 0;
height:高さ;
background: url(画像パス) no-repeat 0 0;
font-weight: bold;
}

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

方法
backgroundにurl(画像パス)を指定する。
画像の表示はpaddingで表示領域を確保するか
heightの値を指定する。

div#centerblocks div.block-center h2 {
margin: 0 0 1em 0;
padding: 0;
height:高さ;
background: url(画像パス) no-repeat 0 0;

font-size: 125%;
}

解説

センターブロックとセンターブロックコンテンツの違いは、
センターブロックは大枠外側センターブロックコンテンツを囲む、センターブロックコンテンツは内容を表示するブロック。
センターブロックの中にセンターブロックコンテンツが含まれる。
(画像準備中)

defaut.cssでタイトル(見出し)でh2~h4を指定したとしてもここで指定するものが有効。
左右ブロックでpaddingを指定した場合はタイトルの長さはそれに準じる。
タイトルに左右ブロックサイズの長さが欲しい場合は
左右ブロックでpaddingを指定しない。

センターブロックはh2~h4までまとめて指定してるので個別に指定したい場合は
切りかけて作る。
(例:h2を切り分けたい場合)
/* ブロックタイトル */
div#centerblocks h2 {
margin: 0 0 1em 0;
padding: 0;
font-weight: bold;
}
div#centerblocks h3,
div#centerblocks h4 {
margin: 0 0 1em 0;
padding: 0;
font-weight: bold;
}

トラックバック

このエントリのトラックバックURL:
http://gltmatrix.com/trackback.php/procssdefocblocks
表示形式
コメント投稿

コメントは投稿者の責任においてなされるものであり、サイト管理者は責任を負いません。