賢威ヘッダー（ページ上部）の文字の色・サイズ・背景を変える

賢威テンプレートで作ったサイトのページ上部（ヘッダー）
の文字の色やサイズ・背景の色を変える方法をご紹介します。

ヘッダーに画像を入れる方法は、『賢威ヘッダー（ページ上部）に画像を入れる方法（2パターン）』の記事を参考にしてください。

 

ヘッダーはここ

ヘッダーのデザインは、『design.css』で変更します。

画像は一部、『header.php』を変更します。

ヘッダーはこの部分です。

「トップ」と「ヘッダー」「グローバルナビ」に分かれますが、ここでは「トップ」と「ヘッダー」について説明します。

 

「グローバルナビ」については、『賢威のサイトタイトル下のメニュー【グローバルナビ】のデザインをカスタマイズする』の記事をご覧下さい。

WordPress管理画面＞外観＞テーマ編集をクリックします。

 

右のメニュー下の方から『design.css』をクリックします。

 

 

ヘッダーの文字の色・大きさを変える

トップの文字の色と大きさを変える

まずトップの部分です。
「design.css」編集画面の上からほんの少し降りたところに

/*--------------------------------------------------------
トップ
--------------------------------------------------------*/
と、あります。

賢威コーポレート版の場合、トップの部分には背景に色がないので
文字の色はサイト全体のリンクの文字色と同じになっています。

背景に色をつけた場合など
ここだけリンクの文字の色を変えたいという場合は
文字の色を指定する行を追加します。

#top a:link,
#top a:visited{ color: #fff; }
#top a:hover,
#top a:active{ color: #9c3; }

ヘルシー版はトップに背景色があるので
はじめから指定する箇所があります。

 

文字のサイズはそのままで
文字の色を下記のとおり追加しました。

①未訪問のリンクの文字　　紫（#cc00ff）
②マウスをのせたときのリンクの文字　　黄緑（#00ff33）

 

 

ヘッダーの文字の色を変える

次はヘッダーの文字を変更します。

ヘッダーには3箇所に文字があります。
それぞれ別に設定します。

トップの下の方に

/*--------------------------------------------------------
ヘッダー
--------------------------------------------------------*/
と、あります。

それぞれ次の箇所で変更します。

 

文字の色を以下のように変更しました。

①ヘッダーロゴの文字
未訪問のリンクの文字　　黒（#333）→濃い紫（#660066）
マウスをのせたときのリンクの文字　　オレンジ（#f60）→黄緑（#66cc33）

②右上の文字　　黒（#333）→濃い赤（#C73E3A）

③左下の文字
もともとサイト全体の文字と同じ色になっていますが
文字の色を指定する行を追加しました。　→青緑（#20B2AA）

#header h1{
margin-bottom: 1em;
font-size: 1.167em;
color: #20B2AA　　←文字の色を指定する行を追加
}

 

ヘッダーの文字の大きさを変える

次に文字のサイズです。

3箇所を１度に変更する場合は、一番上の1.2emの数字を
変更してください。

個別に変更する場合は、それぞれ該当する箇所を変更してください。

 

右上の文字サイズは指定できないようになっていますので
指定する場合は、文字サイズを指定する行を追加してください。

/*●ヘッダーテキスト・右上の文章*/
#header-in #header-text{
float: right;
width: 40%; /*・1行の幅はwidthの値を変更*/
font-size: 2.0em;　　　←文字サイズを指定する行を追加
color: #333;
}

 

1行の幅を変更して改行位置を調整する

ところで、
サイズを変更したり、サイトタイトルの文字数が多いと
変なところで改行してしまっていませんか？

例えば、ヘッダーのフォントサイズを1.2emから1.5emに変えると
こんな風になってしまいました。

 

こんな場合は、1行の幅を変更して調整しましょう。

 

それぞれ次の箇所を調整します。
ただ、左下の文の1行の幅は、ヘッダーロゴと同じ幅になっているようです。

 

ヘッダーロゴのwidthを59.5%から 62.5%に広げて
ヘッダーテキストのwidthを40%から 34%に狭めたら
うまく収まりました。

 

ヘッダーの背景色を変える

ヘッダーの背景色を変えるところは「トップ」と「ヘッダー」の2箇所です。

＜トップ＞

＜ヘッダー＞

背景色をそれぞれ以下のように変更しました。

①トップの背景色　　白（#fff）→シアン（#0099cc）
②ヘッダーの背景色　白（#fff）→薄いグレー（#C5CFD2）

 

背景色変更後のヘッダーです。