賢威のヘッダーの背景色やフォントサイズの変更と背景画像の挿入方法


賢威のヘッダー領域というとこちらですね。

<賢威7>賢威7 ヘッダー 初期

<賢威6.2>1

このヘッダーの背景色や、テキストのフォントサイズを変更したいというときがあると思いますので、今回はそれについて書いてみたいと思います。

賢威7のヘッダーの背景色とフォントサイズ(文字の大きさ)を変更する方法

賢威7のヘッダーの背景色とフォントサイズ(文字の大きさ)を変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、base.cssの中にある、ヘッダーの項目を探します。

賢威7 base.css header要素

上記画像の中にある、○○の部分を、以下のCSSコードに書き加えます。

.site-header{

background-color: #fff;

}

上記一文を書き加えると、以下のようになります。

賢威7 ヘッダー背景色 変更

『background-color;#○○○』は、背景色を指定する際に使用するCSSコードになります。

『#○○○』の部分は、色の値ですので、『#○○○』の部分を好みのカラーコードを入力することで、背景色を変更することができます。

カラーコードは、こちらのような色見本を参考にします。

色見本

今回は一例として、黄色のカラーコード『#ff0』を使用します。

以上の内容を編集することで、ヘッダーの背景色が以下のようになります。

賢威7 ヘッダー背景色 黄色

次に賢威7のヘッダーのフォントサイズ(文字の大きさ)を変更します。

賢威7のヘッダーに表示されるテキスト(文字)は、base.cssの中にあるヘッダーロゴの要素から変更することができます。

なので、賢威7のヘッダーに表示される文字の大きさを変更するには、base.cssの中にあるヘッダーロゴを探します。

賢威7 base.css ヘッダーロゴ

上記画像の中にある、『font-size: 2.25em』の部分が文字の大きさをコントロールするCSSコードです。

『em』というのは、文字の大きさをコントロールする単位の一つです。

『em』は、1を基準とした単位ですので、1より大きければ、いま表示されている文字サイズより大きくなります。

逆に、1より小さければ、いま表示されている文字サイズより小さくなります。

なので、『2.25em』となっている部分の数値を大きくしたり、小さくしたりすることで、文字の大きさが変わります。

今回は、例として、ヘッダーに表示される文字を小さくしますので、『2.25em』の数値を『1.25em』に変更します。

変更すると、ヘッダーロゴの大きさが以下のように変わります。

賢威7 ヘッダーロゴ サイズ変更

これで、賢威7のヘッダーの背景色とフォントサイズ(文字の大きさ)変更ができました。

賢威7のグローバルメニューの背景色を変更する方法

次に、賢威7のヘッダー領域に表示されるグローバルメニューの背景色を変更します。

グローバルメニューの背景色は、以下の画像のように、メニューが表示されている部分と、両サイドの部分に分かれていて、それぞれで背景色を変更することが可能です。

賢威7 グローバルメニュー 表示

まずはメニューが表示されている部分の背景色を変更しますので、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順番にクリックし、base.cssの中にある以下の画像の部分を探します。

賢威7 base.css グローバルナビリスト

『.global-nav-in li a』の項目を見つけたら、上記画像でマークした箇所を、好みのカラーコードに編集します。

カラーコードは先程と同様に、こちらのような色見本を参考にします。

色見本

今回は例として、水色『#0ff』のカラーコードに変更します。

カラーコードを書き換えると、以下のように、メニューが表示されている部分の背景が、灰色から水色に変わります。

賢威7 グローバルメニュー 水色

次に両サイドの背景色を変更します。

両サイドの背景色は、『.global-nav』の部分を編集します。

以下の画像の部分です。

賢威7 base.css グローバルナビ

上記画像でマークした部分のカラーコードを変更することで、グローバルメニューの両サイドの背景色が変わります。

今回は、例としてピンク色にします。

カラーコードを書き換えると、以下のように、メニューの両サイドの背景色が変わります。

賢威7 グローバルメニュー 両サイド

これでグローバルメニューの背景色を変更することができました。

賢威6.2のヘッダーの背景色とフォントサイズを変更する

賢威6.2のヘッダー領域の背景色やフォントサイズを変更するには、

・トップ

・ヘッダー

・グローバルナビ

3箇所の変更が必要です。

それぞれについて解説します。

賢威6.2のトップの背景色とフォントサイズを変更する

まずはトップです。

ワードプレスのダッシュボード→外観→テーマの編集→design.cssに進みます。

2

ここは賢威の1番上の領域の部分です。賢威のサイトには右上にサイトマップという文字がありますが、そこがトップの領域です。

ここの背景色を変えるには、上の画像の「background-color:」の英数字を別の色の英数字に変えて、フォントサイズは「font-size:」の数字を大きくすれば変更できます。

3

このようにしてみました。「ファイルを更新」ボタンをクリックして保存し、トップページに行ってみます。

4

このようになっていればOKです。

賢威6.2のヘッダーの背景色とフォントサイズを変更する

