しぐれがき

これまで挑戦したことの備忘録!!

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

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

目次

ゴール

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


必要なもの

必要なもの 価格(円)
1 PC ピンキリ
備考 インターネット接続可能なこと
2 WordPressのアカウント 無料
備考 持っていない場合は、こちらを参照→WordPressのインストール方法

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

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

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

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

style.cssの追加コード

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

/*メニューバーの色設定*/
#navi ul{
position: relative;
clear: both;
margin-bottom: 0;
border: 1px solid #ddd;
background-color:#00008b;
border-radius:3px;
margin:0;
padding:0;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*メニューバーの文字設定*/
#navi ul li a{
font-size:14px;
display: block;
padding: .3em .7em;
color:#fff;
text-decoration:none;
z-index:99;
}
/*カーソルが乗っているときの色設定*/
#navi ul li a:hover{
background-color:#87ceeb;
}

デザイン確認

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


まとめ

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

以上!