【Cocoon／カスタマイズ】サイドバーにアイコンボックスを表示させる

こんにちは、まちゃりさです。

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

「アイコンボックス」は、このようなリンク付きの画像のことです。

私は、このように

の4種類を設定しています。

画像をクリックすれば、それぞれのリンクに飛べるようになっています。

まちゃりさ

視覚的な操作ができるので、便利です！

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

まちゃりさ

最後まで一緒に頑張りましょう！！

それでは、どうぞ！

事前準備①　イメージの確認

事前準備の1つ目です。

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

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

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

奇数個だと見栄えが悪くなるので、偶数個にするのがおすすめです。

まちゃりさ

「よくわからない」という方は、私が作成した通りに真似しても、もちろんOKです。

↑目次に戻る

事前準備②　表示オプション設定

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

ワードプレス管理画面から、[外観]→[メニュー]を選択します。

[表示オプション▼]を選択し、[カスタムリンク]と[CSSクラス]にチェックを入れておきます。

↑目次に戻る

事前準備③　Font Awesome のバージョン確認

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

Cocoonのデフォルトは「Font Awesome4」（バージョン4）になっています。

私は「Font Awesome5」（バージョン5）を使用しています。

自身のFont Awesomeｍのバージョンを調べるには、[Cocoon設定]→[全体]→[サイトアイコンフォント]を確認してください。

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

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

まちゃりさ

これで準備OKです！

↑目次に戻る

メニューの作成

それでは、実際にアイコンボックスを作成していきましょう。

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

↑目次に戻る

メニュー項目の追加

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

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

まちゃりさ

今回は、それぞれの設定方法を、3つにわけてご紹介していきます。

①ホーム画面の設定

まず、「ホーム」の設定です。家のマークの部分です。

先ほど作成した「メニュー」を開きます。

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

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

入力後、「メニューに追加」をクリックします。

↑目次に戻る

②カテゴリーの設定

次に「カテゴリー」を設定します。これら4つの部分です。

[メニュー項目を追加]の「カテゴリー」から、好きなカテゴリーにチェックを入れ、「メニューに追加」をクリックします。

↑目次に戻る

③固定ページの設定

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

今回は、「プロフィール」と「サイトマップ」を追加します。こちらです。

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

最後に、「メニューに追加」をクリックします。

↑目次に戻る

アイコン画像の設定

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

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

「CSS class（オプション）」にアイコン画像のCSSを入力します。

これは、Font Awesome5のアイコンページです。

好きな画像を検索するか、スクロールして選びます。

画像を選び、クリックします。

<i class=”以下に書かれている部分を、コピーします。

<i class=”以下の拡大画像は、こちらです。

この画像の例だと、下の赤枠部分をコピーします。

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

参考ちなみに、私が使用している画像のCSSは、以下のとおりです。

（ホーム）

「ホーム」　fa fa-home

（カテゴリー１）

「すてる」　fa fa-trash

（カテゴリー２）

「そうじ」　fa fa-pagelines

（カテゴリー３）

「かたづけ」　fa fa-inbox

（カテゴリー４）

「せいかつ」　fa fa-child

（プロフィール／固定ページ）

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

（サイトマップ／固定ページ）

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

「ナビゲーションラベル」を変えることで、「表示名」を変えることも可能です。

最後まで設定したら、[メニューを保存]をクリックします。

まちゃりさ

これで80%終了！あと少しです！

↑目次に戻る

ウィジェットの設定

作成したメニューをサイドバーの「ウィジェット」に設定していきます。

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

左側から「[C]ボックスメニュー」を探し、右側にある「サイドメニュー」へ向かってドラック&ドロップします。

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

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

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

[save]を押し、[完了]を押して閉じます。

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

実際に画面で確認してみましょう。

まちゃりさ

アイコンメニューのサイドバーへの設定は以上です！お疲れさまでした！！

↑目次に戻る

他の活用例

アイコンボックスメニューは、投稿本文下などにも入れることができます。

好きな場所に設置して、ブログサイトの回遊率を上げることができます。

↑目次に戻る

まとめ：【Cocoon】サイドバーにアイコンボックスを表示させる手順！

いかがでしたか？

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

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

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

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

今回は無料のアイコン画像を指定する手順を紹介しましたが、自分で準備した画像を指定することも可能です。

色々試しながら、一緒にすてきなブログサイトを作っていきましょう。

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

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

参考

本記事は、峠さんの記事（【Cocoon】サイドバーカスタマイズ！カテゴリーのボックスメニューは意外と難しくない）を参考に作成しています。