カスタムメニューのそれぞれのリストに複数のクラス名を付ける方法

今回はカスタムメニューにクラス名を複数付ける方法をご紹介します。

「外観」⇒「メニュー」を選ぶと カスタムメニューの管理画面となります。

カスタムメニュー画面

表示オプションの確認

メニューの管理画面から、クラス名の付与を許可する状態にしておきます。

「表示オプション」をクリックし、「CSSクラス」にチェックを付けます。

メニューオプション

これでナビ要素にクラス名を付与することが出来ます。

複数のクラス名を付ける

2つ以上のクラス名を付ける際は、半角スペースを空けて記述すると、それぞれのクラス名が付与されます。

以下は、「myclass1」、「myclass2」というクラス名を付けた状態です。

クラス名の付与

実際に対象の要素を確認すると、確かにクラス名が付けられています。

終わりに

今回何故この記事を作成したかといいますと、いざ私がクラス名を複数付ける際に「class1,class2」と半角カンマで区切っており、適切に設定されなかったんですね。

小さいことですけど、知らないと「あれ?」となり変に時間を割かれかねないので今回紹介いたしました。

お役に立てたら幸いです。