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


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

1

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

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

今回は例として、背景色とフォントサイズを大きくしてみます。

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

賢威のヘッダー領域の背景色やフォントサイズを変更するには、3箇所の変更が必要です。

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

まずはトップです。

2

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

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

3

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

4

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

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

続いてヘッダーです。

5

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

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

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

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

6

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

7

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

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

続いてメニューです。

8

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

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

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

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

9

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

10

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

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

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

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

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

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

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

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

ここからは、ヘッダー領域に画像を挿入する方法について書いていきます。

まずは、ヘッダーに使う画像を用意して、ワードプレスにアップロードします。今回は例として、横950px、縦120pxの画像を用意しました。

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

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

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

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

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

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

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

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

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

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