• もっと見る

2013年06月14日

CSS(ライトグレー・カスタムスキン) サイドバーのタイトルを変える

サイドバーのタイトルをCSSを使って変えてみた

86_1.jpg 86_2.jpg 86_3.jpg


左から
1:背景色を変える・文字色を変える・中央に揃える
2:1に下線を加える
3:背景画像を変える・文字色を変える・中央に揃える

リニューアル後にあるデザイン(ライトグレーの場合)
<変更前>
.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#ECECEB;
font-family:Verdana;
}


<変更後>
.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#00AA3C; /*背景の色*/
color:#FFF; /*文字の色(変えないならこの行は不要)*/
background:url(画像URL) no-repeat;/*背景に画像を置く場合(背景を画像にしないならこの行は不要)*/
border-bottom:3px solid #A8E5A9;/*タイトル背景下に下線を入れる(変えないならこの行は不要 3pxを変えると下線の幅が変わる)*/
text-align:center; /*文字を中央に寄せる(変えないならこの行は不要)*/
}



リニューアル前にあるデザイン(カスタムスキン1・2・3の場合)
<変更前>
.side_title{
text-align:center;
font-weight:bold;
font-size:12px;
letter-sapacing:1px
}


<変更後>
.side_title{
text-align:center;
font-weight:bold;
font-size:12px;
letter-sapacing:1px;
background-color:#00AA3C; /*背景の色*/
background:url(画像URL) no-repeat;/*背景に画像を置く場合(背景を画像にしないならこの行は不要)*/
color:#FFF; /*文字の色(変えないならこの行は不要)*/
border-bottom:3px solid #A8E5A9;/*タイトル背景下に下線を入れる(変えないならこの行は不要 3pxを変えると下線の幅が変わる)*/
}


ちなみにデザインを「ライトグレー」にした場合、下サンプルの背景を画像のサイズは横200ピクセル縦40ピクセル
side.png


デザインが「カスタムスキン」の場合、横サイズは160ピクセル程度の画像が望ましい
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
トラックバックの受付は終了しました
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック