こんにちは、Daniel (@daniel__blog) です。
この記事では、
- SANGOのヘッダーメニューにアイコンを表示させる方法
- SANGOのヘッダーメニューアイコンに色をつける方法
をご紹介します。簡単に設定できます。
メリットとしては、下記の3点が期待できます。
- ヘッダーメニューの視認性がアップする
- ヘッダーメニューのカスタマイズの選択肢が増える
- ヘッダーメニューがより印象的になる
ちなみにデフォルト(アイコンなし)では、以下のようなメニューとなっています。

個人的にはもう少し色合いがあるのも魅力的かなと思いました。
そこで、実際に設定してみました。
なるべく分かりやすくご説明していきますね。

自己紹介:
この記事を書いている僕は、SANGO歴1年ほど。
いつも楽しくカスタマイズしながら、充実したブログ生活を送っています。
Contents
SANGOのヘッダーメニューにアイコンを追加し、色も変更する方法
完成イメージ
最初に完成イメージをお見せします。
設定すると、こんな感じにできます。
アイコンを設定したヘッダーメニュー

僕のブログでも適用している設定です。
設定方法の流れ
以下の流れで導入できます。
- 手順①:『Font Awesome』でアイコンを選ぶ
- 手順②:アイコンのタグをコピーする
- 手順③:メニュー設定にペーストする
- 手順④:色変更用のCSSクラス名を追加する
- 手順⑤:『追加CSS』に追記する
- 手順⑥:「公開」を押して完了!
では、順番に見ていきましょう。
手順①:『Font Awesome』で使うアイコンを選ぶ
まず、Font Awesomeを開きます。以下のリンクです。

こちらでアイコンを探しましょう。
以下のように、検索バーに英単語を入れて検索します。

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

手順②:アイコンのタグをコピーする
「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ライフをお楽しみください。