[対応：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種類の設定があります。

• 訪問する前のリンク色
• 訪問済みのリンク色
• マウスを乗せた時のリンク色
• マウスを乗せた時の訪問済みのリンク色

の４つの設定が必要です。
特に難しく考える必要もありませんが細かく設定ができます。

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

私はこんな感じで変更してみました。

以上
賢威カスタマイズ 全体文字(フォント)色やリンク色の変更方法でした。