【Cocoon】ボックスメニューでサイドバーにカテゴリを表示させる方法

ここな♡
ここな♡

おしゃれなブログ作りには欠かせないのが「ボックスメニュー」です。
初心者の方でも、アイコン付きで簡単に作成できる方法をご紹介します!

こんな方に読んでほしい
  • サイドバーのカテゴリをおしゃれにカスタマイズしたい
  • トップページを目立たせて、訪問者の印象に残るようにしたい
  • サイドバーを見やすくしたい

アイコンを使用するための事前準備

出典:Font Awesome
るな♡
るな♡

まず、ボックスメニューでアイコンを使用するための準備をしましょう!

使用するのは、無料で利用可能なアイコンフォント「Font Awesome」です。

Cocoonでは「Font Awesome」と「Font Awesome」の2つのバージョンがあるため、自身の設定がどちらになっているか確認する必要があります。

Font Awesomeのバージョン確認方法

[Cocoon設定]→[全体]→[サイトアイコンフォント]の順に確認する。

バージョンに応じて使用するアイコンが異なりますので、どちらで設定したか覚えておいてください。

ちなみに、私は「Font Awesome」を使用しています。
バージョンを変更するには、お好きな方を選んで左下にある「変更をまとめて保存」をクリックで設定が完了します。

るな♡
るな♡

これで、アイコン使用の準備はOKです!

表示オプション設定の確認

  1. [外観]→[メニュー]を選択し、右上にある[表示オプション▼]をクリックする。
  2. 【画面上の要素】の中から【カスタムリンク】と【CSSクラス】にチェックを入れる。
るな♡
るな♡

表示オプション設定はこれでOKです!

メニューの作成

ここな♡
ここな♡

確認が終わったら、さっそく作成に入っていきます。
一緒に頑張りましょう!

メニュー作成の手順
  1. ワードプレス管理画面の【外観】→【メニュー】を選択。
  2. 【新しいメニューを作成しましょう。】をクリックする。

3. 新しくメニューを作成する画面が開いたら、【メニュー名】に名前を入力。
4. 入力が完了したら、【メニュー作成】をクリックする。

ボックスメニュー 項目の追加

るな♡
るな♡

続いて、メニューの項目を追加していきましょう!

私が設定しているメニュー項目は
  • ホーム画面
  • カテゴリー(4つ)
  • プロフィール


るな♡
るな♡

メニューの数は偶数個にした方が見栄えが良くなりますよ!

今回は、私のボックメニューの項目を例に設定方法をご紹介していきます。

1.ホーム画面の設定

ここな♡
ここな♡

まずは、家のマーク部分である「ホーム」の設定をしていきます。

ホーム設定の手順
  1. 【メニュー項目を追加】より【カスタムリンク】を選択。
  2. 【URL】にサイトのトップページアドレスを入力する。
  3. 【リンク文字列】に、メニュー名を入力する。
  4. 上記の入力が終了したら、【メニューに追加】をクリックする。

【メニューに追加】をクリックした後、右側の【メニュー構造】に反映されていることを確認してください。

ホームの項目があればOKです!

2.カテゴリーの設定

るな♡
るな♡

次に、「カテゴリー」を4つ設定していきます。

カテゴリー設定の手順
  1. 【メニュー項目を追加】より【カテゴリー】を選択。
  2. 表示させたい「カテゴリー」にチェックを入れて、【メニューに追加】をクリックする。
  3. 【メニュー構造】に反映されていればOK。
るな♡
るな♡

カテゴリー項目の【すべて表示】を選択すれば、一覧が表示できます。

3.プロフィールの設定

ここな
ここな

次に、プロフィールを設定していきます。

プロフィール設定の手順
  1. 【メニュー項目を追加】より【固定ページ】を選択。
  2. 表示させたいページ(プロフィール)にチェックを入れて、【メニューに追加】をクリックする。
  3. 【メニュー構造】に反映されていればOK。

ボックスメニュー アイコンの設定

るな♡
るな♡

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

