メニューバーのデザインを変更しよう

Simplicity2のメニューバーの色を変更したかったのですが、外観カスタマイズのメニューバーの色を変えてもだめだったので、直接cssを変更することで色を変換することにしました。その方法をまとめます。

目次

ゴール

Simplicity2のメニューバーのデフォルトの色はバックの色と同じで見づらかったので、下の画像の様に色を変更しました。
この記事ではメニューバーの色を変更すことを目指します。

必要なもの

メニューバーのデザイン変更方法

HTMLのデザインはCSS(Cascading Style Sheets;カスケーディング・スタイル・シート)によって定めれれています。
ですので、ブログのデザインを変更する場合はCSSファイルの内容を変更していくことになります。
テーマごとにCSSファイルは定められていると思いますが、今回の記事ではSimplicity2を例としてまとめたいと思います。

CSSファイルの編集するにはWordPressの左側のメニューにある外観->テーマの編集を選択し、スタイルシート style.cssを選択します。
また、このとき編集するテーマが”Simplicity child”であることにも注意してください。

本ブログでは
/* Simplicity子テーマ用のスタイルを書く */
の下にデザインを設定するコードを追加していくことにします。

style.cssの追加コード

下記のコードをstyle.cssに追加します。

デザイン確認

デザインを確認するために、自分のホームページにアクセスしてみてください。
私のブログのように紺色白字のメニューバーができあがっているはずです。
※もし反映されていなかったら・・・cssはブラウザのキャッシュの影響ですぐには反映されません。
すぐに確認するためにブラウザの履歴を削除して再度ホームページを読み直してみてください。

まとめ

この記事ではメニューバーのデザインを変更しました。
ブログのタイトルやメニューバーは最初に目に入ってくるところなので、自分の好みのデザインにこだわりたいですよね！？
なぜか外観/カスタマイズの色変更メニューでメニューバーの色を変更しても、うまく反映されなかったので直接cssを変更することで対応できました。
上のソースを変更するだけで簡単にデザインが変えられるので是非お試しください。

以上！