WordPressテーマ「Xeory Base」でグローバルメニューの色を変更するカスタマイズを紹介します。
グローバルメニューとは、タイトルの下にあるメニューのことです。
上の図で、「ホーム」・・・「運営者紹介」となっている部分がグローバルメニューです。
（私の持っている別サイトの画像を使っているため、一部内容を塗りつぶしています。）
最終的にはグローバルメニューは指定の色で塗りつぶされて、上の図のような状態になるのが完成です。
※ファイルを直接いじる場合には、事前にバックアップをとっておくことをお勧めします。ファイルの改変は全て自己責任でお願いいたします。（詳しくはトップページのメニューにある利用上の注意をご覧ください。）
それではカスタマイズ方法を紹介します。
目次
１、色を決め、コードを調べる
グローバルメニューの色を変更する場合、変更する色を決めます。
そしてファイルにその色をしているすためのコードを調べる必要があります。
インターネットで「色」「コード」などと検索するとさまざまなサイトが出てきますので、自分の使いたい色、コードをメモしておいてください。
例えば「原色大辞典」などは便利です。
今回私は、Xeory Baseで基本として使われている色と同じ色でグローバルメニューを塗ることに決めました。
「初期設定」の「カラー設定」で「オレンジ」を選んだため、オレンジ色です。
Xeory Baseでは「オレンジ」を選んだ場合に使われている色は、「#F37D3D」です。
２、スタイルシートを変更する
使用する色とその色のコードが決まったら、スタイルシートを変更します。
「外観」→「テーマの編集」→「スタイルシート（Style.css)」を選んでください。
次にコード変更を行う場所を探します。
「初期設定」で選択できる色はデフォルト以外に、緑、赤、オレンジ、ピンクがあります。
スタイルシートでは各色に対して、以下のように定められています。
緑の場合：カラースキーム01 body.color01
赤の場合：カラースキーム02 body.color02
オレンジの場合：カラースキーム03 body.color03
ピンクの場合：カラースキーム04 body.color04
つまり、自分が「初期設定」で選んだ色のコードを変える必要があります。
私は今回「オレンジ」を初期設定で選んでいるため、カラースキーム03 body.color03の部分のコードを変更します。
なお、デフォルトを設定した場合には、
「all」と書いてある部分を変更してください。
グローバルメニューの間の色、背景の色を変更する
スタイルシートの半分より下に、カラースキーム03の詳細を設定している箇所があります。
図の該当部分に変更を加えました。
すると上の図のように、メニューの間の色、背景の色が変更になります。
これだとメニューの色自体は白のままです。
グローバルメニューのメニュー自体の色を変更する
図の該当部分に変更を加えました。
するとメニュー自体の背景の色も変更されました。
これでグローバルメニューの色の変更は完成です。
グローバルメニュー カーソルを当てた時の文字の色を変更する
最後にグローバルメニューにカーソルを当てた時の、文字の色の変更方法について紹介します。
上記の状態ですと、訪問者さんがカーソルを当てても、カーソルを当てた場所がどこなのか見分けがつきにくいです。
カーソルを当てた時に文字の色が変わるように変更することもできます。
まずは、文字色と文字色に該当するコードを調べます。
今回はカーソルを当てた時に文字が白くなるように設定をしてみます。
図の該当部分に変更を加えました。
黒（#2B2D2D）から白（#fff）への変更です。
これでカーソルを当てた時に文字が白く映り、訪問者さんにわかりやすいメニューになったと思います。
以上でXeory Baseでグローバルメニューの色を変更するカスタマイズは終わりです。