• 2008年11月30日(日) 22:06 JST
  • 投稿者:
    augebang
  • 閲覧数
    2,049

左右カラムブロックのタイトルを変更したい。

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

 該当CSS 

block.css

 該当プロパティー

/*--------------------------------------
左ブロック
--------------------------------------*/
/* ブロックタイトル */
div#leftblocks div.block-left h2 {
margin: 0 0 0.5em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}
/*--------------------------------------
右ブロック
--------------------------------------*/
/* ブロックタイトル */
div#rightblocks div.block-right h2 {
margin: 0 0 0.5em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}

参考事例

 左右ブロックタイトルに背景色をつけたい。

方法
backgroundにcolorを指定する。

/* 左ブロックタイトル */
div#leftblocks div.block-left h2 {
margin: 0 0 0.5em 0;
padding: 0;
background: #色指定;
font-size: 110%;
font-weight: bold;
}
/* 右ブロックタイトル */
div#rightblocks div.block-right h2 {
margin: 0 0 0.5em 0;
padding: 0;
background: #色指定;
font-size: 110%;
font-weight: bold;
}

 左右ブロックタイトルの背景に画像を使いたい。  

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

/* 左ブロックタイトル */
div#leftblocks div.block-left h2 {
margin: 0 0 0.5em 0;
padding: 0;
height:高さ;
background: url(画像パス) no-repeat 0 0;

font-size: 110%;
font-weight: bold;
}
/* 右ブロックタイトル */
div#rightblocks div.block-right h2 {
margin: 0 0 0.5em 0;
padding: 0;
height:高さ;
background: url(画像パス) no-repeat 0 0;

font-size: 110%;
font-weight: bold;
}

 左右タイトルブロックのフォントサイズを変更したい。 

方法
font-sizeの値を変更する。

/* 左ブロックタイトル */
div#leftblocks div.block-left h2 {
margin: 0 0 0.5em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}
/* 右ブロックタイトル */
div#leftblocks div.block-left h2 {
margin: 0 0 0.5em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}

 解説 

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

トラックバック

このエントリのトラックバックURL:
http://gltmatrix.com/trackback.php/procssdefoblock

サイト管理者はコメントに関する責任を負いません。