WordPressテーマ【Simplicity2】メニューバー文字色とホバー色の変更

2018/6/21 2018/6/29 css, Simplicity2, WordPress

今回は、メニューバーの文字色とホバー色の変更をします。
勿論、Simplicity2には管理画面から文字色の設定ができるのですが、
ホバー時のメニューバーの背景色の設定項目がなかったのでカスタマイズしてみました。

文字色の変更

グローバルメニューの文字色を白にしホバー時の文字色はピンクに背景を濃いめのグレーに変更をしました。

 /*文字色の変更*/
#navi ul li a{
	color: #fff; /* 文字色を白 */
	font-weight:bold; /* 文字の太さを変更 */
}
/*ホバー時の文字色と背景色の変更*/
#navi ul li a:hover {
	color:#df7973;　/*文字色をピンク*/
	background:#f2f2f2; /*背景色を濃いグレー*/
}

次にヘッダーとフッターに横ラインを入れてみました。

ヘッダー上下にラインを追加

ヘッダーの上は、少し太めに5px 下は少し細めに1pxで濃いめの色で入れてみました。

Simplicity2 child: スタイルシート (style.css)　に以下を追加しました。

#header  {
	border-top:5px solid #ae271e;
	border-bottom:1px solid #ae271e;
}

フッター上下にラインを追加

フッターはヘッダーとは逆に下のラインを太めの5pxに上を1pxにしてみました。

Simplicity2 child: スタイルシート (style.css)　に以下を追加しました。

/* footer にボーダー追加  */
#footer {
    clear: both;
    background-color: #555;
    color: #fff;
    padding: 5px;
    border-top: 2px solid #ae271e;
    border-bottom: 5px solid #ae271e;
}