[対応:5]全体文字色(フォント)やリンク色の変更方法
賢威のフォント色は若干グレーになっているので、
はっきりした黒を使いたいって人は多いと思います。
賢威テンプレートでの文字(フォント)色の変更や
フォントサイズの変更方法をご説明します。
次にリンク色の変更方法も一緒にご紹介します。
全体のフォント色の変更方法
まずは、全体のフォント色から説明します。
ダッシュボード⇒外観⇒テーマ編集から
cool-whiteg○○.cssをクリックします。
/*——————————————————–
3、サイト全体の基本文字色
——————————————————-*/body,pre{ color: #666; } ←#000に変更
/*リンク文字*/
a{ text-decoration: underline; }
a:link{ color: #666; }
a:visited{ color: #666; }
a:hover{ color: #c60; }
a:active{ color: #c60; }
上記のソース部分のbody,pre{ color: #666; } を変更します。
デフォルトでは、#666の中間グレーになっているので、
ブラックの#000に変更します。
これで全体の文字色はブラックになったのですが、
一部、この部分だけ、まだグレーが残っているので
次に、ヘッダー部分のフォント色変更をご案内しまし。
cool-whiteg○○.cssからやや下のヘッダー部分のソースを確認します。
/*——————————————————–
ヘッダー
——————————————————–*/#header{
position: absolute;
top: 30px;
height: 110px;
background: url(images/common/bg-header.gif) left top repeat-x #222222;
font-size: 1.2em;
color: #666; ←#000;に変更します。
}
上記のソースのcolor: #666; ←#000;に変更します。
これでヘッダー部分のフォント色もブラックが適用されます。
これで文字全体の色が変更できました。
リンク色の変更方法
次にリンク色の変更方法をご説明します。
リンク色を変更する前に、リンクの色には4種類の設定があります。
- 訪問する前のリンク色
- 訪問済みのリンク色
- マウスを乗せた時のリンク色
- マウスを乗せた時の訪問済みのリンク色
の4つの設定が必要です。
特に難しく考える必要もありませんが細かく設定ができます。
a:link { color: #666 }
訪問する前のリンク色
a:visited { color: #666 }
訪問済みのリンク色
a:hover { color: #c60 }
マウスを乗せた時のリンク色
a:active { color: #c60 }
マウスを乗せた時の訪問済みのリンク色
となります。
これを覚えておいてください。
ダッシュボード⇒外観⇒テーマ編集から
cool-whiteg○○.cssをクリックします。
※フォント色を変えた場所と同じ部分です。
/*——————————————————–
3、サイト全体の基本文字色
——————————————————-*/body,pre{ color: #666; }
/*リンク文字*/
a{ text-decoration: underline; }
a:link{ color: #666; }
a:visited{ color: #666; }
a:hover{ color: #c60; }
a:active{ color: #c60; }
を好きなカラーに変更します。
カラー見本は、こちらを参照
⇒原色大辞典
私の設定例
/*リンク文字*/
a{ text-decoration: underline; }
a:link{ color: #0000ff; }
a:visited{ color: #0000ff; }
a:hover{ color: #ff8c00; }
a:active{ color: #ff8c00; }
私はこんな感じで変更してみました。
以上
賢威カスタマイズ 全体文字(フォント)色やリンク色の変更方法でした。
こんばんは。^^
本当、まさに文字色の薄さが気になっていたので
とても助かりました!
有難うございます☆