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

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

この記事では、

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

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

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

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

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

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

Daniel

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

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

完成イメージ

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

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

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

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

設定方法の流れ

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

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

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

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

https://fontawesome.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

お好みでカスタマイズ

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

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

手順⑥：「公開」を押して完了！

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

設定時の注意

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

この記事では、

をご紹介しました！

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

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