Tetsuya不覚にも文字の色変え設定を探すのに30分近くかかりました（笑）
デザイン歴23年、ガチデザイナーの「Tetsuya」です。
このサイトを立ち上げて間もなく2ヶ月。
記事数も40記事に達しようかという状況で、
ぼちぼちフロントページのデザインをサイト型に変えてもいいかなと思い変更しました。
その際、メインイメージから配色から全て変更したこともあり、
思わぬところでつまづきました。
それが「グローバルメニューの文字色変更」です。
というのも、もともとグローバルメニューの文字色を白にしてたのですが、
どこを探してもグローバルメニューの文字色設定が見つからず、
30分近く探しても、設定箇所も設定方法を書いた記事も見つからない。
そして、散々悩んで分かったのは、
そもそもSWELLはグローバルメニューの文字色が変更できないということ。
（実はサイトの立ち上げ当初にCSSで色変えしてたのを忘れてました。笑）
ということで、今回はWPテーマSWELLのグローバルメニューの文字色を
変更する方法について解説します。
【SWELL】グローバルメニューの設定箇所
さて、まずはグローバルメニューの設定箇所ですが、
メニューレイアウトはダッシュボードメニューから
外観 → カスタマイズ → ヘッダーをクリックすると設定があります。
例えば、こちらの設定でナビを下にすると、
このように、
サイトロゴに対してセンター揃えでグローバルナビの設定ができますし、
左寄せの設定にすると、
サイトロゴとグローバルナビを横並びにできます。(右寄せもあります）
また、グローバルメニューの文字色に関しては、デフォルトの設定項目がなく、
黒字か、もしくは、以下の設定で
グローバルメニューの背景に色を敷くかしかありません。
いずれにしても、グローバルメニューの文字色を変更するための項目がないため、
オリジナルカラーにするには「CSS」が必要になります。
なので、もしもご自身のデザインに合わせてグローバルメニューの文字色だけ変えたい場合は、
「CSS」で変更しましょう。
【SWELL】グローバルメニューの色を変更するためのCSS
CSSと言ってもややこしいことはありません。
ただCSSコードをコピペして、コードを少し書き換えれば変更できます。
ちなみにCSSの記述場所は、ダッシュボードメニューから
外観 → カスタマイズ → 追加CSS
以下の部分に「CSSコード」をコピペしてください。
グローバルメニューの色を変更するためのCSSコードは以下の通りです。
.c-gnav>.menu-item>a .ttl {
color: #e59cac;
}上記コードを「追加CSS」にそのままコピペすると、グローバルメニューの色は
このようなピンクになります。
なので、グローバルメニューの色を変えたい場合は、color: #e59cac;の「#e59cac」。
#から始まる6桁のカラーコードを自分が設定したいカラーコードに変更しましょう。
ちなみにカラーコードを調べる場合は、どこの設定でも構いませんが、
カラーパレットで好きな色を選ぶと、以下の部分にカラーコードが表示されます。
上記箇所に表示されるカラーコードをCSSコードにコピペすれば、
グローバルメニューの文字色をお好みの色に変更できます。
【SWELL】グローバルメニューの横幅を調整する方法
こちらは完全に余談ですが、僕はグローバルメニューの各項目がデフォルトでは
少し近すぎて見にくい印象がありました。
なので、少しだけですが、CSSでメニューの幅をこのように調整してます。
調整方法はすごく簡単で、以下のCSSコードをコピペするだけ。
.-parallel .l-header__gnav .c-gnav>li>a {
padding: 14px 40px;
}なお、メニューの幅を調整したい場合は、14px 40px;の「40px」こちらの数字だけを変えてください。
ちなみに14pxの方を触ると、帯の高さ（濃いグレーの部分）が変わります。
なので、帯の高さを変えたい場合は、14pxの数字を触っていただいても大丈夫です。
全体のバランスを見ながら、調整してみてくださいね。
まとめ：デザインはユーザビリティを上げるために調整する
今回はWPテーマSWELLのグローバルメニューの色を変更する方法について解説しました。
結局僕は色変えをいくつか試した挙句、最終的にはデフォルトの帯を文字の下に敷いたデザインが
最もしっくりきたため、各メニューの横幅だけ調整して落ち着きました。
いずれにしても、デザインはサイト訪問者のユーザービリティを高めるためにするものであって、
デザインを凝りすぎて、どこをクリックすれば良いか分からないデザインにしてしまうのは、
それこそ本末転倒です。
ですから、デザインはあくまでもサイト訪問者がどう辿れば目的の情報まで辿り着けるのか？
考えながら設計することが大切です。
なので、僕はグローバルメニューの文字色こそ触っては見たものの、
結局はデフォルトの設定が一番見やすいと考え、文字の色変えはやめにしました。
実際に、客観性が良いデザインを作り、サイト訪問者を安心させ、
しっかりと記事の内容を見てもらうことで、信用へとつながっていきます。
ですから、デザインの盛りすぎには気をつけて、常に客観的に
サイト訪問者のことを考えながらデザインするようにしてくださいね。
ということで、参考になれば嬉しいです。
