プロフィールのnice!の色を変更しよう！ [実践編：サイドバー]
説 明
プロフィールのnice!の部分の背景色と文字色、枠の色と形を変更します。
黄色の背景にブルーの文字がスキンに馴染んでないと密かに思っていた方、簡単ですのでこの機会にオリジナルスキンに挑戦してみませんか？
完成形
※ 本記事では「ツタ」スキンをベースに使用しています
準 備
編 集
１nice!の背景色と文字色を変える
.niceを変更します。
まずは背景色をbackgroundに指定します。サンプルでは、nice!とスキンを調和させるため本文タイトルの文字と同じ色（#50681C）を設定します。
ソースコード：
.nice {
：
：
background:#50681C;
}
：
：
background:#50681C;
}
次に、nice!の文字色をcolorに指定します。サンプルでは背景色が濃い目の色なので、シンプルに白を設定します。
ソースコード：
.nice {
：
：
background:#50681C;
color:#FFFFFF;
}
：
：
background:#50681C;
color:#FFFFFF;
}
２枠の色と形を変える
引き続き、.niceを変更します。
枠を変更するにはborderを指定します。
まず、枠の種類を変更します。サンプルでは直線（solid）を二重線（double）にします。
ソースコード：
.nice {
：
：
background:#50681C;
color:#FFFFFF;
border:1px double #0090ff;
}
：
：
background:#50681C;
color:#FFFFFF;
border:1px double #0090ff;
}
おや、あったはずの枠が無くなってしまいました。
でも大丈夫。枠の太さが1pxのままでは二重線を表現出来なかっただけです。二重線を設定するためには少なくとも枠の太さを3pxにしてください。
ソースコード：
.nice {
：
：
background:#50681C;
color:#FFFFFF;
border:3px double #0090ff;
}
：
：
background:#50681C;
color:#FFFFFF;
border:3px double #0090ff;
}
注：単位の[px]は忘れずに！
最後に枠の色を指定します。
サンプルでは二重の枠ではなく、nice!の背景の中に枠が一本存在するような雰囲気にするため、プロフィールの背景色（#EEF5E1）を設定します。
ソースコード：
.nice {
：
：
background:#50681C;
color:#FFFFFF;
border:3px double #EEF5E1;
}
：
：
background:#50681C;
color:#FFFFFF;
border:3px double #EEF5E1;
}
二重線の外側の枠が背景に溶け込み、見えなくなったのがわかりますか？
以上。
関連項目
■ 【背景】background [リファレンス]
■ 【ボックス】border [リファレンス]
■ 【文字】color [リファレンス]
コメント 0