【Cocoon】サイドバーにボックスメニューを表示する方法｜アイコン付きメニューの作り方

今回は、Cocoonカスタマイズのうち、サイドバーにボックスメニューを表示させる方法について解説していきます。

Cocoonには、アイコンや画像を使って、視覚的にわかりやすいメニューを作れる「ボックスメニュー」機能があります。Cocoon公式でも、WordPressで作成したメニューを「[C]ボックスメニュー」ウィジェットに設定する方法が紹介されています。

「ボックスメニュー」は、このようなリンク付きのメニューのことです。

私は、このように

• ホーム
• カテゴリー
• プロフィール
• サイトマップ

などを設定しています。（※現在は変更しています）

画像やアイコンをクリックすれば、それぞれのページへ移動できるようになっています。

本記事では、サイドバーにボックスメニューを表示させる方法について、順番に解説していきます。

それでは、どうぞ！

Cocoonのボックスメニューを設置する前の準備

まずは、ボックスメニューを作成する前に、いくつか準備をしておきます。

①どんなメニューを作るか決める

まずは、

どのようなアイコンに、何のリンクを付けたいのか？

具体的なイメージをあらかじめ決めておきます。

私のサイトでは、下の画像のようなイメージで作成しています。

例えば、「人」のマークをクリックすれば、「プロフィール画面」に遷移します。

このように、アイコンを見ただけで「どこに移動するのか」がイメージできるようにしておくと、わかりやすいです。

また、サイドバーでは2列で表示されるため、偶数個にすると見た目を整えやすいです。

②WordPressの表示オプションを設定する

続いて、準備の2つ目です。

WordPress管理画面から、[外観]→[メニュー]を選択します。

メニュー画面を開いたら、[表示オプション]を確認します。

ここで、

• カスタムリンク
• CSSクラス

にチェックを入れておきます。

これで、メニューにアイコンを設定するための「CSS class」を表示できるようになります。

③Font Awesomeのバージョンを確認する

準備の3つ目は、「Font Awesome」のバージョン確認です。

Font Awesomeとは？

Font Awesomeとは、Webサイトなどで利用できるアイコンフォントです。

Cocoonのボックスメニューでは、Font Awesomeのアイコンを利用してメニューを作成できます。

Cocoon公式でも、Font Awesome 4・5に対応した設定方法が案内されています。

自身のFont Awesomeのバージョンを調べるには、

[Cocoon設定]→[全体]→[サイトアイコンフォント]

を確認してください。

それぞれのバージョンに応じて、後から使用するアイコンのクラス名が異なります。

どのバージョンを使用しているか、覚えておいてください。

Cocoonのボックスメニューを作成する

それでは、実際にボックスメニューを作成していきましょう。

まずは、表示用の「メニュー」を作成していきます。

①新しいメニューを作成する

WordPress管理画面から、

[外観]→[メニュー]を選択します。

続いて、

[新しいメニューを作成しましょう]

をクリックします。

メニュー名に、それらしい名前を付けます。
※私は「ボックスナビ」としました。

最後に、

[メニューを保存]

をクリックします。

メニュー項目を追加する

続いて、作成したメニューに項目を追加していきます。

私の設定しているボックスメニューは、大きく分けて次の4種類です。

①ホームを設定する

まず、「ホーム」の設定です。

[メニュー項目を追加]から、「カスタムリンク」を選びます。

以下の項目を、それぞれ入力します。

URL：サイトのトップページアドレス（https://から始まるURL）
リンク文字列：ホーム

入力後、

[メニューに追加]をクリックします。

②カテゴリーを設定する

次に「カテゴリー」を設定します。

[メニュー項目を追加]の「カテゴリー」から、表示したいカテゴリーにチェックを入れ、

[メニューに追加]をクリックします。

今回は、カテゴリーを4つ追加しています。

サイトのカテゴリー数や、サイドバーに表示したい内容に合わせて自由に設定してください。

③固定ページを設定する

最後に、固定ページを追加します。

今回は、

を追加します。

[メニュー項目を追加]の「固定ページ」から追加したいページを探し、チェックを入れます。

最後に、

[メニューに追加]をクリックします。

これで、メニュー項目の追加は完了です。

ボックスメニューにアイコンを設定する

メニューをすべて追加したら、それぞれのメニュー項目にアイコンを設定していきます。

まず、設定したい項目の「詳細（▼）」をクリックして開きます。

すると、「CSS class（オプション）」という項目があります。

ここにアイコンのCSS classを入力します。

Font Awesomeから好きなアイコンを選ぶ

ここで、先ほど確認したFont Awesomeのバージョンに合わせて、アイコンを選びます。

Font Awesome 4の場合は、Font Awesome 4のアイコンページから好きなアイコンを探します。

Font Awesome 5の場合も、同様にアイコンページから好きなアイコンを探します。

