So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

カスタムスキン作成方法・3 [文字色編] [最初の一歩]

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

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

もご覧ください。


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

①全体の文字色を変える

/*-----Common-----*/ 
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444444;
border: 1px solid #FF0000;
}
sakusei-10.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

/*-----Common-----*/ 
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#0000FF;
border: 1px solid #FF0000;
}
sakusei-11.PNG
(クリックで拡大)

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

③”プレビュー”で確認

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

 



【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; }


sakusei-11.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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; }


sakusei-12.PNG
(クリックで拡大)

・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つあります。お好きな方を選んでください。
   A. 個別タグを消す
   B. 個別タグを書き直す

③”プレビュー”で確認

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

 
nice!(3)  コメント(2) 
共通テーマ:blog

nice! ありがとう 3

コメント 2

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

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

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

kuu

★La_vbl_kokさん

お役に立ててよかったです[ニコッ]
by kuu (2009-02-13 14:02) 

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

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

  

         

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

×

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