グローバルメニューの設定や色の変更はどうするのかな？？
今回は、こちらを見ていきますよ。
グローバルメニューの設定方法
どの設定もワードプレスのダッシュボードを開きますよ！
外観
↓
メニュー
をクリックします。
右側の【メニュー構造】にあるメニュー名を変更します。
今回は【ホーム】と【サイトマップ】をグローバルメニューへ表示してみます。
上からの表示順が実際の画面では左からの表示順になります。
グローバルメニューへ表示を追加したいときは、左側にある【メニュー項目を追加】のところで追加したい項目にチェックを入れ【メニューに追加】をクリックすると右側に追加されます。
表示したいメニューをすべて設定したら【メニュー設定】で【グローバルナビゲーション】にチェックを入れて最後に保存をします。
サイトを表示すると、ヘッダーの下にグローバルメニューが表示されました！
グローバルメニューの背景色の変更方法
グローバルメニューの設定ができたところで、次に背景色の変更をしてみます。
ワードプレスのダッシュボードの中から、
外観
↓
カスタマイズ
↓
追加CSS
の順にクリックします。
以下の記述をコピー＆ペーストします。
/*グローバルメニューの背景色*/
.keni-gnav_wrap {
background-color: #87ceed;
}
最後に【公開】ボタンを忘れずに！
はい、グローバルメニューの背景色が変更されました！
メニュー部分は色が変わっていませんね。
この部分はこの後出てくるグローバルメニューのボタンの色になります。
グローバルメニューのボタンの背景色の変更方法
記述するところは、先ほどと同じところになりますよ。
以下をコピー＆ペーストしてみてください。
/*グローバルメニューのボタンの背景色*/
.keni-gnav_inner li a {
background:#87ceed;
}
最後に【公開】ボタンをクリックしますよ。
はい、グローバルメニューのボタンの背景色が変更されました。
グローバルメニューホバーエフェクトの色変更方法
引き続きまして、グローバルメニューのホバーエフェクト部分の色の変更をします。
ここはカーソルを合わせてなくても表示されている色を変更します。
デフォルトではホワイトになっています。
以下の記述をコピー＆ペーストしますよ。
/*グローバルメニューホバーエフェクトの色*/
.keni-gnav_inner li a {
border-bottom-color: #87ceed;
}
はいー、この部分の色が変わります。
ここまでの3か所の背景色の色を同じにして、次にお伝えするホバーエフェクトの色を違うものにするのがおすすめです＾＾
ホバーエフェクトの色の変更
最後に、ホバーエフェクトの色の変更をします。
これは、カーソルを近づけると出てくる色のことです。
以下の記述をコピー＆ペーストしますよ。
/*ホバーエフェクトの色変更*/
.keni-gnav_inner li a:hover {
border-bottom-color: #87ceed;
}
色が変更されました。
しつこいけど、カーソルを合わせると表示される色ですよ(^^♪
さいごに
今回は、グローバルメニューの設定や背景色の変更などなどお伝えしました。
色の見本がわからないなーという場合は以下のサイトを参考にしてみてください＾＾
原色大辞典
https://www.colordic.org/
今回は以上です。
お疲れさまでした^^
