Simplicity のメニューをカスタマイズ

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

Simplicity のグローバルメニューのカスタマイズ方法の紹介です。

この記事では、主に 3 つのカスタマイズを紹介しています。

  • Font Awesome のアイコンを表示する。
  • Font Awesome のアイコンを 1 行目、メニュー名を 2 行目に表示する。
  • 子メニュー用に下矢印のアイコンを表示する。

Font Awesome のアイコンを表示

Simplicity のグローバルメニューには、CSS のみで Font Awesome のアイコンを表示できます。

基本的な指定方法

:before 疑似要素と :nth-child 擬似クラスを用いると、直感的にアイコンを指定できます。

以下の CSS を子テーマの style.css に追加します。

.menu-item > a:before {
  display: inline-block;
  font: 16px/1 FontAwesome;
  margin-right: 4px;
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f015';
}

これだけで、1 つ目のメニューに Font Awesome のホームアイコンが表示されました。

\f015 は、ホームアイコンの Unicode です。Unicode は、Font Awesome の各アイコンページで確認できます。

2 つ目以降のメニューにもアイコンを表示するには、:nth-child を使って Unicode を追加します。

.menu-item > a:before {
  display: inline-block;
  font: 16px/1 FontAwesome;
  margin-right: 4px;
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f015';
}

.menu > .menu-item:nth-child(2) > a:before {
  content: '\f06b';
}

.menu > .menu-item:nth-child(3) > a:before {
  content: '\f000';
}

.menu > .menu-item:nth-child(4) > a:before {
  content: '\f290';
}

.menu > .menu-item:nth-child(5) > a:before {
  content: '\f19c';
}

全てのメニューにアイコンが表示されました。

2 つ目のメニューには :nth-child(2) 、3 つ目のメニューには :nth-child(3) と、:nth-child() の数字を変えます。

アイコンのサイズを大きくする場合

上記の CSS では、 16px でアイコンを表示しています。

これを 24px にすると、メニューテキストとのバランスがちょっと崩れてしまいます。

どこかおかしいアイコンとテキストのバランス

大きなアイコンを表示させる場合には、.menu-item > a:before に変更を加えます。

.menu-item > a:before {
  display: inline-block;
  font: 24px/1 FontAwesome;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

バランスの良いしっくりくる表示になりました。

ちょうどいいバランス

position: relativetop: 2px を加えることで、アイコンが 2px 下がっています。

個別に色を付ける

子ども向けサイトや料理系サイトなどでは、カラフルなデザインにすることがよくあります。

アイコンに色を付けて、華やかにしてみます。

例えば下記の CSS を指定すると…。

.menu-item > a:before {
  display: inline-block;
  font: 24px/1 FontAwesome;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

.menu > .menu-item:nth-child(1) > a:before {
  color: #e91e63;
  content: '\f015';
}

.menu > .menu-item:nth-child(2) > a:before {
  color: #ff9800;
  content: '\f06b';
}

.menu > .menu-item:nth-child(3) > a:before {
  color: #4caf50;
  content: '\f000';
}

.menu > .menu-item:nth-child(4) > a:before {
  color: #03a9f4;
  content: '\f290';
}

.menu > .menu-item:nth-child(5) > a:before {
  color: #9c27b0;
  content: '\f19c';
}

ポップでカラフルなグローバルメニューになりました。

お好きな色を color で 1 つ 1 つ指定します。

今回使った色は、マテリアルデザインの Color Tool を参考にしました。

モバイル時のメニューテキストの開始位置を揃える

パソコンで見た時は、これまでの CSS だけで十分です。

しかし、モバイルで見た時に、メニューテキストの開始位置が揃っていません。

テキストの開始位置がバラバラ

これは FontAwesome のアイコンが、1 つ 1 つ微妙に大きさが違うのが原因。

そこで下記の CSS を追加し、メニューテキストの開始位置を揃えます。

@media screen and (max-width: 1110px) {
  .menu-item > a:before {
    text-align: center;
    width: 32px;
  }
}

すると、きれいに開始位置が揃いました。

きれいに揃ったテキストの開始位置

width の値は、お好みの値で構いません。

id や class でアイコンを指定

これまでの説明では、:before 疑似要素と :nth-child 擬似クラスを使いました。

メニューの順番どおりに指定するため、直感的にアイコンの Unicode を指定できるのがメリットです。

しかし、セレクタが長くなるデメリットがあります。

特に子メニューにアイコンを表示する場合には、下記の CSS のようにセレクタが複雑です。

.menu-item:nth-child(1) .sub-menu .menu-item:nth-child(1) > a:before {
  content: '\f015';
}

1 つ目のメニューの 1 つ目の子メニューとの指定をしています。

簡潔なセレクタで指定したい場合は、各メニューに割り当てられた id や class を用います。

各メニューの id や class は、ブラウザのデベロッパーツールで把握できます。

例えば、class の menu-item-91 で指定すると、セレクタが簡潔です。

.menu-item-91 > a:before {
  content: '\f015';
}

また、各メニューの順番を変更しても、 CSS を変更する必要がないのもメリット。

簡単にカスタマイズするよりも CSS の効率性を重視される方は、id や class での指定がおすすめです。

メニューを 2 行で表示

サイトによってはメニューを 2 行にし、1 行目にアイコン、2 行目にメニュー名を表示したい時もあります。

メニューを 2 行にするのも CSS で行います。

アイコンを 1 行目に表示

このような CSS を子テーマの style.css に追加すると、アイコンを 1 行目、メニュー名を 2 行目に表示できます。

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
}

.menu-item > a:before {
  display: block;
  font: 24px/1 FontAwesome;
  margin-bottom: 4px;
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f0f5';
}

.menu > .menu-item:nth-child(2) > a:before {
  content: '\f11b';
}

.menu > .menu-item:nth-child(3) > a:before {
  content: '\f008';
}

.menu > .menu-item:nth-child(4) > a:before {
  content: '\f02d';
}

.menu > .menu-item:nth-child(5) > a:before {
  content: '\f004';
}

1 行目にアイコンが表示されました。FontAwesome アイコンの表示方法は、先に紹介した方法と同じです。ただ、display: block; でブロック要素にし、1 行目に表示しています。

2 行で表示するのは PC でのみ、モバイルでは 1 行で表示する場合は、下記の CSS を指定します。

.menu-item>a:before {
  font: 24px/1 FontAwesome;
}

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
  
  .menu-item > a:before {
    display: block;
    margin-bottom: 4px;
  }
}

