MENU

【賢威8】グローバルメニュー設定&背景色設定

グローバルメニューの設定や色の変更はどうするのかな??

今回は、こちらを見ていきますよ。

目次

グローバルメニューの設定方法

どの設定もワードプレスのダッシュボードを開きますよ!

外観

メニュー

をクリックします。

右側の【メニュー構造】にあるメニュー名を変更します。

今回は【ホーム】と【サイトマップ】をグローバルメニューへ表示してみます。

上からの表示順が実際の画面では左からの表示順になります。

グローバルメニューへ表示を追加したいときは、左側にある【メニュー項目を追加】のところで追加したい項目にチェックを入れ【メニューに追加】をクリックすると右側に追加されます。

表示したいメニューをすべて設定したら【メニュー設定】で【グローバルナビゲーション】にチェックを入れて最後に保存をします。

サイトを表示すると、ヘッダーの下にグローバルメニューが表示されました!

グローバルメニューの背景色の変更方法

グローバルメニューの設定ができたところで、次に背景色の変更をしてみます。

ワードプレスのダッシュボードの中から、

外観

カスタマイズ

追加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/

今回は以上です。
お疲れさまでした^^

よかったらシェアしてね!
  • URLをコピーしました!
目次