賢威6.1ヘッダー背景色とタイトルテキスト色の変更記述方法

ワードプレステンプレート賢威6.1利用時に、
ヘッダーの背景色を変更する設定方法を解説します。

賢威6.1カスタム

賢威もHTMLやCSSを独自に記述変更していくことで
オリジナリティ溢れるデザインサイトにすることが可能です。


ヘッダーの背景色とは、以下の赤枠部分になります。
賢威6.1ヘッダー背景
(上記サイトはヘッダー部分に画像を埋めているので、両サイドの色指定となります。)

賢威6.1ヘッダー背景色の変更記述方法

変更方法は非常に簡単です。

以下、テストサイトのヘッダー背景色を変更してみます。
(現時点では背景色は白設定となっています)
賢威テストサイト1

Wordpressダッシュボードの「外観」→「テーマ編集」→「design.css」に移動します。

「design.css」のヘッダー部分を探します。
そして、以下画像の赤枠部分を見つけます。ここの「#fff」部分を変更したい色記号に変更します。
賢威6.1ヘッダー背景変更

HTMLの色指定記号は、以下のサイトなどを参照してください。
参照:HTML色見本


記述を以下の記述に変更してみました。

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

以下のように変更されました。
賢威6.1ヘッダー背景変更1

このようにして自分が指定するお好みのヘッダー背景色に変更できます。
ヘッダータイトルテキストは背景色の上に乗ってくるので埋もれず大丈夫です。
(テキストと背景色を同色にすると区別つかなくなりますが)

ヘッダーテキスト色の変更

ヘッダー背景色が変更になり、今度はサイトタイトル色とのバランスをみて変更します。
上記例の現時点ではテキストが若干埋もれているので、こちらの変更方法を解説しておきます。

同じくdesign.cssの記述を変更します。

以下の場所赤枠内を編集します。こちらの「#333」の部分記述を変更していきます。
賢威ヘッダーテキスト色

ヘッダーサイトタイトルを白に変更してみました。
賢威ヘッダーテキスト色1

ヘッダーサイトタイトルテキスト色も変更していき、
背景色とテキスト色のバランスを組み合わせて最適化していきましょう。

design.cssの編集

上記のように各種サイトのデザイン指定部分変更などをdesign.cssで行うことが出来ます。
以下、design.cssで設定変更することができます。

  • テキスト色の変更
  • 背景色の変更

賢威ワードプレステンプレートのデザインカスタムは、
ほぼこのdesign.css部分を変更することにより可能となります。

簡単な色の変更などは数値をいじることでできていきますので、
HTMLやCSS知識をつけていきながら習得していきましょう。
(バックアップを取りながら変更していきましょう)


賢威6.1WordPressテンプレート導入からカスタム設定方法まとめに戻る


当サイトは人気ブログランキングに参加しています。
かなりな位置にいますので、是非現在の順位を以下のボタンより確認してみて下さい。
↓ ↓


記事の内容はいかがだったでしょうか?

もしも当記事を読んで少しでも興味深く思われましたら、
以下のソーシャルメディアボタンで共有してもらえると嬉しいです!
  

コメントを残す


月収100万円を稼ぐ為のメルマガ講座に無料登録しませんか?


お名前 必須
メール 必須



サブコンテンツ

このページの先頭へ