サイトを訪れたユーザーを迷子にさせないためのグローバルメニュー。
設置が完了して喜んでいましたが…、ふと「文字だけじゃ寂しくない？」と思ってしまいました。
テキストだけだと寂しいなぁ…
調べてみると、Font Awesomeのアイコンフォントを簡単に表示できることが分かりました。
見た目の比較
アイコンフォントが「ある／なし」で、視覚的にどう違うかを見てみましょう。
だいぶ雰囲気が違いますよね。
無料テーマCocoonには、最初からFont Awesomeが使えるようになっていますから、使わない手はないと思います。
Font Awesome（アイコンフォント）とは？
グローバルメニューに表示するイラストは、イラストの形をしたフォント＝「アイコンフォント」を使います。Web上には様々なアイコンフォント配布サービスがありますが、中でも有名で人気のあるサービスが『Font Awesome』です。
Font Awesomeの使い方がよくわからない方は、別記事に詳細がありますのでご確認ください。
どんなアイコンがあるかというと、
などのイラスト系や、 といった矢印系。他にも、
みたいに、どこかで見たことがあるようなものまで…。
Font Awesomeを利用するには前もって準備が必要ですが、Cocoonを使っているなら大丈夫。ただし、自分のサイトで選択しているバージョンが「4」か「5」かを確認してください。
バージョンの確認方法 → ダッシュボード［Cocoon設定］→［全体］タブ
現在、Cocoonで使えるFont Awesomeのバージョンは「4」か「5」です。最新バージョン「6」には対応していないので、コピーするバージョンに注意が必要です。
グローバルメニューにアイコンフォントを設定する方法
こちらの記事は、テーマCocoonを使用していることを前提として作成しています。違うテーマを使っている場合は、テーマでFont Awesomeを使えるか、又は、使う準備が済んでいるかを別途確認してください。
1.【Font Awesome】のサイトでアイコンのコードをコピーしてくる
まずは、使いたいアイコンのコードをもらって来ましょう。
- Font Awesomeにアクセスします。
- フリー版の中から使いたいものを探し、対象のアイコンをクリックします。
- ポップアップウィンドウに表示された
<i class="●"></i>のコード部分をクリックします。
これでコードがコピーされたので、次の作業へ進みます。
2.【グローバルメニュー】にアイコンフォントを表示させる
今度は自分のサイトに戻り、メニューにアイコンが表示されるように設定していきます。
- 管理メニュー［外観］→［メニュー］を開きます。
- ［メニュー構造］の中に並んでいるメニュー項目の中から、アイコンを設置したいメニューの▼ボタンをクリックします。
- ［ナビゲーションラベル］のテキストの前にコードを貼り付けます。
アイコンとテキストの間に余白が欲しい時は、半角スペースを入れるのが簡単です。
- ［メニューを保存］ボタンをクリックします。
- ブログを更新し、アイコンが表示されるのを確認しましょう。
他のメニューにもアイコンを設置する場合は、この作業を繰り返します。
