各記事のタイトル変更をしたい。
[tag:ProCSS逆引きCSS story.css]
該当CSS
story.css
該当プロパティー
/* 記事タイトル */
div#centerblocks div.storytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}
/* 記事タイトル */
div#centerblocks div.featuredstorytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}
参考事例
各記事タイトルに背景色をつけたい。
方法
backgroundにcolorを指定する。
/* 記事タイトル */
div#centerblocks div.storytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
background: #色指定;
font-weight: bold;
font-size: 110%;
font-weight: bold;
}
/* 記事タイトル */
div#centerblocks div.featuredstorytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
background: #色指定;
font-weight: bold;
font-size: 110%;
font-weight: bold;
}
各記事タイトルの背景に画像を使いたい。
方法
backgroundにurl(画像パス)を指定する。
画像の表示はpaddingで表示領域を確保するか
heightの値を指定する。
/* 記事タイトル */
div#centerblocks div.storytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
height:高さ;
background: url(画像パス) no-repeat 0 0;
font-size: 125%;
font-size: 110%;
font-weight: bold;
}
/* 記事タイトル */
div#centerblocks div.featuredstorytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
height:高さ;
background: url(画像パス) no-repeat 0 0;
font-size: 125%;
font-size: 110%;
font-weight: bold;
}
解説
div.storytext は通常の記事に対応。
div.archivestorytext は注目記事に対応。
便宜上まとめて書いてるが当然個別の装飾も出来る。
1.5.1より3個のアイコンがタイトルの横に設置されてるので
その分考慮しなければならない。