【簡単!SANGOカスタマイズ】ヘッダーメニューにアイコンを追加+色も変更する方法【画像つき】

こんにちは、Daniel (@daniel__blog) です。

この記事では、

  • SANGOのヘッダーメニューにアイコンを表示させる方法
  • SANGOのヘッダーメニューアイコンに色をつける方法

をご紹介します。簡単に設定できます。

メリットとしては、下記の3点が期待できます。

  • ヘッダーメニューの視認性がアップする
  • ヘッダーメニューのカスタマイズの選択肢が増える
  • ヘッダーメニューがより印象的になる

ちなみにデフォルト(アイコンなし)では、以下のようなメニューとなっています。


個人的にはもう少し色合いがあるのも魅力的かなと思いました。

そこで、実際に設定してみました。

なるべく分かりやすくご説明していきますね。

Daniel
Daniel

自己紹介:
この記事を書いている僕は、SANGO歴1年ほど。
いつも楽しくカスタマイズしながら、充実したブログ生活を送っています。

SANGOのヘッダーメニューにアイコンを追加し、色も変更する方法

完成イメージ

最初に完成イメージをお見せします。

設定すると、こんな感じにできます。

アイコンを設定したヘッダーメニュー

僕のブログでも適用している設定です。

設定方法の流れ

以下の流れで導入できます。

  • 手順①:『Font Awesome』でアイコンを選ぶ
  • 手順②:アイコンのタグをコピーする
  • 手順③:メニュー設定にペーストする
  • 手順④:色変更用のCSSクラス名を追加する
  • 手順⑤:『追加CSS』に追記する
  • 手順⑥:「公開」を押して完了!

では、順番に見ていきましょう。

手順①:『Font Awesome』で使うアイコンを選ぶ

まず、Font Awesomeを開きます。以下のリンクです。

https://fontawesome.com/

こちらでアイコンを探しましょう。

以下のように、検索バーに英単語を入れて検索します。

検索する単語
僕の場合は、「server」や「tool」、「home」など入れて出てきたアイコンを使っています。

検索結果のアイコンで、気に入ったものをクリックします。

手順②:アイコンのタグをコピーする

Start Using This Icon」をクリックします。

以下の画面が表示されます。

右下のマークをクリックして、クリップボードに「<i>」タグの内容をコピーします。

続いて、選んだアイコンをメニューに表示させていきましょう。

手順③:メニュー設定にペーストする

管理画面の『外観』→『カスタマイズ』をクリックします。

『メニュー』をクリックします。

対象メニューを選択します。未作成の場合は、「メニューを新規作成」をクリックして作成してください。

対象メニューの「ナビゲーションラベル」に、先ほどコピーした内容をペーストします。

手順④:色変更用のCSSクラス名を追加する

追加した内容に、以下のとおりCSSクラス名を追加します。

CSSクラス名は他のものと重複しなければ何でも良いですが、ここでは「 header-menu」としています。

手順⑤:『追加CSS』に追記する

次に、『追加CSS』を開きます。

以下の内容をコピペしてください。

/* ヘッダー内のメニュー文字色変更 */
    .header-menu {
        color: #93cbc1;
    }
    
    .desktop-nav li i {
      opacity: 1.0;
    }

お好みでカスタマイズ

ここでは、以下のとおりカスタマイズできます。

.header-menu

 →「color: 」の指定を変更することで、お好みの色に変更できます。

.desktop-nav li i

 →「opacity: 」では透明度の設定を変更できます。0 に近いほど、透明化します。

僕は以下のように追加できました。

手順⑥:「公開」を押して完了!

設定は以上で完了です!お疲れさまでした。

設定時の注意

【注意】スマホでもヘッダーメニュー表示させたい場合は、有効化させる必要あり

スマホでもヘッダーメニューを表示させたい場合、追加で設定が必要です。

以下のように、デフォルトでは表示されていないはず。

設定の流れは以下のとおりです。

  • 手順①:『メニュー』設定を開く
  • 手順②:「スライドメニュー(モバイルのみ)」にチェックをつける
  • 手順③:「公開」をクリックする

では、こちらも順番に見ていきましょう。

手順①:『メニュー』設定を開く

再度、管理画面から『外観』→『カスタマイズ』をクリックします。

『メニュー』をクリックします。

手順②:「スライドメニュー(モバイルのみ)」にチェックをつける

対象メニューを選択します。

以下の項目にチェックを入れます。

「スライドメニュー(モバイルのみ)」

手順③:「公開」をクリックする

『公開』をクリックして、完了です!

これで、スマホで見てもヘッダーメニューが表示されるようになったはずです。お疲れさまでした。

まとめ

この記事では、

  • SANGOのヘッダーメニューにアイコンを表示させる方法
  • SANGOのヘッダーメニューアイコンに色をつける方法

をご紹介しました!

ぜひ素敵なデザインにしてみてください。

今回は以上です!
最後までお読み頂き、ありがとうございました。
素敵なSANGOライフをお楽しみください。