Cocoon＊ボックスメニューの使い方・アイコンや画像をメニューボタンに

2021-12-122021-12-13

ブログの回遊率をあげたいなぁ

もっとカテゴリーなどを見やすくしたい！

『ブログは、まずは見た目よりも中身だ』と言いますが、やっぱり見た目も良くしたいですよね。

どんなカテゴリーがあるか、どんな内容が書かれているかがパッと分かれば、ブログの回遊率アップも期待できます。

そこで今回は、回遊率向上に繋がる機能の一つ、ボックスメニューについて説明します。

ボックスメニューとは、Cocoonテーマの機能の一つで、サイト上部やサイドバーに表示できる以下のようなメニューのことです。

この記事を読めば、オリジナルのメニュー欄を簡単に作ることができますよ。

ボックスメニューの使い方

早速、ボックスメニューの設定方法と設置方法を説明します。

1
外観のメニューを選択し、新しいメニューを作成する
2
メニュー名を付けて、メニューを作成する

今回はボックスメニューという名前で保存しました。
3
表示オプションを設定する

右上の表示オプションを開きます。

CSSクラスと説明にチェックを入れて保存しましょう。

※自分で用意した画像をアイコンとして使いたい場合は、タイトル属性にもチェックを入れましょう。
4
メニューに入れるページを選択する

「メニュー項目を追加」の欄から、追加したい記事を選び、「メニューに追加」を選択します。

追加するとメニュー構造に追加されるので、確認しましょう。
5
各ページのアイコンを設定し、メニューを保存する
メニュー構造に追加した記事やカテゴリーの▼をクリックすると、ボックスメニューの表示に関する設定ができます。

設定内容はこちらです。
- ナビゲーションラベル…タイトル
- CSS class…アイコン
- 説明…サブタイトル
- （タイトル属性…画像アイコン）
CSS classで設定するアイコンは、Font Awesomeというサイトから取得しましょう。

使いたいアイコンのコードをコピペしましょう

※Cocoon設定の全体タブ内のサイトアイコンフォント欄で「Font Awesome 4」「Font Awesome 5」かを選択し、それぞれ対応したアイコンを使用しましょう。

※Font Awesome 6が出たようですが、まだ対応していないようです(そのうち対応するでしょう。

画像アイコン設定方法はこちら

１．あらかじめ使用したい画像をダウンロードしておく
メディアの新規追加を選択します。

ファイルを選択し、追加しましょう。

２．画像アイコンを設定したい記事に画像のURLを貼る
保存した画像のURLはメディアのライブラリから確認できます。

＜URL確認方法＞
使用したい画像を選択します。

選択すると、画像の詳細を見ることができ、ファイルのURLも確認できます。

このURLをコピーして、タイトル属性欄に貼り付けましょう。
6
メニュー保存後、表示したい場所にショートコードを貼り付ければOKです。

今回は、サイドバーに設定しました。

貼り付けるショートコードは以下になります。

[[box_menu name=“メニュー名”]]

今回は、ボックスメニューという名前をつけたので、以下のように設定しました。

[[box_menu name=“ボックスメニュー”]]