賢威のメニューの文字の色と背景色を変える

賢威のメニューの文字の色と背景色を変える

方法を解説します。

グローバルメニューってこれです


パソコン表示の場合

WordPressの管理画面から

「外観」⇒「エディター」をクリック

design.cssを開きます。


/*メニューのデザイン*/
という下に次のような所があります。

メニューの文字の色と背景色を変える
※画像は大きくなります。

/*メニューのデザイン*/
#global-nav #menu li a{
	display: block;
	padding: 0.8em 2em;
	color: #333; /* メニューのフォントの色*/
	text-decoration: none;
}

#global-nav #menu li a:link,
#global-nav #menu li a:visited{ background-color: #fff; } /*すでに訪れたリンクの背景色*/
#global-nav #menu li a:hover,
#global-nav #menu li a:active{ background-color: #efefef; } /*マウスカーソルを乗せた時の背景色*/

ここで言うと、


#333 がメニューの文字色

#fff がメニューの背景色

#efefef がマウスオーバー時の背景色を指定する箇所です。


マウスオーバーとは、文字リンクにマウスポインターを乗せる事です。


ご希望の色コードに置き換えて変更保存して下さい。


スマホ表示の場合

「外観」⇒「エディター」をクリック

mobile.cssを開きます。


真ん中より少し上に

「グローバルナビ」という箇所があります。

メニューの文字色と背景色を変える(モバイルの場合)
※画像は大きくなります。

/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/

#global-nav{ border-bottom: 0; }

#global-nav dt{
	padding-left: 2.5em!important;
	background: url(./images/icon/icon-arrow05.png) 1em center no-repeat #333;
	color: #fff;
}
ここにある


#333 がモバイル表示におけるメニューの文字の色

#fff がモバイル表示におけるメニューの背景色


となりますので、ご希望の色コードに修正し、

変更保存すれば色の変更は完成です。


以上で、

賢威のメニューの文字の色と背景色を変える方法

パソコン表示とスマホ表示の解説を終えます。








サブコンテンツ

当サイトの記事一覧

アーカイブ

このページの先頭へ