Cocoon公式でも、アイコンページからクラス名をコピーして「CSS class」に入力する方法が紹介されています。

好きなアイコンを検索するか、スクロールして選びます。

アイコンを選び、詳細ページを開きます。

アイコンのクラス名を確認します。

例えば、

<i class="fab fa-apple"></i>

という表示の場合は、必要なCSS classをコピーします。

コピーしたCSS classを、WordPressの「CSS class（オプション）」に入力します。

私が使っているアイコン

ちなみに、私が使用しているアイコンは以下のとおりです。（※現在は使用していません）

ホーム

「ホーム」　fa fa-home

カテゴリー1

「すてる」　fa fa-trash

カテゴリー2

「そうじ」　fa fa-pagelines

カテゴリー3

「かたづけ」　fa fa-inbox

カテゴリー4

「せいかつ」　fa fa-child

プロフィール

「プロフィール」　fa fa-user

サイトマップ

「サイトマップ」　fa fa-sitemap

また、「ナビゲーションラベル」を変更することで、ボックスメニューに表示される名前も変更できます。

すべての設定が終わったら、

[メニューを保存]をクリックします。

ボックスメニューをサイドバーに設置する

ここまでで、ボックスメニュー自体は完成しました。

最後に、作成したメニューをサイドバーに設置していきます。

①ウィジェットを開く

WordPress管理画面から、

[外観]→[ウィジェット]を選択します。

②「[C]ボックスメニュー」をサイドバーに追加する

左側から、

[C]ボックスメニューを探します。

それを右側にある「サイドバー」へドラッグ＆ドロップします。

別の方法として、サイドバーにチェックを入れた状態で、

[ウィジェットを追加]をクリックしてもOKです。

③作成したメニューを指定する

「[C]ボックスメニュー」の[▼]ボタンを押し、設定画面を開きます。

[タイトル]に「メニュー」などの文字を入力します。

※「MENU」など好きなワードでOKです。

続いて、[メニュー名]に、先ほど作成したメニューを指定します。

※私の場合は「ボックスナビ」としています。

最後に、[save]→[完了]をクリックします。

これで、サイドバーにアイコン付きのボックスメニューが設置されました。

実際にサイトを開いて、表示を確認してみましょう。

ボックスメニューはサイドバー以外にも設置できる

Cocoonのボックスメニューは、サイドバー以外にも利用できます。

例えば、投稿本文の下などに設置することもできます。

設置する場所を工夫すれば、読者が別の記事やカテゴリーへ移動しやすくなります。

ブログ内の回遊性を高めたい場合にも活用できます。

Cocoon公式でも、ボックスメニューはサイドバーだけでなく、本文中やコンテンツ上部・下部などで利用できることが紹介されています。

「サイドバー以外にもいろいろカスタマイズしたい！」という方は、こちらの記事も参考にしてください。
【【Cocoon】初心者におすすめのカスタマイズ10選｜ブログを見やすくする設定方法】

まとめ：【Cocoon】サイドバーにボックスメニューを表示する方法

いかがでしたか？

今回は、Cocoonのサイドバーにボックスメニューを表示させる方法についてご紹介しました。

今回の手順をまとめると、次のとおりです。

ボックスメニューを設置すると、一気に凝ってるサイト感が出るので、いいですよね。

手順は少し複雑ですが、慣れれば簡単。

色々なアイコンを設定できるようになります。

今回は無料のアイコンフォントを使った方法を紹介しましたが、自分で準備した画像をアイコンとして指定することも可能です。Cocoon公式でも、画像を使ったボックスメニューの設定方法が紹介されています。

Cocoonのカスタマイズをもっと知りたい方は、こちらの記事もどうぞ。
【【Cocoon】初心者におすすめのカスタマイズ10選｜ブログを見やすくする設定方法】

また、ヘッダー下に画像付きのリンクを表示したい場合は、こちらの記事もおすすめです。
【Cocoonの「おすすめカード」を表示する方法】

それでは、今回はここまで。

最後までお読みいただき、ありがとうございました。

関連記事

Cocoonやワードプレスに関する記事をまとめました。
→「テーマ「Cocoon」に関する記事」

Cocoonのカスタマイズに関する記事

• 初心者におすすめのカスタマイズ10選
• スマホ表示用のボタンを表示させる
• 目次がついてくる！目次追従の設定
• グローバルメニューのカスタマイズ方法
• 簡単！サイト型トップページの作り方（図解付き）

Cocoonの設定や表示に関する記事

• 「この記事は約何分で読めます」（読む時間）を表示する設定方法
• タグの使い方とチェックボックス設定方法（ブログ初心者向け）
• パンくずリストの設定のやり方
• 超簡単！サイトマップの作り方（ブログ初心者向け）
• ヘッダーにグローバルメニューを表示させる方法