【賢威8】グローバルメニューの色を自分好みに変える方法

はじめに

賢威8ではCSSやHTMLなどを知らなくても、手軽にデザインのカスタマイズが出来るようになっており、基本的な配色は「カスタマイズ」の「色」の項目から指定する事ができます。

そんな便利な機能が搭載された賢威8ですが、自分で設定できるのは7つのキーカラーだけなので、各項目ごとに色を指定できるわけではありません。

つまり・・・「タイトル部分はピンクにして、こっちのボタンは黄色にして~・・・グローバルメニューはオレンジにしよう!」みたいな細かい設定まではできないのです。

こっちはピンクで良いけど、ココはオレンジが良いんだけどな~。なんて事は、カスタマイズに凝っている人であれば誰しもあり得ますよね!私の場合は、グローバルメニューのホバーエフェクトの色をキーカラーとは別のものにしたかったんです!!

なので今回は・・・

グローバルメニューのホバーエフェクトの色を好きな色に変える方法と合わせて、折角なのでグローバルメニューの背景色の変更方法なども解説していきます。

グローバルメニューを独自にカスタマイズする方法

 背景色を変える方法
 ホバーエフェクトの色を変える方法
※クリックすれば、その場所に飛びます

背景色を変える方法

  1. 「カスタマイズ」→「追加CSS」を選択します

  2. 追加CSSに下記のコードを追記します
    ※コード内の「#333」を好きなカラーコードに変えてください


  3. コードは下記からコピーして貼り付けてください

  4. グローバルメニューが好みの色に変わっている事を確認して「公開」をクリックします

これで、グローバルメニューの背景色の変更が完了です。

グローバルメニューのホバーエフェクトの色を変える方法

  1. 「カスタマイズ」→「追加CSS」を選択します

  2. 追加CSSに下記のコードを追記します
    ※コード内の「#fe9a2e」を好きなカラーコードに変えてください


  3. コードは下記からコピーして貼り付けてください

  4. グローバルメニューにマウスポインタを乗せて、ホバーした時のバーの色が変わっている事を確認して「公開」をクリックします

これで、グローバルメニューのホバーエフェクトの色の変更が完了です。

さいごに

今回は背景色とホバー時の色変更について解説しました。
その他にも文字色の変更方法などの希望があればこちらに追記するか、別記事で解説したいと思います。

では、ブログカスタマイズを楽しんでくださいね♪