賢威のグローバルメニューのフォントサイズや背景色・文字の色の変更方法


この記事では、賢威のグローバルメニューのフォントサイズ(文字の大きさ)や背景色・文字色の変更について解説します。

<賢威7>賢威7 グローバルメニュー 初期

<賢威6.2>賢威グローバルメニューフォントサイズ背景色変更画像1

こちらの赤枠で囲った部分が、賢威のグローバルメニューです。

※賢威7のグローバルメニューの背景色を変更については、こちらの記事で解説していますので、ここでは割愛します。

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

賢威7でグローバルメニューのフォントサイズ(文字の大きさ)を変更する方法

賢威7のグローバルメニューのフォントサイズを変更するには、

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

の順にクリックし、base.cssの中から以下のコードを探します。

賢威7 グローバルメニュー フォントサイズ

上の画像の赤枠部分に、以下のフォントサイズを指定するCSSコードを書き加えます。

font-size: 1.5em;

賢威7 グローバルメニュー フォントサイズ 追加

『1.5em』の数値を、大きくしたり、小さくしたりすることで、文字の大きさを変更することができます。

今回は一例として、フォントサイズを大きくするため、『1.5em』にしています。

フォントサイズを指定するCSSコードを書き加えることで、グローバルメニューのフォントサイズが以下のように変わります。

賢威7 グローバルメニュー フォントサイズ 変更

これで、賢威7のグローバルメニューのフォントサイズを変更できました。

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

賢威7のグローバルメニューの文字色を変更するには、先と同様にbase.cssからCSSコードの変更をおこないます。

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

の順にクリックし、base.cssの中から以下のコードを探します。

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

上の画像の青色でマーカーした部分が、文字色を指定するCSSコードです。

color: #fff;

『#fff』となっている部分の値を変更することで、文字の色を変更します。

色の値に関しては、こちらのサイトのような色見本を参考にします。

色見本

今回は一例として、文字色を黄色に変更しますので、『#fff』となっている部分を『#ff0』に書き換えます。

賢威7 グローバルメニュー 文字色 変更

上のように、色の値を『#ff0』に書き換えることで、グローバルメニューの文字色が以下のように変わります。

賢威7 グローバルメニュー 文字黄色

賢威7でグローバルメニューにマウスの矢印マークをのせた時(マウスオーバー時)の、文字色や背景色を変更する方法

続いて、賢威7のグローバルメニューにマウスの矢印マークをのせた時の、文字色や背景色を変更する方法について解説します。

こちらも先と同様に、base.cssからCSSコードを編集します。

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

の順にクリックし、base.cssの中から以下のコードを探します。

賢威7 グローバルメニュー マウスオーバー

上の画像で、『hover』『active』『focus』の部分は、それぞれ

・hover:マウスの矢印をリンク文字に乗せた状態

・active:リンク先に飛んでいる時の状態

・focus:入力フォームなどにカーソルを合わせた(クリック)した時の状態

という意味があります。

そして、青くマークした部分が、グローバルメニューにマウスの矢印をのせた時の背景色を指定するCSSコードです。

ピンクでマークした部分が、グローバルメニューにマウスの矢印をのせた時の文字色を指定するCSSコードです。

background-color: #eee;/*マウスの矢印をのせた時の背景色*/
color: #333;/*マウスの矢印をのせた時の文字色*/

このCSSコードの内、『#eee』『#333』となっている部分を、好みのカラーコードに変更することで、背景色や文字色を変更することができます。

今回は、一例として、マウスの矢印をグローバルメニューにのせた時、背景色を緑色(#0f0)に、文字を赤色(#f00)に変更します。

賢威7 グローバルメニュー マウスオーバー 色変更

カラーコードを変更することで、グローバルメニューにマウスの矢印をのせると、以下のように背景色と文字色が変わります。

賢威7 グローバルメニュー マウスオーバー 色

以上が、賢威7での変更方法です。

続いて、賢威6.2での変更方法について解説します。

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

賢威グローバルメニューフォントサイズ背景色変更画像2

ワードプレスのダッシュボード→外観→エディター→design.cssと進み、上の画像の部分を探してください。

この赤線のところにある「background-color: #fff;」の「#fff;」の値を変えてやればOKです。今回は例として黄色(#ff0)にしてみたいと思います。「ファイルを更新」ボタンをクリックして保存し、トップページを確認します。

賢威グローバルメニューフォントサイズ背景色変更画像3

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

メニューの中身の色を変えたい時は同じdesign.css内から次の部分を探して下さい。

賢威グローバルメニューフォントサイズ背景色変更画像4

ここの数値も同様に#ff0にしてみます。「ファイルを更新」ボタンをクリックして保存し、トップページに行ってみます。

賢威グローバルメニューフォントサイズ背景色変更画像5

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

賢威6.2でグローバルメニューのフォントサイズを変更する方法

続いて、フォントサイズの変更です。

こちらもdesign.cssから次の箇所を探して下さい。

賢威グローバルメニューフォントサイズ背景色変更画像6

先ほどメニューの色を変更した辺りにあります。

ここの「font-size: 1.2em;」の数値を変更すれば、メニューのフォントサイズを変えることができます。

今回は例として、「2.2em;」にして見ます。

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

賢威グローバルメニューフォントサイズ背景色変更画像7

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

賢威6.2でグローバルメニューの文字の色を変更する方法

最後に、グローバルメニューの文字の色を変更します。

こちらもdesign.cssから次の箇所を探して下さい。

賢威グローバルメニュー文字色変更画像1

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

賢威グローバルメニュー文字色変更画像2

このようになっていればOKです。ここのコードはグローバルメニューの文字の色と、リスト階層の文字の色を同時に指定しているので、両方の文字の色が変わります。

これらの設定はあくまで例なので、ここはお好みで調節して下さい。

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

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

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

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

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

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



総合案内

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

このページの先頭へ