賢威7のグローバルメニュー(サイトタイトルの下に表示されるメニューバーのこと)は、かなり大きめでシンプルなデザインです。自分のサイトのイメージに合わせて、色や幅・文字サイズなどをカスタマイズしていきましょう。グローバルメニュー自体の設定が分からない方はこちらの記事を参照してくださいね。まとめ賢威7-グローバルメニューの文字・色カスタマイズグローバルメニューのカスタマイズに使うのはbase.cssファイルです。カスタマイズは子テーマで行うようにしてくださいね。ボタンの色と文字色を変更するまずはグローバルメニューのボタンの色を変更してみましょう。base.cssの中の下記の記述が、グローバルメニューのボタンに関する部分となります。a子テーマのbase.cssに下記のソースを記述すれば完了です。#46bbce;}colorが文字の色、background-colorがボタンの色です。色の名前はこちらから検索できますよ。グローバルメニューの背景の色を変更するグローバルメニューの左右の余白部分、気になりますよね。これは「グローバルメニューの背景」で、子テーマに下記のように記述します。#5bc2d9;}こちらは先程のメニューボタンの色と同じに設定しておくと良いです。下記のハイライトの2行を追記すればOKです。font-weight:bold;}こちらもお好みで数値を変更してください。マウスオーバーした時のボタンの色と文字色を変更する続いて、グローバルメニューにマウスオーバーした時の、ボタンの色と文字色を変更しましょう。子テーマのbase.cssに下記のソースを記述します。#4e9793;}colorが文字の色、background-colorがボタンの色です。縦線・グリッドでメニューボタンを区切る賢威7のデフォルトではグローバルメニューの下にだけ線があり、メニューボタンどうしの間には区切りの線がありません。見やすくするために、メニューボタンを区切る縦線を追加します。下が一番初めのボタンの左側に線をつける、という内容です。線の色と太さはそれぞれお好みで調整してください。グローバルメニューの下の線の太さを調整する(細くする)そうなると気になってくるのは、グローバルメニューの下の線です。デフォルトだとかなり太い線が引かれています。こちらに関する記述は.global-navの中にあります。1px;}border-bottomの部分で、線を細くしたり、色を変えたりできます。まとめカスタマイズをしていないと、一発で「賢威を使ってるな」とわかってしまうのがこのグローバルメニューのデザイン。自分のサイトのイメージに合わせてかっこよくカスタマイズしていきましょう!今後も追加していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。働いていたバリバリの元キャリアウーマン。残業が月150時間を超える働き方に疑問を持ち、会社に雇われない働き方にシフトする。《週3日だけ働く》をテーマに、PC1で自由な働き方を実現するための情報を発信しています。#週3日本最西端の島、与那国島。