ブログで一番よく目にいきやすいのがヘッダーの部分です。ブログの雰囲気を決める部分でもあるのでちょっとだけでもこだわりたくないですか?

ここは何もしなければ、ブログタイトルだけのシンプルな状態です。
↓↓↓

これでも悪くはないのですが、ちょっと殺風景です。

これを私はこんな感じにしてみました。
↓↓↓

賢威8のヘッダーの色

今日は、こんな風に賢威8のヘッダーの色を変える方法をお伝えします。

1.ヘッダーのロゴ画像を載せる

色を変えると言いましたが、厳密に言うとロゴ画像とCSSによる色の変更の2つによって成り立っています。

まずは、ヘッダーにロゴ画像を載せます。

今回は、こんな画像を用意しました。
↓↓↓

賢威8ヘッダーの変え方

↑この画像は自分で作成しています。大きさは1000×180です。

これをWordPressにアップロードします。

賢威8でヘッダーロゴをアップロードする手順

1.ワードプレスのダッシュボードで【賢威の設定】⇒【賢威の設定】をクリックします。

賢威8のヘッダーロゴ

 

2.【画像をアップロード】するをクリックする。

賢威8のヘッダーロゴ

3.画像をワードプレスにアップロードし【選択】をクリックする。

賢威8のヘッダーロゴ

すると、下記のようにヘッダーロゴの画像がアップロードされます。

賢威8のヘッダーロゴ

最後に、ページの一番下の【変更を保存】をクリックします。

賢威8のヘッダーロゴ

この時点で、ブログのヘッダーはこんな感じになりました。
↓↓↓

賢威8のヘッダーロゴ

↑この状態でも悪くはないですが、ヘッダーの白色部分が多いのでちょっと未完成な感じがしますね。

ヘッダーの白色の部分をロゴ画像と同じ色に変更したいと思います。

2.ヘッダーの色を変える

ヘッダーの色を変えるにはCSSのページを使います。

1.【外観】⇒【カスタマイズ】をクリックします。

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

2.追加CSSで編集する

下記のような画面になるので、左側から【追加CSS】をクリックします。

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

少し画面を下へ動かすと、下記のような編集画面が出てきます。

今は、まだ空白のままだと思いますがここにCSSコードを入れていきます。

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

こんな感じのコードを入れます。
↓↓↓

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

すると、こんな風に、ヘッダーの色が変わりました。

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

CSSコードについて

わかりにくいので、コードの部分を下記に示しておきます。

ヘッダーの色を変えるCSSコード

.keni-header_wrap{

background-color: #FECCFE; /*ヘッダーの背景色*/
}

.keni-gnav_wrap{
background-color:#D54F98; /*グローバルメニューの背景色*/
}

.keni-gnav_cont{
margin: 0;
background:#D54F98;
}

.keni-gnav_inner li a{
color: #fff;
border-bottom: 4px solid #D54F98
}

↑このコードをこのまま使うのですが、赤い文字で示している部分は、色のコードです。

ここはあなたの好きな色のコードを使います。もし、

「ヘッダー画像と同じ色にしたいけど、色のコードがわからない!」

「ブログの色と同じ色にしたいけど色のコードがわからない!」

等という場合は

画像にマウスを合わせるだけで色のコードがわかる「すぽいど君」という無料ツールがおすすめです。

こんな感じでヘッダーの色を変えることができるので、あなたもぜひやってみてくださいね。

賢威のカスタマイズやレビューについては下記のページにまとめているので、よかったらご覧ください。

テントウムシライン

170

最後まで読んでいただきありがとうございます。 このブログを「いいな」と感じていただけましたら 下のランキングバナーを一回押していただけますと嬉しいです。 みなさんのひとポチが励みになります!

にほんブログ村 小遣いブログ アフィリエイトへ

無料プレゼント実施中!!

めいこおすすめアドセンス外注化の教科書

めいこが初月から15万円達成できた物販アフィリエイト教材

ルレアプラスレビュー