CSS編集のデザインテスト

Twentytenの子テーマのCSSを少し修正。 修正のテストもかねてエントリ。グラデーションの設定はここ とかここ を参考に。あとはFirebugを頼りに。

H3でサブタイトルっぽく

<h3>タグをサブタイトルっぽく魅せるようにCSSを下記の通り修正。leftとbottomにborderを設定してバックグラウンドにグラデーションを追加

#content h3 {
font-size: 1.2em;
padding-left: 5px;
padding-right: 5px;
border-left: 4px solid #336699;
border-bottom: 1px solid #336699;
border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-bottom-left-radius: 6px;
margin-bottom: 10px;
background: -moz-linear-gradient(center top , #FFFFFF, #F4F4F4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#F4F4F4));
}

H4でサブタイトル２っぽく

<h4>も同じようにCSSを修正。ボーダーの種類を変えてこちらはグラデーションは無し。

#content h4 {
font-size: 1.1em;
padding-left: 5px;
padding-right: 5px;
border-left: 4px double #336699;
border-bottom: 1px dotted #336699;
border-left-radius: 6px;
-webkit-border-left-radius: 6px;
-moz-border-left-radius: 6px;
margin-bottom: 10px;
}

その他、エントリタイトルのバックグラウンド、リストのマージン、引用のスタイルを少し修正。

• リスト
• リスト
• リスト

1. 番号リスト
2. 番号リスト
3. 番号リスト

引用はこんな感じで表示。