STINGER８：グローバルメニューの色を変更するカスタマイズ

WordPress無料テーマ「STINGER８」でグローバルメニューの色を変更するカスタマイズを紹介します。

STINGER８でのグローバルメニューは初期状態ですと下記の画像のようになっています。

今回のカスタマイズでは、

・グローバルメニューのボックスの色

・ボックス内の文字の色

・カーソルをあてた場合のボックスの色

・カーソルをあてた場合の文字の色

を変更するカスタマイズを行います。

それではカスタマイズ方法を紹介します

※ファイルを直接いじる場合には、事前にバックアップをとっておくことをお勧めします。ファイルの改変は全て自己責任でお願いいたします。（詳しくはトップページのメニューにある利用上の注意をご覧ください。）

グローバルメニューの色変更のカスタマイズ

メニューの「外観」→「テーマの編集」を選択します。

「STINGER８ Child」のスタイルシート（Style.css）を選択します。

スタイルシートの一番下に、

/*– メニュー色変更 –*/
#st-menubox {
background: #ff0000;/* 背景色 */
}

header .smanone ul.menu li a{
color: #fff;/* 文字色 */
}

#st-menubox a:hover{
background: #fff;/* 背景色 */
}

header .smanone ul.menu li a:hover{
color: #ff0000;/* 文字色 */
}

を追加し、最後に「ファイル更新」ボタンを押すと反映されます。

今回は

グローバルメニューのボックス背景色は赤(#ff0000)、文字色は白(#fff)、

カーソルをあてた時のグローバルメニューのボックス色は白(#fff)、文字色は赤(#ff0000)

に設定をしました。

色は「原色大辞典」などを参考に、好きなカラーを指定してください。

→原色大辞典

また、サイトの配色についてはこちらの記事も宜しければご覧ください。

サイトの配色に困った時に使える　「配色の見本帳」がおすすめ

WordPressでサイトを作成していると、毎回迷ってしまうのが色の配色です。 例えば、 サイトの基本カラーは何色にしようか、 グローバルメニューの色は何色にしようか、 見出し（h2,h3,h4）...

wpwith.net

このようにグローバルメニューの色が変更されました。

以上で「STINGER８」でグローバルメニューの色を変更するカスタマイズの紹介は終了です。