@media screen and (max-width: 1110px) {
  .menu-item > a:before {
    display: inline-block;
    margin-right: 4px;
    position: relative;
    text-align: center;
    top: 2px;
    width: 32px;
  }
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f0f5';
}

.menu > .menu-item:nth-child(2) > a:before {
  content: '\f11b';
}

.menu > .menu-item:nth-child(3) > a:before {
  content: '\f008';
}

.menu > .menu-item:nth-child(4) > a:before {
  content: '\f02d';
}

.menu > .menu-item:nth-child(5) > a:before {
  content: '\f004';
}

するとモバイルでは、アイコンがメニュー名の左に表示されます。

英語のサブメニューを表示

アイコンではなく、英語のサブメニュー名の表示も可能です。

Simplicity であれば、下記のような CSS を指定します。

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
}

.menu-item > a:after {
  display: block;
}

.menu > .menu-item:nth-child(1) > a:after {
  content: 'Cooking';
}

1 つ目のメニュー「料理」の下に「Cooking」が表示されました。

:nth-child の数字を変え、2 つ目以降のメニューにもサブメニュー名を表示してみます。

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
}

.menu-item > a:after {
  display: block;
}

.menu > .menu-item:nth-child(1) > a:after {
  content: 'Cooking';
}

.menu > .menu-item:nth-child(2) > a:after {
  content: 'Game';
}

.menu > .menu-item:nth-child(3) > a:after {
  content: 'Movie';
}

.menu > .menu-item:nth-child(4) > a:after {
  content: 'Book';
}

.menu > .menu-item:nth-child(5) > a:after {
  content: 'Love';
}

これですべてのメニューが、英語のサブメニュー付きで 2 行で表示されます。

下矢印のアイコンを表示

メニューを階層化しているサイトもあるでしょう。

ただ、単に階層化しているだけでは、子メニューのクリック率は極めて低いはずです。

例えば下の画像の「メニュー 1」には、3 つの子メニューを設置しています。

見ただけで子メニューがあると分かる方は、おそらくいらっしゃらないでしょう。

では、下の画像の「メニュー 1」は、どうでしょうか?

下矢印が付いているため、さらにメニューがあることがすぐに分かります。

この下矢印も CSS のみで表示できます。

Font Awesome で下矢印を表示

下矢印を表示する最も手軽な方法が、Font Awesome の caret-down を使うもの。

子テーマの style.css に、以下の CSS を指定します。

