【Cocoon】サイドバーにアイコン付きのボックスメニューを追加しよう！

こんにちは、こんばんは。たたです。

Twitterでも反響があったので、自分の備忘録もかねて、ブログのサイドバーにアイコン付きのボックスメニューを設定する方法をご紹介したいと思います。

当ブログにも設定しております。サイドバーの「Menu」の部分のことですね。

たた

ボックスメニューを設置することで

・見た目が整っておしゃれ

・自分が推したいカテゴリなどを、まとめられる

・訪問者が欲しい情報を見つけやすい

などのメリットがあると思います！

設定方法

メニューの作成

まずは、メニューの作成からになります。この記事を読まれている方はブログ作成している方が多いかと思います。トップメニューやフッターメニューの設定の経験がありましたら、内容はほとんど同じものになります。

まずは、「外観」⇒「メニュー」と進みましょう。

続いて、メニューの作成です。内容は基本的なメニューの作成ですね。

1. 新規メニューの作成
2. メニュー名の設定（ここでは「ボックスナビ」としています）
3. メニュー項目を追加（表示したいページにチェックを入れて「メニューに追加」）

今回、アイコンなどを設定するにあたって、メニュー作成画面上部の「表示オプション」から、「CSSクラス」「説明」にチェックを入れておいてください。

「CSSクラス」「説明」について、この後のアイコンの設定で設定内容を解説します。

アイコンの設定

Font Awesomeアイコンを利用する

Font Awesomeを利用する場合、まずはご自身のご利用されているFont Awesomeが4か5かを確認します。

確認方法はCocoonの設定の「全体」タブ、「サイトアイコンフォント」より確認できます。

現在、4がデフォルトになっていたので、以降の手順は4をベースに解説していきますが、5も基本的には同じかと思います。

先ほど作成したメニューの「▼」をクリックして以下の設定を行っていきます。

• URL：リンク先のURL（メニュー作成時点で自動入力）
• ナビゲーションラベル：メニューの表示名（大）
• CSS class(オプション)：アイコンの設定（設定内容は後述）
• 説明：メニューの表示名（小）

ナビゲーションラベル、説明は上記の画像のような見え方になるので、お好みに合わせて設定してください。本サイトではナビゲーションラベルを日本語、説明を英語で設定してみました！

CSS class(オプション)の設定方法についてですが、まずは以下のサイトから設定したいアイコンを探しましょう。

↓Font Awesome 4

Font Awesome Icons

Font Awesome, the iconic font and CSS framework

fontawesome.com

↓Font Awesome 5

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

アイコンを見つけることができたら、「class=”XXXX”」のXXXXの部分をコピーして、CSS class(オプション)に貼り付けます。（以下の画像の例だと「fa fa-home」の部分）

Font Awesomを使用したアイコンの設定は以上になります。

自分で用意した画像を利用する

アイコン部分に自分で用意した画像を設定する場合は、まず「メディア」⇒「新規追加」から使用したい画像を追加しておきましょう。

追加したファイルの詳細の「ファイルのURL」を設定に使用することになります。

ちなみに今回、アイコンの素材は以下のサイトを利用させていただきました。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

icooon-mono.com

画像の用意ができたら、メニューの設定になります。基本的にはFont Awesomeアイコンの設定と同じになるので、違う部分について解説していきます。

まず、メニューの表示オプションについてですが「タイトル属性」にチェックを入れてください（「CSSクラス」は使用しないのでチェック外しても問題ないと思います）

続いてメニューの「▼」をクリックして設定を行っていきます。Font Awesomeアイコンの設定と違うのは「タイトル属性」の項目のみです。

タイトル属性の項目に、先ほどコピーしたファイルのURLを貼り付けます。

自分で用意した画像でのアイコンの設定についても、以上になります。

サイドバーの設定

続いて、サイドバーの設定です。「外観」⇒「ウィジェット」より設定していきます。

利用できるウィジェットの中から「ボックスメニュー」を選択し、サイドバーにチェックを入れて「ウィジェットの追加」をクリックします。

「サイドバー」の設定で、追加されたボックスメニューを選択し以下の通り設定します。

• タイトル：ボックスメニューのタイトル
• メニュー名：作成したメニューを選択

サイドバーの設定の設定は以上です

最後に

メニューの設定、サイドバーの設定で今回の作業は以上になります。お疲れさまでした！

今回はサイドバーのメニューとして利用しましたが、他の場所にもアイコン付きのメニューの配置は行えそうなので、お好みに合わせてご利用いただければと思います。

これからも自分の備忘録、そして同じ悩みを持った誰かの助けになればと記録を残していきたいので、どうぞよろしくお願いします！