【SWELL】メニューにアイコンを付ける方法｜ヘッダーをおしゃれに

「他のブログみたいに、メニューに家マークや吹き出しアイコンを付けたい…」

そう思って調べたものの、コードの説明ばかりで「なんだか難しそう…」と感じていませんか？

実はSWELLなら、メニューのアイコン設定はかなり簡単です。
SWELL純正はとにかく簡単。
Font Awesomeはアイコンの種類がかなり豊富です。

私も実際にやってみると数分で設定できました。
そこでこの記事では、SWELLでメニューにアイコンを付ける方法を、初心者向けにわかりやすく解説します。

💡 メニュー作成自体が初めての方へ：メニューの新規作成・ヘッダーへの表示方法は【WordPress】メニューの作り方の記事で解説しています。基本ができてからこちらに進むのがおすすめです。

あわせて読みたい

【WordPress】メニューの作り方｜ヘッダー・フッター設定まで解説 お問い合わせページやプライバシーポリシーを作ったのに、「どこに設置すればいいの？」と迷っていませんか？ WordPressのメニュー設定は、初心者がつまずきやすいポイ…

それでは見ていきましょう！

SWELLはメニューアイコン設定が簡単

他のWordPressテーマでメニューにアイコンを入れる場合、CSSを書いたり、別途プラグインを入れたりする必要があるケースが多いです。
一方SWELLは、最初からアイコン機能とFont Awesome連携が組み込まれています。

細かい違いを表にまとめるとこんな感じです。

要するに、SWELLは「アイコンを使う準備」が最初から整っているテーマです。
他テーマで必要な「読み込みの設定」をスキップして、簡単に使い始められます。

方法①：SWELL純正アイコンを使う【初心者向け】

まずは一番手軽な、SWELL純正のアイコン機能から見ていきます。
「ショートコード」と呼ばれる短いコードを、メニューのラベルに貼り付けるだけで使えます。

公式サイトで使い方を見る 　アイコンを簡単に呼び出せるショートコードの使い方

アイコンの入れ方

たとえば、「ホーム」項目に家アイコンを付けたい場合はこう書きます。

▼ ナビゲーションラベルに貼り付け[icon class="icon-home"] ホーム

のように入力

これを保存するだけで、サイト側ではメニュー名の左に小さな家アイコンが表示されます。

💡 他のアイコンを使いたい場合： アイコンのクラス名を変更するだけです。
　　SWELL公式アイコンのクラス名一覧はこちら→SWELLで使えるアイコンの一覧

色を変える方法

このようにショートコードを<span>タグで囲んで色を指定するとアイコンの色を変更できます。

<span style="color:#7c6ff7;">[icon class="icon-home"]</span> ホーム

<span> タグで囲んで style="color:..." を指定する形なら、ナビゲーションラベルに貼り付けるだけで色が変わります。

color="#7c6ff7" の部分が色コードです。
ブログのテーマカラーに合わせて色を統一すると、サイト全体に一体感が出ますよ。

よく使う色コード一覧

色コードがわからない方は、こちらをコピペして使ってみてください。

迷ったら、まずはブログのテーマカラーに近い色を1色決めるのがおすすめです。
よく使いやすい色をまとめると、こんな感じになります。

最初に「テーマカラー」を1色決めておくと、メニューアイコンも記事内の装飾も統一感が出やすくなります。

方法②：Font Awesomeでもっと自由にする【応用】

「応用」と書きましたが、難しくありません。
やることは純正と同じで、コードをコピーしてラベルに貼り付けるだけです。

Font Awesomeを使うと、純正にはない種類のアイコンを2,000以上から選べます。
ジャンル特化のブログや、独自の世界観を出したい方におすすめです。

Step1：SWELL設定でFont Awesomeを有効化

最初に1回だけ、SWELLの設定でFont Awesomeを「使う」状態に切り替えます。

📸 スクショ：SWELL設定 → Font Awesomeタブ → 読み込みON

Step2：公式サイトでアイコンを探す

次に、使いたいアイコンを公式サイトで探します。

Step3：HTMLコードをコピー

気に入ったアイコンをクリックすると、詳細ページに次のようなコードが表示されます。

