kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

カスタムスキン作成方法・3 [文字色編]

必要な部分のみ変更してください。 

□カスタムスキンの始め方
□カスタムスキン作成方法・1　[バナー編]　
□カスタムスキン作成方法・2　[背景編]

もご覧ください。

---

 
【6】文字色を変えよう（リンクしない部分）

①全体の文字色を変える

/*-----Common-----*/  #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; border: 1px solid #FF0000; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

color:#444444;　→　color:#0000FF;（青）　に変更してみます。

/*-----Common-----*/  #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#0000FF; border: 1px solid #FF0000; }

（クリックで拡大）

②個別設定の文字色を変える
■スキンによっては最初の設定で、全体の文字色を変えても変更されない部分があります。
■文字色は、部分によって個別設定できるので、変わってない部分は個別にタグが入っているということです。
■変える方法は2つあります。お好きな方を選んでください。
　　　Ａ.　個別タグを消す
　　　Ｂ.　個別タグを書き直す

③”プレビュー”で確認

④気に入った色が決まったら”保存”

 

---

【7】文字色を変えよう（リンクする部分）

①全体の文字リンク色を変える

/*-----Common-----*/  a:link   { text-decoration:none; color:　#777777; } a:visited  { text-decoration:none; color:　#777777; } a:active  { text-decoration:none; color:　#777777; } a:hover   { text-decoration:underline; color:　#70a000; } （クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

■color:#777777;　→　color: #FF0000;（赤）に変更してみます。

/*-----Common-----*/  a:link   { text-decoration:none; color:　color: #FF0000; } a:visited  { text-decoration:none; color: #FF0000; } a:active  { text-decoration:none; color: #FF0000; } a:hover   { text-decoration:underline; color:　#70a000; } （クリックで拡大）

・a:link　は　ページ全体のリンク（まだ開いてない部分の色）
・a:visited　は　ページ全体のリンク（一度開いたことがある部分の色）
・a:active　は　ページ全体のリンク（その部分を選択しているときの色）
・a:hover　は　ページ全体のリンク（マウスを乗せているときの色）

・a:link　{ text-decoration:none; color:#777777; }　・・・　noneは下線なし
・a:hover　{ text-decoration:underline; color:#70a000; } ・・・　underlineは下線あり

②個別設定の文字リンク色を変える
■スキンによっては最初の設定で、全体の文字リンク色を変えても変更されない部分があります。
■文字色は、部分によって個別設定できるので、変わってない部分は個別にタグが入っているということです。
■変える方法は2つあります。お好きな方を選んでください。
　　　Ａ.　個別タグを消す
　　　Ｂ.　個別タグを書き直す

③”プレビュー”で確認

④気に入った色が決まったら”保存”

 

タグ：ソネブロ ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ 作成方法 文字色 リンク文字色

コメント 2

コメントの受付は締め切りました

大変勉強になります(^-^)
こちらにお邪魔して変える事が出来ました☆

携帯から失礼しましたm(._.)m
by La_vbl_kok (2009-02-11 12:53) 

★La_vbl_kokさん

お役に立ててよかったです[ﾆｺｯ]
by kuu (2009-02-13 14:02) 

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。