賢威8のヘッダーの背景色を変えたい場合‥子テーマへの簡単記述方法

私がテンプレートを賢威7から賢威8に変更したのはつい最近です。

普通に使う分には便利この上ないテンプレートですが、自分好みにデザインを変更するのはなかなか大変で「わからへん~( ;∀;)」と四苦八苦しながらカスタムに励んでいます。

賢威のサポートフォーラムなら、翌日~2,3日で対応してくれます。
さすが有料テンプレートですね。

今回はブログの顔「ヘッダー部分のカスタマイズ」についてシェアしますね。

賢威8のヘッダーの色を変えてみた

このブログのヘッダーはつい最近まで、初期設定のままでこんなシンプルヘッダーでした。

スッキリしているけど、白っぽくて未完成な感じがしませんか?
で、こんな感じに変更。

センスは別として( ;∀;)私好みのヘッダーになりました。

これくらいの変更は設定をちょっと変えるだけで余裕だろうと思っていましたが、なかなか骨が折れました。
cssというファイルの書き換えが必要なのです。

でも順を追ってやっていくと案外出来ちゃうものですね(^^♪

賢威8のヘッダーとメインビジュアルは違う

私もずっと混合していたんですが、賢威8のヘッダーとメインビジュアルは違います。

メインビジュアルは赤丸で囲った肉球壁紙の部分で、用意した画像をメインビジュアル設定画面に挿入するだけです。

賢威8ではメインビジュアルを動画にしたり、かっこよくスライダーにしたりのカスタムがボタンひとつで簡単にできます。

ヘッダーは一番上の茶色にした部分です。
ここの色を変えたりするのがちょっとだけ大変なのです。

私の好みではメインビジュアルは不要なので、肉球画像はサクッと削除しました。

賢威8のヘッダーの色を変える手順

賢威の子テーマが設定されていることが前提です。
親テーマ、子テーマの設定もちょっと戸惑った部分なので、違う記事でやり方をシェアしますね。

1.子テーマのcssへコードを記述

  • 【外観】→【テーマエディター】をクリックします。
  • 賢威8.0(子テーマ): スタイルシート (style.css)になっていることを確認
  • 右側のテーマファイルでbase.cssをクリック

ここに以下のように記述します。

コピペOK

.keni-header_wrap{
background-color: #764122; /*ヘッダーの背景色*/
}
.keni-gnav_wrap{
background-color: #764122; /*グローバルメニューの背景色*/
}
.keni-gnav_cont{
margin: 0;
background:#764122;
}
.keni-gnav_inner li a{
color: #FFFFFF;
}

【♯764122】は茶色のカラーコードです。お好きなカラーコードを入れてくださいね。

最後から2行目の【#FFFFFF】はメニューの文字色です。ここもお好きな色をどうぞ。

カラーコードはこちらのサイトが参考になるかも。
http://www.netyasun.com/home/color.html

記述が出来たら【ファイルを更新】をクリックしてください。
こんな風に反映しています。

ん?

なおの顔や猫のライン画像が入ってないし、サイト名のフォントも違います。
それに、サイト説明文が見にくくなってほぼ表示されていませんね。

もうふた手間必要です。頑張りましょう♪

2.ロゴを作成・設定する

ロゴはお好みの部分なので設定してもしなくてもOK。
ロゴを設定する場合は、まずはロゴの作成です。

私はこんなのを用意しました。

サイズは590x80ピクセルです。サイズは大体で大丈夫ですよ。
ロゴを作成するときのポイントは「色」をどうするかです。

私のヘッダーのように茶色1色にする場合は、ロゴの色もヘッダーと全く同じコードで作成してくださいね。
この場合は【♯764122】です。

同じカラーコードで作成しないと、こんな感じになります。

これはデザインのお好みの問題ですので、自由にカスタムをしてくださいね。

【賢威の設定】でロゴ画像を設定します。

用意したロゴをアップロードしてください。

忘れずに【変更に保存】です。

3.サイトの説明文の色を変える

ヘッダーの色を濃い茶色にしたので、黒色だったサイト説明文が目立たなくなってしまいました。

メニュー文字色と同じ白色に変えてみますね。

【外観】ー【カスタマイズ】で【追加css】をクリックします。

ここにこのコードを記述します。

コピペOK

p.site-description {
color: #fff;
}

【#fff】は白色のカラーコードです。

忘れずに【公開】をクリックして反映完了です。

お疲れさまでした。
カラーコードを変えたりロゴ画像を工夫すると、あなたオリジナルのヘッダーが作れますよ。

参考になれば嬉しいです♪

ご質問があればお気軽にどうぞ♪

お問い合わせはこちらから