Nice!欄のNice!文字の設定を変える

【Nice!欄のNice!文字の設定を変える】
Nice!欄のNice！文字の設定を変えるには
/*-----Entry-----*/にある

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
}
この部分を追加・変更します。
なお、今回の変更はNice!部分の変更で
Nice!という言葉自体の変更ではありません。
Nice!という言葉自体を変更したい方は
記事「Niceボタンの文字を変える」内の
リンク先をご覧ください。


【背景の設定】
＜Nice!の背景色を変える＞Nice!の背景色を変える要素は

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
background:#------;
}
赤字の部分を記述して下さい。
＃------部分にお好みの数字
または色名(色の場合は＃不要)を指定ください
6ケタの数字については「色の設定について」の
項目をご覧ください。

Nice!



＜Nice!に背景画像を挿入する＞
背景画像を挿入する場合は
まず、元のNiceアイコンを削除します。
次に背景画像に使いたいアップロード済みの
ファイルをクリックします。
すると

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
↑削除
padding-left:20px;
background:url("/----------------") no-repeat;
}
という記述になります。
背景にする画像は透明度の高いものを
使った方が、文字が見えにくくならず便利です。

Nice!


＜Nice!の前の画像を変更する＞
Nice!の前の画像を変更するには
先ほどの＜Nice!に背景画像を挿入する＞と同じ手順です。
挿入したい画像をファイルをクリックします。

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
↑削除
padding-left:20px;
background:url("/----------------") no-repeat;
}
上記のようになりますので
赤字部分に
background:url("/----------------") no-repeat left;
青字部分を追記してください。

Nice!

上手のように背景画像と文字が重なる時は
padding-leftの値を変更してください。

Nice!



【Nice!の文字の設定】
＜Nice!の文字の色を変える＞
Nice!の文字色を設定します。
Nice!の文字色を変える要素は

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
color:#------;
}
ここに赤字部分を記述し
＃------部分にお好みの数字
または色名(色の場合は＃不要)を指定ください
6ケタの数字については「色の設定について」の
項目をご覧ください。


＜Nice!の文字の太さを変える＞
Nice!の文字の基本となる太さを設定します。
(個別設定される部分は除く)

設定方法は

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
font-weight:★;
}
ここに赤字部分を記述して下さい。
★＝100～900までの数(100単位)
400がnormal,700がbold
詳しくは記事「フォント１」をご覧ください。


＜NIce!の文字を斜体にする＞
NIce!の文字を全部斜体にします。
設定方法は

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
font-style:italic;
}
です。


＜Nice!のフォントの種類を変える＞
Nice!の文字を指定したフォントにします。
設定方法は

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
font-family:"使いたいフォント";
} 
ここに赤字部分を記述して下さい。

例
#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
font-family;"HGP平成明朝体W9";
}

(欄内にフォントHGP平成明朝体W9";を適用)
フォント名が分からない時は
エクセルやワードからコピーして下さい。
（全角空白とか紛らわしいものがあるので
手打ちはやめた方がいいです。）

見る側のパソコンにインストールされていない
フォントは無視されますのでご注意ください。


＜Niceの文字の大きさを変える＞
Nice!の文字を指定した大きさにします。
設定方法は

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
font-size:★;
}
ここに赤字部分を変更して下さい。
★＝
サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px)
または、larger,smaller,％
またはxx-large,x-large,large,medium,small,x-small,xx-small


【Nice!に枠線をつける】
＜NIce!に枠線をつける＞
Nice!に枠線をつけます。

#nice h4 {
background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
border:枠線の種類　枠線の幅　枠線の色;
}

Nice!

枠線のタイプ・色・太さの間には
半角スペースが入ります。
詳しいボーダーの種類については
記事「ボーダー1」「ボーダー2」を
ご覧ください。

タグ：CSS so-net nice ブログ カスタマイズ