アイコン設定の手順
  1. 【メニュー構造】に追加した項目の【▼】をクリックする。
  2. 詳細ページが開くので、【CSS class(オプション)】にアイコンのCSSを入力。

ここで、事前準備で確認した「Font Awesome」のバージョンにあわせたアイコンを公式サイトより選んで設定していきます。

Font Awesome4の場合

https://fontawesome.com/v4/icons/←こちらから

Font Awesome5の場合

https://fontawesome.com/v5/search?m=free←こちらから

ここな♡
ここな♡

今回は、「Font Awesome5」のバージョンを例に見ていきましょう!公式ページを開くとこのページが出てきます。

Font Awesome5の公式サイト
アイコン検索方法
  • 自身が設定したメニュー項目に合いそうなアイコンをイメージ。
  • 【ホーム】では家マークを設定したいので、「home」と検索する。
  • 検索はすべて英語での入力となります。(日本語には対応しておりません。)
CSS貼り付けの手順
  1. 検索して出てきた「home」のアイコンを選択する。
  2. アイコンのhtmlコードが表示されるので、緑色のCSS部分のコード(fas fa-home)をコピーする。
  3. コピーしたコードを【CSS class(オプション)】に貼り付ければOK。
るな♡
るな♡

他のメニュー項目も同様にCSSを入力してみましょう!

各種設定が終わったら、【メニューを保存】を忘れずに!
また、【ナビゲーションラベル】でメニュー名が変更できます。

私が設定しているアイコンのCSSコードはこちら

【home】(fas fa-home

keyboardfas fa-keyboard

【pagelines】(fab fa-pagelines

【video】(fas fa-video

【dog】(fas fa-dog

【user】(fas fa-user

Font Awesome5のCSSを入力してもアイコンが表示されないという方へ
【Cocoon】Font Awesome5のアイコンが表示されない原因と解決法
Font Awesome5のアイコンを使いたいけど、コードを貼り付けても何も表示されないとお困りの方。これには考えられる原因がいくつかあります。うっかり設定などを見落としていることがほとんどですので簡単に解決できるかもしれません。

ウィジェットの設定

ここな♡
ここな♡

いよいよ最終段階です!
作成したメニューをサイドバーに設定していきましょう。

ウィジェット設定の手順
  1. 【外観】→【ウィジェット】を選択する。

2. 左側から[C]ボックスメニューを探し、右側にある【サイドバー】の枠内へドラック&ドロップする。

 3. 「[C]ボックスメニュー」右側の【▼]をクリックし、設定画面を開く。

 4. 【タイトル】に「メニュー」などのお好きな文字を入力する。

 5. 【メニュー名】は、先ほど作成した「ボックスメニュー」を選択する。

 6. 【保存しました】をクリック後、【完了】で画面を閉じる。

もこ♡るな
もこ♡るな

これでサイドバーにボックスメニューが表示されましたよ。
お疲れ様でした!

まとめ:【Cocoon】ボックスメニューでサイドバーにカテゴリを表示させる方法

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

ボックスメニューを設定したことにより、一気にサイト感が出ました。
カテゴリ表示も見やすくなるので、クリック率アップにも繋がります。

他にも、WordPressテーマ【Cocoon】に関する記事がございますので、ぜひご参考にしていただければ幸いです。

一緒に素敵なブログサイトを作っていきましょう!

合わせて読みたい!Cocoon初心者さん向けの記事
【Cocoon】ブログのヘッダーに作成したロゴ画像を設定する方法
ヘッダーロゴ画像はブログの顔となる部分ですよね。ヘッダー設定では、自身で作成したロゴ画像を貼り付けてブログを目立たせることが出来ます。ブログへ訪問してくれた方の印象に残るようにするために欠かせない部分ですので、ぜひ設定してみてくださいね。
【Cocoon 初心者向け】ブログのロゴを無料で簡単おしゃれに作成する方法
ロゴ作成でお困りのあなたに、無料で簡単おしゃれに作成できるツールをご紹介します。 ブログの顔ともなる重要な部分ですので、印象に残るようオシャレに仕上げたいですよね。

コメント