【コピペでOK】Elementorのメニューを2段にする方法！アイコン追加や個別スタイルも解説

「Elementorのナビゲーションメニューを、もっとおしゃれにカスタマイズしたい！」
「日本語の下に英語を小さく表示させたいな…」
「メニュー項目の横や下にアイコンを追加して、分かりやすくしたい！」

Elementorを使ってサイト制作をしていると、こんな風にメニューのデザインでこだわりたくなりますよね。

標準のメニューウィジェットでは難しい、テキストを2段にしたり、アイコンを組み合わせたりするデザイン。実は、少しのCSSコードをコピペするだけで、驚くほど簡単に実現できてしまいます。

今回の記事では、こちらの動画を参考に、Elementorのメニューを自由自在にカスタマイズする方法を、初心者の方にも分かりやすく解説していきます。

この記事でできるようになること

• メニューのテキストを上下2段にする（日本語/英語など）
• 上下のテキストの文字サイズや間隔を個別に調整する
• メニューに好きなアイコンを追加する
• サイト全体ではなく、特定のメニューだけにスタイルを適用する

準備するもの

今回のカスタマイズでは、以下のCSSコードを使用します。まずはこのコードをコピーしておきましょう。

/* サイトのカスタムCSS */
.elementor-nav-menu a,
.e-n-menu .e-n-menu-title-text {
    flex-direction: column;
}

.e-n-menu .e-n-menu-title-text {
    line-height: 1em; /* ウィジェットでサポートされるようになったら消す */
}

.elementor-nav-menu a span:first-child,
.e-n-menu .e-n-menu-title-text span:first-child{
    /*メニュー上部のスタイル*/
}

.elementor-nav-menu a span:nth-child(2),
.e-n-menu .e-n-menu-title-text span:nth-child(2){
    /*メニュー下部のスタイル*/
    margin-top: 10px;
    font-size: 0.8em;
}

/* アイコンのスタイル */
.elementor-nav-menu a span:nth-child(2) i,
.e-n-menu .e-n-menu-title-text span:nth-child(2) i {
    /*メニュー下部のスタイル*/
    font-size: 2em;
}

STEP1: 基本となるCSSコードを設置する

まずは、先ほどコピーしたCSSをサイトに適用させます。これにより、メニューを2段にするための下準備が整います。

1. WordPressのダッシュボードから [外観] > [カスタマイズ] をクリックします。
2. カスタマイズ画面が開いたら、左側のメニューから [追加CSS] を選択します。
3. 表示された入力欄に、先ほどコピーしたCSSコードを貼り付けます。
4. 最後に、画面上部の [公開] ボタンをクリックして変更を保存します。

これで準備は完了です。次に、実際にメニューを作成していきましょう。

STEP2: 2段表示のメニューを作成する

Elementorにはメニューを表示するウィジェットが2種類ありますが、どちらでも2段表示が可能です。

方法A： 「WordPress Menu」ウィジェットを使う場合

昔からあるこちらの方法は、WordPress本体のメニュー機能と連携させるのが特徴です。

1. ダッシュボードで [外観] > [メニュー] に進みます。
2. 「新しいメニューを作成しましょう」をクリックし、メニュー名（例: メインメニュー）を入力して「メニューを作成」ボタンを押します。
3. 左側の「カスタムリンク」を開きます。URLには「#」などを入力し、「リンク文字列」に以下のようなHTMLコードを入力します。 <span>TOFUラボとは</span><span>tofulab</span> ポイントは、<span>タグで上段のテキストと下段のテキストをそれぞれ囲むことです。
4. 必要なメニュー項目をすべて追加したら、「メニューを保存」します。
5. Elementorの編集画面で「WordPress Menu」ウィジェットを配置し、先ほど作成したメニューを選択します。

これだけで、メニューが2段で表示されているはずです！

方法B： 新しい「メニュー」ウィジェットを使う場合

こちらは、ウィジェット内で直接メニュー項目を作成できる、より新しい方法です。（※このウィジェットを使うには、Elementorの設定で「Menu」機能を有効にする必要があります）

1. Elementorの編集画面で「メニュー」ウィジェットを配置します。
2. 左側の編集パネルに「Menu Items」が表示されるので、各項目の「タイトル」に、方法Aと同じように<span>タグを使ったHTMLを入力します。 <span>入会のメリット</span><span>Merit</span>
3. すべての項目を入力すれば完成です。

STEP3: デザインをさらに細かく調整する

2段表示ができたら、次はお好みでデザインを調整していきましょう。文字サイズやアイコンの追加も、CSSの値を少し書き換えるだけで簡単です。

文字サイズと間隔の調整

下段のテキストをもう少し小さくしたり、上下の間隔を調整したい場合は、STEP1で「追加CSS」に貼り付けたコードを編集します。

.elementor-nav-menu a span:nth-child(2),
.e-n-menu .e-n-menu-title-text span:nth-child(2){
    /*メニュー下部のスタイル*/
    margin-top: 5px;   /* 上下の間隔を調整 */
    font-size: 0.6em;  /* 下段の文字サイズを調整 */
}

• margin-top: 上のテキストとの間隔です。数値を小さくすると狭く、大きくすると広がります。
• font-size: 下のテキストのサイズです。0.8emは上の文字の80%の大きさという意味です。

アイコンを追加する方法

メニューにアイコンを追加すると、視覚的に分かりやすくなります。

1. Font Awesome のサイトにアクセスします。（Elementorで使われているアイコンライブラリです）
2. 使いたいアイコンを探してクリックします。
3. 表示された<i class="..."></i>というHTMLコードをクリックしてコピーします。
4. メニューの編集画面に戻り、追加したいテキストの横（または<span>タグの中）に、コピーしたコードを貼り付けます。 例：文字の横にアイコンを入れる <span>サロンメンバーの声 <i class="fas fa-user-friends"></i></span><span>Voice</span> 例：アイコンだけを下段に表示する <span>運営について</span><span><i class="fas fa-wrench"></i></span>

アイコンが大きすぎる/小さすぎる場合は、追加CSSに以下のコードを追加・編集してサイズを調整できます。

/* アイコンのスタイル */
.elementor-nav-menu a i,
.e-n-menu .e-n-menu-title-text i {
    font-size: 1.5em; /* アイコンのサイズを調整 */
}

【補足】特定のメニューだけにスタイルを適用するには？

サイトのヘッダーメニューには適用したいけど、フッターメニューには適用したくない、という場合もあるでしょう。その際は、サイト全体に影響する「追加CSS」ではなく、ウィジェット個別の設定を使います。

1. STEP1で「追加CSS」に貼り付けたコードは削除します。
2. スタイルを適用したいメニューウィジェットを選択し、[高度な設定] > [カスタムCSS] を開きます。
3. ここに、ウィジェット専用のCSSコードを貼り付けます。（※この機能はElementor Proが必要です）

※ウィジェット別のCSSコードは、動画の概要欄からダウンロードできるファイル内に記載されています。selectorという記述から始まっているのが特徴です。

まとめ

今回は、CSSを使ってElementorのメニューを2段表示にしたり、アイコンを追加したりするカスタマイズ方法をご紹介しました。

一見難しそうに聞こえるかもしれませんが、基本はコードをコピペして、いくつかの数値を調整するだけです。このテクニックを使えば、サイトのデザインの幅がぐっと広がり、他のサイトと差をつけることができます。

ぜひ、あなたのサイトでも試してみてくださいね！