Lightning（ライトニング） グローバルメニューの特定の背景色変更方法【実例付き】

WordPressのLightningというテーマでお問い合わせやコンタクトなどのメニューの一部分を目立たせたい時にお勧めな方法です。
お問い合わせや特定のメニュー（資料請求など）を目立たせることにより、クリックやお問い合わせなどへの誘導を向上させることができます。
この記事では、特定のメニューの背景色と文字色を変更し、目立たせる簡単なCSSでのカスタマイズ方法を紹介します。
※CSSでカスタマイズする前にバックアップを取ることを推奨します。間違えてすでにあるコードを消してしまったり、うまくいかないときにバックアップをしていれば元に戻せます。

なぜ、お問い合わせなどの特定のメニューを目立たせるのか

お問い合わせなどのメニューを目立たせていない場合

これですと他のメニューと統一感がありキレイなのですが、ぱっと見 わかりにくいです。

お問い合わせなどのメニューを目立たせている場合

ぱっと見、お問い合わせ（CONTACT）に視線がいきやすくなったと思います。
お問い合わせや資料請求など、訴求したいメニューがあれば背景色と文字の色を変更するだけで印象強くすることができます。

それでは以下、やり方を紹介します。

目立たせたい特定のメニューのid名を調べる

まず目立たせたいメニューのid名を調べます。
Googlechromeの方法ですが、目立たせたいメニューの位置でマウスの右クリックをし検証というところをクリックします。
そうすると右側にCSSのカスタマイズで必要なid名が出てきます。

私のサイトではid名がmenu-item-1137というのが分かりました。
id名は、それぞれ異なるので検証で調べる必要があります。

先ほど調べたid名を使い、Lightningの外観からカスタマイズの追加CSSのところに下記コードを記入します。

/*特定のメニューの背景色と文字色を変更する*/
#id名 a{
  background-color:#554f42;
  color:#fff;
}

id名というところに、自身で調べたid名をそのままコピペで変更してください。
また、id名の後に半角スペースが１つあることに気を付けてください。
id名の後に半角スペース、その次にaという文字が入ります。
id名の前にある#は消さないでください。
background-color:#554f42;というのは背景色をこの色#554f42に変更しますというコードです。
color:#fff;は文字の色を白色#fffに変更しますというコードです。

私のサイトの場合は、このような感じになります。

/*特定のメニューの背景色と文字色を変更する*/
#menu-item-1137 a{
  background-color:#554f42;
  color:#fff;
}

CSSを追加して保存または公開をして、指定したメニューの背景色が下記のように変更していたら成功です。

これで、あなたのWordPressサイトで特定のメニューを目立たせるカスタマイズが完了しました。サイトのアクセスやお問い合わせ率向上に役立ててください。

※補足※
背景色の色を他の色にしたい場合はカラーコードの部分をお好きなカラーコードに変更をしてください。
CSSは全角スペースがあったり、コードのミスがあるとうまくできません。サイトが崩れてしまう場合があるので、CSSをいじるときは必ずバックアップをしてください。
よくあるミスがid名のミス、id名の前に#がない、半角ではなく全角でCSSを書いているなどです。
また今回書いたCSSより優先度の高いCSSがある場合は、そちらが優先されてしまい、変更がうまくいかないときがあります。
他にもメニューのHTMLの書き方などによっては、今回のCSSではうまくいかない場合があります。

その際には、弊社にお気軽にご相談、ご依頼ください。

執筆者
ASX株式会社公式ツイッター二代目を担当しております。
3人の子持ち（そのうち2人は発達障害）のワーママ。
ツイッターのアカウントは、こちら。
ぜひフォローいただけると嬉しいです。