top3

賢威のヘッダー部分である背景・文字・リンクの色を変える設定

Pocket

5973938226_d0f4e143b0
賢威のヘッダー部分のカスタマイズです。

ヘッダーとはブログの最上部にある、タイトルが表示されている箇所のことですよね。

やはり、ページを開いてすぐに目につく箇所なので、読者の第一印象はそこで決まると言っても過言じゃありません。


コンテンツ部分の色を変更してもヘッダーは変わりません。

ですので、コンテンツの背景を変えたら、ヘッダーも変えることを忘れずにやりましょう!

ヘッダーの色を変える


ヘッダーの色を変えると言うと、

  1. 背景の色を変える
  2. 文字の色を変える

この2つがあるかと思います。


1,背景の色を変える


まず、「外観」→「テーマ編集」→「design.css」へ移動し、ヘッダーと文字を探しましょう。

そして、以下を変更します。
(ここでは背景が赤になるように設定します)

【before】

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background-color: #fff;
font-size: 1.2em;
}

#header-in{ padding: 1em 0; }

        
【after】

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background-color: #f00;
font-size: 1.2em;
}

#header-in{ padding: 1em 0; }



                  
そうすると、こんな感じでヘッダー背景が赤くなります。

81033ea0ad5ef9c231482e01c64c06c2

ちなみに、すぐ下のfont-sizeでブログタイトル文字の大きさを変えることができます。


2,文字の色を変える


今言った通り、文字とはブログタイトルのことですが、ここはリンクになっていますので、「普通の状態」と「マウスオーバーした時の状態」と2つ色を変更することができます。


変更する箇所はさきほど変更した箇所のすぐ下に、「ヘッダーロゴテキスト」があるので、そこのcolorという場所で色を指定できます。


visitedが「普通の状態」、activeが「マウスオーバーした時の状態」です。


/*●ヘッダーロゴテキスト*/
.header-logo a{ text-decoration: none; }

.header-logo a:link,
.header-logo a:visited{ color: 好きな色; }  ←「普通の状態
.header-logo a:hover,
.header-logo a:active{ color: 好きな色; }  ← 「マウスオーバー



これで、背景の色と文字の色を変更することができます。

最初にも言いましたが、ここは読者が一番最初に見る場所なので、お気に入りの文字の大きさ、サイトの雰囲気にあった色を選ぶことにしましょう。

コメントを残す

サブコンテンツ