.menu > .menu-item:nth-child(1) > a:after {
  content: '\f0d7';
  display: inline-block;
  font: 16px/1 FontAwesome;
  margin-left: 8px;
}

これで 1 つ目の親メニューの右に、下矢印が表示されます。

2 つ目の親メニューに指定するには、.menu > .menu-item:nth-child(2) > a:after:nth-child() の数字を変えます。

もちろん、.menu > .menu-item:nth-child(1) は、メニューの id や class での指定でも構いません 。

CSS で三角形を指定する

Font Awesome のアイコンが気に入らない場合には、自分で三角形を作ることも可能です。

例えば、下記のように CSS を指定してみます。

.menu > .menu-item:nth-child(1) > a:after {
  border-color: #111 transparent transparent transparent;
  border-style: solid;
  border-width: 8px 4px 0 4px;
  content: '';
  display: inline-block;
  margin-left: 8px;
  position: relative;
  top: -1px;
}

1つ目の親メニューに、CSS で作成した三角形が表示されました。

三角形を作る際には、「CSS 三角形作成ツール」を使うとすごく便利。

三角形の大きさ、矢印の向き、色など、自由自在に簡単に作成できます。

しかも、自動的に CSS が生成されるため、コピペで指定が可能です。

コメント

  1. こんにちは。おせわになってます。

    Simplicityでメニューにカラーアイコン使わせて貰ってます。
    プラグインが一つ減って助かりました。

    こちらはcocoonでも、利用可能でしょうか?
    Local by Flywheeのローカル環境で検証しているのですが、アイコンが表示してくれません。
    本番環境でないので、違うのかもいれないです。

    もう一つ質問なのですが、文章中などで、Font Awesomeの色を
    cssを使わないで表示させる方法があれば教えて貰えると幸いです。

    • こんにちは。

      ご質問 1 : Cocoon でも利用可能か?

      Cocoon でも使えますが、 CSS の変更が必要です。もし、 Cocoon の高速化設定の「 CSS 縮小化」が無効であれば、下記の CSS でアイコンが表示されます。

      .item-label:before {
        display: inline-block;
        font: 24px/1 FontAwesome;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
      
      .menu-item:nth-child(1) .item-label:before {
        content: '\f015';
        color: #e91e63;
      }
      
      .menu-item:nth-child(2) .item-label:before {
        content: '\f06b';
        color: #ff9800;
      }

      もし、高速化設定の「 CSS 縮小化」が有効であれば、 :nth-child ではなくメニューの id を使います。( .navi-in > ul li の li の id 。)

      .item-label:before {
        display: inline-block;
        font: 24px/1 FontAwesome;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
      
      #menu-item-49 .item-label:before {
        content: '\f015';
        color: #e91e63;
      }
      
      #menu-item-50 .item-label:before {
        content: '\f06b';
        color: #ff9800;
      }

      現在の Cocoon では、「 CSS 縮小化」と :nth-child の相性が良くないんです。

      ご質問 2 : CSS を使わず色を表示する方法

      これはおそらく無理です。どうしても CSS の指定は必要だと思います。

      もし、色を使い分けるためのご質問であれば、下記のように HTML に class 名(下の例では red )を追加されてはいかがでしょうか。

      HTML 。

      <i class="red fa fa-envelope-open" aria-hidden="true"></i>

      CSS 。

      .red {
        color: red;
      }
  2. Akiraさん、回答ありがとうございます。

    ようやく、1段目がきれいに出来ました。css高速化をきらない方法です。

    ここで、解決出来ない問題が出来ました。
    サブメニューを#menu-item ナンバーで指定しても、しなくても、何故か1段目のアイコンがサブメニューに表示されます。

    ローカルだからなのか、サブメニューがあるカテゴリーは2段目に表示されて、通知エリアを隠すように表示されます。そして、上の段のアイコンが表示されるのです。

    何か、確認したら良い部分とかありましたら、教えていただけると幸いです。

    • メニューを階層化されていらっしゃるなら、下記のように子セレクタで指定する必要があります。

      #menu-item-49 > a > .caption-wrap > .item-label:before {
        content: '\f015';
        color: #e91e63;
      }

      子孫セレクタ( > がない書き方)の場合には、 #menu-item-49 の子要素にある全ての .item-label に CSS が効いてしまうんです。そのため、親メニューのアイコンが、子メニューにも表示されます。

  3. Akiraさん、ようやく、子メニューまで出来ました。

    コメントをつけてないと、訳わからなくなるので切換え前に出来て良かったです。

    ありがとうございました。

  4. akiraこんにちは。アドバイスお願いします。

    COCOONにしてから、ナビにアイコンが表示されません。
    ローカルテストで、Local by FlywheelではOK でした。Bitnamiではだめでした。

    https://chan-bike.com/
    上記サイトのグローバルメニューのメンテナンスの子メニューに四角の表示をしています。

    試したこと
    ・親のheader.phpに書き込み v5.0.6 とか v4.●●とか
    ・一時的に Font Awesome 4 Menusを復活してテスト
    ・メニューのCSS class に書き込んでテスト

    投稿記事では、ちゃんと表示されるのですがメニューには四角で表現されてしまいます。
    以前は、サイドバーのカテゴリーにもちゃんとアイコンがキレイに色つきで並んでいたので、cocoonでも是非同じようになればなあと思います。
    アドバイスいただけると助かります。
     

    • 実際に指定されているアイコン部分の CSS を書いていただいてもよろしいでしょうか。

      CSS が縮小化されているので、該当部分の CSS を見つけるのに時間がかかりそうで。申し訳ないです。

      Font Awesome は、バージョン 5 と 4 はまるで別物です。現在の Cocoon はバージョン 4 が適用されているので、バージョン 5 の読み込みは停止された方がいいと思います。

  5. 5の読み込みは停止しました。
    該当箇所のcssですが、現在はコメントにしてます。

    /*ナビ*/
    .menu-item>a:before {
    display: inline-block;
    font: 24px/1 FontAwesome;
    margin-right: 4px;
    position: relative;
    top: 2px;
    }

    /*ブログ*/
    #menu-item-81 .item-label:before {
    content: “\f040′;
    color: #0031ca;
    }

    /*朝練*/
    #menu-item-79 .item-label:before {
    ontent: “\f018”;
    color: #ff9800;
    }

    /*インプレ*/
    #menu-item-79 .item-label:before {
    content: “\f209”;
    color: #4caf50;
    }

    /*トレーニング*/
    #menu-item-478 .item-label:before {
    content: “\f06e”;
    color: #03a9f4;
    }

    /*メンテナンス*/
    #menu-item-497 .item-label:before {
    content: “\f0ad”;
    color: #9c27b0;
    }

    /*プラ*/
    #menu-item-92 .item-label:before {
    content: “\f233”;
    color: #9c27b0;
    }

    /*子テーマ*/
    /*健康*/
    #menu-item-4519 > a > .caption-wrap > .item-label:before {
    content: “\f1ae”;
    }

    /*糖質*/
    #menu-item-2751 > a > .caption-wrap > .item-label:before {
    content: “\f182”;
    }

    よろしくお願いします。

    • この指定が、 Cocoon に合っていないのが原因です。

      /*ナビ*/
      .menu-item > a:before {
        display: inline-block;
        font: 24px/1 FontAwesome;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }

      下記のように指定されると、 Cocoon でアイコンが表示されます。

      /*ナビ*/
      .item-label:before {
        display: inline-block;
        font: 24px/1 FontAwesome;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
      
      /*ブログ*/
      #menu-item-81 > a > .caption-wrap > .item-label:before {
        content: '\f040';
        color: #0031ca;
      }
      
      /*朝練*/
      #menu-item-83 > a > .caption-wrap > .item-label:before {
        content: '\f018';
        color: #ff9800;
      }
      
      /*インプレ*/
      #menu-item-79 > a > .caption-wrap > .item-label:before {
        content: '\f209';
        color: #4caf50;
      }
      
      /*トレーニング*/
      #menu-item-478 > a > .caption-wrap > .item-label:before {
        content: '\f06e';
        color: #03a9f4;
      }
      
      /*メンテナンス*/
      #menu-item-497 > a > .caption-wrap > .item-label:before {
        content: '\f0ad';
        color: #9c27b0;
      }
      
      /*プラ*/
      #menu-item-92 > a > .caption-wrap > .item-label:before {
        content: '\f233';
        color: #9c27b0;
      }
      
      /*子テーマ*/
      /*健康*/
      #menu-item-4519 > a > .caption-wrap > .item-label:before {
        content: '\f1ae';
      }
      
      /*糖質*/
      #menu-item-2751 > a > .caption-wrap > .item-label:before {
        content: '\f182';
      }
  6. Akiraさん、ばっちりグローバルメニューに表示されました。

    お忙しい中、ありがとうございました!

    • 上手くいってよかったです。

      何かございましたら、お気軽にご連絡ください。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。