サイドバーの「最近の記事」や、「カテゴリー」のデザインを変更してみる。
ここのデザインは、管理人の作りかけのテーマでは、sidebasr h2 と言うスタイルで記述している。
#sidebar h2 { /* サイドバーのタイトル */
font-size: 1.2em;
border-bottom: solid 4px #0066cc; /* 青色の下線 */color: #111111; /* black */
text-align: left;
margin: 0px;
padding: 6px 10px;
}
これをヘッダーの時にやった様に、以下の様にグラディエーションをかけた、画像ファイルを用意して背景にセットしてみる。
これも同じように、左側は #0066CC から始まって白色にぼかしている。
スタイルで、background-image プロパティと、bacground-repeat プロパティを使って、以下の様に画像ファイルを読み込み。
#sidebar h2 { /* サイドバーのタイトル */
font-size: 1.2em;background-image: url(images/side_h2.jpg);
background-repeat: repeat-y; /* 縦方向に繰り返し */color: #ffffff; /* white 字は見やすいように白色に変更*/
text-align: left;
margin: 0px;
padding: 6px 10px;
}
以下の様にできた。