Cocoonでは「ボックスメニュー」というコンテンツメニューが存在し、簡単に設置することができます。
以下がボックスメニュー（標準）です。
このようにボックスメニューではコンテンツに誘導するようなメニューを作成することができます。
しかし、見て判断できる通り、デフォルト（元々）は「★」のアイコンで揃えられています。
このアイコンのままでは、コンテンツ同士が似通ってしまい、コンテンツページに上手く誘導するという意味では不十分です。
そこで、コンテンツの１つ１つのアイコンを変更し、それぞれのコンテンツの違いを表現したいと思います。
ボックスメニューの設定方法
ボックスメニューの設定方法は以下の通りです。
- メニューを編集
- ウィジェットからボックスメニューを追加
以上の２つの作業でボックスメニューを表示することができます。
メニューの設定
メニューからボックスメニューの内容を編集します。
外観から「メニュー」をクリックします。
メニューに追加したいページにチェックを付け、メニューに追加します。
メニュー名は分かりやすいようにボックスメニューにしましょう。
ウィジェットの設定
メニューから「ウィジェット」を編集します。
外観から「ウィジェット」をクリックします。
左側のメニューに「ボックスメニュー」があることを確認します。
左枠のボックスメニューをドラッグして右側の表示させたい場所へ移動させます。
メニュー名は、前項目で作成したメニュー「ボックスメニュー」を選択しましょう。
筆者は「サイドバー」に表示させています。
設定すると以下のようなボックスメニューになります。
ボックスメニューのアイコン変更方法
ボックスメニューのアイコンの変更は「外観」の「メニュー」から行います。
以下は手順です。
- 左メニューから「外観」をクリック
- 外観から「メニュー」をクリック
- 右ボックス内からアイコンを変更したいコンテンツを選択
- CSS class (オプション)にアイコン名を入力
以上の操作でボックスメニューのアイコンを変更することができます。
左メニュー「外観」から「メニュー」を選択
左メニュー「外観」から「メニュー」をクリックします。
メニュー構造からコンテンツを選択
右ボックス内（メニュー構造）からアイコンを変更したいコンテンツを選択します。
アイコン名を入力する
CSS class（オプション）内に好きなアイコンの情報を入力します。
- Prefix（接頭辞）
- クラス
を入力します。
Prefixはクラスの頭に付ける文字です。
以下のサイトにアイコンのPrefix（プレフィックス）とクラス情報が載せられているので好きなアイコンを利用しましょう。
アイコンを変更すると
アイコンを変更すると以下のようになります。
元々のデザインの「★」のアイコンが変化しました。
幅広いアイコンが用意されているので、コンテンツの内容に沿ったアイコンを選べるはずです。
また、ボックスメニュー・アイコンに関しては以下のリンクが役に立ちます。
ボックスメニューを縦に表示する
アイコンの色を個別に設定する
ボックスメニューにアイコンを設定しよう！
Cocoonを利用すれば、ボックスメニューをコンテンツメニューとして利用することができます。
標準でボックスメニューは用意されているので設置するだけでボックスメニューは機能します。
また、サイトに沿ったカスタマイズも簡単にできるので、Cocoonを利用されている方はボックスメニューの利用を検討してみてはいかがでしょうか。
コメント