オープンソースCMSGeeklogのテーマ無料配布と制作支援のサポートサイトです。


2010年3月18日(木) 07:01 JST

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

[tag: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

この記事にはトラックバック・コメントがありません。
センターブロックのタイトルを変更したい。 | 0 件のコメント | アカウント登録
コメントは投稿者の責任においてなされるものであり、サイト管理者は責任を負いません。