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


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

各記事のタイトル変更をしたい。

[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個のアイコンがタイトルの横に設置されてるので
その分考慮しなければならない。

記事のオプション

トラックバック

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

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