メニューバーの文字色・背景色を変える【コピペで簡単!】ワードプレス初心者


この記事は、私がワードプレス【Lightning】でサイトを作成するにあたり、わからなかったこと・調べたこと・変更したことなどを、備忘録として残しています。

私と同じようなワードプレス初心者のみなさまに、少しでも参考になりましたら幸いです。

メニューバーの文字色と背景色を変えたい!

ワードプレス【ライトニング】初期設定のメニューバーは、文字色は黒・背景色は白で、あまりパッとしません。
サイトにあった文字色と背景色にすると、統一感が出てより見やすく、訪問してくれた方が目的の項目を探しやすくなるため、オススメです。

初心者でも簡単!

初心者

ムズカシそうだけれど、初心者でもできるのかな・・・?

ファシアル

大丈夫!簡単です。
【追加CSS】に下記コードをコピペするだけで変更できます。

公開までの流れ

  1. ダッシュボードを開く
  2. 「外観」から「追加CSS」をクリック
  3. 下記コードをコピペ → 公開をクリック

たったこれだけ(*^_^*) 早速やってみましょう。

追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってください。

早速やってみましょう! 操作手順は①~⑤

①ダッシュボードを開く

②外観 → 追加CSSを選ぶ

③編集画面が出る

④下記コードをコピペする

背景色と文字色の変更

/** メニューバーの背景色・文字色変更 */
ul.gMenu a{
background:#d3ccd6;
color:#ffffff;
}

カーソルが乗ったときの文字色の変更

/** メニューバーのカーソルオンの文字色変更 */
ul.gMenu a:hover{
color: #e567b0;
}


緑色部分のコードを変えると、背景色を変更できます。
赤色部分のコードを変えると、文字色を変更できます。
青色部分のコードを変えると、カーソルが乗ったときの文字色を変更できます。


  • 背景色をつけたくない場合は、「 background:#d3ccd6;」を消します。
  • 文字色を変えたくない場合は、 「 color:#ffffff;」を消します。
  • カーソルが乗った時の文字色を変えたくない場合は、橙枠のコードすべてをコピペしないでおきます。


ご参考までに、このサイトのメニューバーの背景色は【 #d3ccd6 】、文字色は【♯ffffff】、カーソルが乗ったときの文字色は【#e567b0】です。

⑤貼り付けて、公開する

色のコードはこちら

色は、原色大辞典さんから探すのがおススメです。
たくさんの色見本がありますので、ご希望の背景色・文字色が探せるはずです。

背景色・文字色が変わらない場合

公開して確認してみると、色が変わっていない場合があります。その際は

  • ブラウザの更新ボタンを押してみる
  • 編集画面で、色コードだけを何回か変更していると変わらない場合があるので、再度、全コードをコピペし直してみる。


私の場合は、上記で解決できましたので、同様にお困りの場合は一度やってみてください。

まとめ

コピペ→貼り付け→実行するだけなので、初心者でも簡単にできますよ(*^_^*)
よかったらチャレンジしてみてくださいね。


ファシアル

追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってくださいね。

ファシアルウォーキングについてはこちら

ファシアルとは

FasciarWalking.
ってどんなもの?

こんな方におススメ

そのお悩み
諦めていませんか?

よくあるご質問

お問い合わせの前に
お読みください