続いてヘッダーです。

5

ここだけを変更してもヘッダー領域全体の色を変えることはできないので、混乱する人が多いところです。

要領はトップのときと同じです。

「background-color:」の英数字を別の色の英数字に変えて、フォントサイズは「font-size:」の数字を大きくすれば変更できます。

今回は色を変えてみます。

6

このようにしてみました。「ファイルを更新」ボタンをクリックして保存し、トップページに行ってみます。

7

このようになっていればOKです。

賢威6.2のメニューの背景色を変更する

続いてメニューです。

8

メニューは正確にはグローバルメニューと呼ばれます。

要領はトップのときと同じです。※字の大きさはまた別の方法になるので、今回は背景色のみにします。

「background-color:」の英数字を別の色の英数字に変えれば変更できます。

今回は色を変えてみます。

9

このようにしてみました。「ファイルを更新」ボタンをクリックして保存し、トップページに行ってみます。

10

このようになっていればOKです。

賢威6.2のヘッダーの背景色はバランスに注意

このように、賢威のヘッダーの背景色を変更しましたが、実際はこのような色にしてはいけません。

何故かと言うと、蛍光色なので、目が疲れるからです。

特にヘッダーは、サイトにアクセスしてすぐに目に飛び込んでくる部分です。目立たせようとして上のような蛍光色でヘッダーの背景色を埋め尽くしてしまうと、逆に直帰率が上がってしまいます。

ヘッダーの背景色は蛍光色にしないで、無難に白にしておくか、僕のサイトのように薄めの灰色やクリーム色などにしておくと良いです。

賢威のヘッダーに画像を挿入する方法

僕のサイトもそうですが、ヘッダーに画像を挿入している人もいます。これだと、サイトに独自性が生まれて、雰囲気が良くなります。

ここからは、賢威7と賢威6.2、それぞれのヘッダー領域に画像を挿入する方法について書いていきます。

まずは、ヘッダーに使う画像を用意して、ワードプレスにアップロードします。

ヘッダーに使う画像のサイズは好みのサイズで大丈夫ですが、はじめてヘッダー画像を挿入される方は、

賢威7の場合、横1200px、縦250pxくらい

賢威6.2の場合、横900px、縦200pxくらい

の画像サイズを使用する、スムーズに設定することができます。

賢威7のヘッダーに画像を挿入する方法

まず、賢威7のヘッダー画像を挿入するには、

ワードプレスのダッシュボード→賢威の設定

の順にクリックし、以下の画面から設定します。

賢威7 ロゴ画像

上記画面の下のほうに表示されている、『ロゴ画像』の項目から、『画像を設定する』のボタンをクリックします。

以下の画面が表示されますので、『ファイルを選択』をクリックし、あらかじめ用意しておいた画像を選択します。

ワードプレスにアップロードしてある画像を使用する場合は、右上にある『メディアライブラリ』をクリックし、画像を選択します。

賢威7 ロゴ画像 選択

次に任意の配置と画像サイズを選択し、『投稿の挿入』のボタンをクリックします。

賢威7 ロゴ画像 表示設定

以下のように、挿入した画像が表示されたら、画面を下のほうまでスクロールし、『変更を保存』をクリックします。

賢威7 ロゴ画像 選択1

すると、ロゴ画像の項目に、選択した画像が以下のように表示されます。

賢威7 ヘッダー画像1

これで、ヘッダー画像の挿入は完了です。

ただ、賢威7の場合、初期状態でトップページに画像が差し込まれています。以下の赤枠で囲った部分です。

賢威7 メイン画像 初期

この画像が邪魔に感じる場合、

ワードプレスのダッシュボード→賢威の設定→トップページ

の順にクリックし、メイン画像の項目から削除します。

賢威7 トップページ メイン画像

このページを下の方にスクロールしますと、『メイン画像』の項目に画像のURLが入力されています。

このURLを削除すると、トップページに表示されている画像を削除されます。

賢威7 トップページ メイン画像 削除

画像のURLを削除すると、トップページに表示されている画像が消え、以下のようになります。

賢威7 ヘッダー画像 変更完了

賢威6.2のヘッダーに画像を挿入する方法

次に賢威6.2のヘッダーに画像を挿入する方法について解説します。

まずは、ワードプレスのダッシュボード→外観→テーマの編集→header.phpに進み、下の画像の部分を探して下さい。

賢威ヘッダー画像挿入画像2

そして上の画像の赤い線の部分を消して(必ずバックアップを取ってください)、次のコードを書き込みます。

<p><a href=”トップページのURL”><img src=”アップロードした画像のURL” width=”横幅” height=”縦” alt=”画像の名前”></a></p>

賢威ヘッダー画像挿入画像3

<a href=”トップページのURL”>があることで、画像をクリックしたときにトップページに移動することができます。

そしたら、ファイルを保存してトップページに戻ってみます。

賢威ヘッダー画像挿入画像4

このようになれば、ヘッダーに画像を差し込むことができます。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