▼ Font Awesomeから取得するコード（例：家アイコン）<i class="fa-solid fa-house"></i>

このコード全体をそのままコピーします。
細かい仕組みを理解する必要はなく、丸ごとコピーすればOKです。クリックすればコピーされてますよ。

Step4：ナビゲーションラベルに貼り付け

あとは純正アイコンと同じ要領で、メニューのラベルに貼り付けるだけです。

▼ Font Awesomeを使う場合の書き方<i class="fa-solid fa-house"></i> ホーム

並べてみると、同じ「家アイコン」でも線の太さや角の丸みが微妙に違います。
ブログの雰囲気に合わせて、好きな方を選んでみてください。

SWELLのショートコード呼び出しで書く方法でも大丈です。その場合はクラス名部分だけをコピーして貼り付けます。こちらの書き方でも同じようにアイコンが表示されますよ。

[icon class = "fa-solid fa-house"] ホーム

アイコンが表示されないときの対処法

コードを貼り付けたのにアイコンが出てこない場合、原因はだいたいこの3つです。

• Font Awesomeの読み込みがOFFになっている：「SWELL設定」→「Font Awesome」タブで「CSSで読み込み」にチェックが入っているか確認しましょう。
• キャッシュが残っている：ブラウザのハードリロード（Windows: Ctrl + Shift + R / Mac: Command + Shift + R）で更新してみてください。
• 古いバージョンのコードを使っている：昔の <i class="fas fa-home"></i> 形式と、新しい <i class="fa-solid fa-house"></i> 形式があります。Font Awesome公式サイトから最新の書き方をコピーすると安全です。

Font Awesomeは記事本文の中でも使える

Font Awesomeを有効化しておくと、メニュー以外にも便利な使い道があります。
記事本文のチェックリストや見出しのワンポイントにも、同じコードをそのまま使えるのです。

▼ 記事内で使う例

使い方はさきほどのSWELLのショートコードの使い方と同じです。

[icon class="ここにアイコンのクラス名"]

<i class=”fas fa-fish”></i>　をつかいたいときはクラスの中の文字を控えておいて、

[icon class="fas fa-fish"]

のように書くと　

魚のアイコンが表示できます。

ブログ全体に同じテイストのアイコンを散りばめると、デザインに一貫性が出てプロっぽい印象になりますよ。

SWELLでアイコンを使うときの注意点

最後に、アイコンを使うときに気をつけたいポイントを3つだけまとめておきます。

① 入れすぎるとゴチャつく

すべてのメニュー項目にアイコンを入れると、逆にうるさい印象になります。
「入れる」か「入れない」かはサイト内で統一するのがコツです。

② 色を増やしすぎない

color指定で色を変えられますが、メニューごとに色を変えすぎるとサイトの一体感が崩れます。
基本は1色、多くても2色までに抑えるとまとまりが出ます。

③ スマホ表示を必ず確認

PCで見るとちょうどいいバランスでも、スマホで見るとアイコンとテキストが詰まって見えることがあります。
設定後はPC・スマホの両方で必ず表示を確認しましょう。

SWELLならアイコン機能が最初から使える

純正アイコンもFont Awesomeも、コードを貼るだけで動く環境がそろっています。

まとめ：SWELLはアイコン設定がかなり簡単

今回は、SWELLでメニューにアイコンを付ける2つの方法を解説しました。

どちらの方法もコピペでできるので、まずは1項目だけ試してみるのがおすすめです。
アイコンが入るとサイトの印象がガラッと変わるので、ぜひお気に入りのアイコンを見つけてみてください。

次回は、メニューの下に英字サブタイトルを入れる「2段表示メニュー」の作り方を解説します。
おしゃれブログでよく見るあのデザインを、SWELLで再現する方法を紹介する予定です。

👉 シリーズの他の記事はこちら

あわせて読みたい

【WordPress】メニューの作り方｜ヘッダー・フッター設定まで解説 お問い合わせページやプライバシーポリシーを作ったのに、「どこに設置すればいいの？」と迷っていませんか？ WordPressのメニュー設定は、初心者がつまずきやすいポイ…