So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

プロフィールのnice!の色を変更しよう! [実践編:サイドバー]

説 明

プロフィールのnice!の部分の背景色と文字色、枠の色と形を変更します。
黄色の背景にブルーの文字がスキンに馴染んでないと密かに思っていた方、簡単ですのでこの機会にオリジナルスキンに挑戦してみませんか?

完成形


※ 本記事では「ツタ」スキンをベースに使用しています


準 備



編 集

nice!の背景色と文字色を変える
.niceを変更します。
まずは背景色をbackgroundに指定します。サンプルでは、nice!とスキンを調和させるため本文タイトルの文字と同じ色(#50681C)を設定します。

ソースコード:
.nice {
   :
   :
background:#50681C;
}


次に、nice!の文字色をcolorに指定します。サンプルでは背景色が濃い目の色なので、シンプルに白を設定します。

ソースコード:
.nice {
   :
   :
background:#50681C;
color:#FFFFFF;
}



枠の色と形を変える
引き続き、.niceを変更します。
枠を変更するにはborderを指定します。

まず、枠の種類を変更します。サンプルでは直線(solid)を二重線(double)にします。

ソースコード:
.nice {
   :
   :
background:#50681C;
color:#FFFFFF;
border:1px double #0090ff;
}


おや、あったはずの枠が無くなってしまいました。
でも大丈夫。枠の太さが1pxのままでは二重線を表現出来なかっただけです。二重線を設定するためには少なくとも枠の太さを3pxにしてください。

ソースコード:
.nice {
   :
   :
background:#50681C;
color:#FFFFFF;
border:3px double #0090ff;
}

注:単位の[px]は忘れずに!

最後に枠の色を指定します。
サンプルでは二重の枠ではなく、nice!の背景の中に枠が一本存在するような雰囲気にするため、プロフィールの背景色(#EEF5E1)を設定します。

ソースコード:
.nice {
   :
   :
background:#50681C;
color:#FFFFFF;
border:3px double #EEF5E1;
}


二重線の外側の枠が背景に溶け込み、見えなくなったのがわかりますか?

以上。

関連項目

【背景】background [リファレンス]
【ボックス】border [リファレンス]
【文字】color [リファレンス]


nice!(5)  コメント(0) 
共通テーマ:ペット

nice! 5

コメント 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。