SWELLへの移行方法はこちら!CLICK!

[ブログ初心者必見!] -Cocoonでボックスメニューの作成方法/設置方法を解説-

[Cocoon]ボックスメニューの作成方法/設置方法を解説!

こんにちは!まったりです。

“Cocoon”を使用しているブロガーさんの中には

悩む人

最近「直帰率」が高すぎる…。どうしたらたくさんのページを見てもらえるかな。

と悩んでいる方も多いと思います。

この直帰率を下げるためにおすすめな方法の一つに

『ボックスメニューの作成』

が挙げられます。

本記事ではこのような悩みを解決するために

「Cocoonにおけるボックスメニューの作成方法」

について詳しく解説します。

本記事で学べること
  • ボックスメニューとは何か
  • Cocoonにおけるボックスメニューの作成方法/サイドバーへの設置方法
作者情報
  • 理系大学院生ブロガー
  • まったりさんブログ運営中
  • 情報・ネットワーク関係の研究中

▼Twitterはこちら▼

\\本ブログは”SWELL”を使用しています//

  • ブロックエディタ対応で初心者も扱いやすい
  • シンプルで綺麗なデザイン
  • テーマ乗り換えサポートプラグインあり
  • サポートが充実

▼公式サイトから購入可能です▼

目次

1. ボックスメニューとは

ボックスメニューとは、以下の赤枠で囲まれているもののことを指します。

ブロックメニュー 例

ブロックメニューを置くことで

  • 読者がブログ内を巡回しやすくなる
  • パッと見てメニューを押したくなる

といった効果があるので直帰率を下げる手助けになります。

次では

  • ボックスメニューの作成方法/設置方法

について詳しく解説していきます。

2. ボックスメニューの作成方法/設置方法

ここでは

  • ボックスメニューの作成方法
  • ボックスメニューの設置方法(サイドバー)

についてそれぞれ順に解説していきます。

1) ボックスメニューの作成方法

ボックスメニューを作成する際は「外観」→「メニュー」を選択します。

WordPress管理画面

次にメニュー画面から「新しいメニューを作成しましょう。」を選択してください。

メニュー画面

続いて、ボックスメニューを作成していきます。

ここでは「メニュー名」を適当に入力し右下にある「メニューを保存」を選択します。

まったり

今回はメニュー名を「ボックスメニュー」としています。

メニュー作成画面

ボックスメニューを作成した後は、メニューで表示するアイテムを選択します。

画面左側にある「メニュー項目を追加」からボックスメニューで表示したい項目を選択して「メニューに追加」を押してください。

まったり

私の場合は「カテゴリ」「お問い合わせ」「自己紹介ページ」を選択しています。

メニュー作成画面

続いて画面右上にある「表示オプション」を選択して

  • タイトル属性
  • CSSクラス
  • 説明

にチェックを入れてください。

メニュー作成画面

ここからは各項目の詳細設定を行います。

(1) 自前の画像を使用する場合

以下の項目をそれぞれ入力してください。

  • ナビゲーションラベル:項目のタイトル
  • タイトル属性:メニュー画像のURL
  • 説明:項目下に表示するサブタイトル的なもの
メニュー作成画面
メニュー参考例

「タイトル属性」の部分に入力する画像のURLは「メディア」→「ライブラリ」の中から使用する画像を選択してください。

そこから「URLをクリップボードにコピー」を選択したものをそのまま貼り付けてください。

メディア画面

(2) Font Awesomeを使用する場合

以下の項目をそれぞれ入力してください。(「CSS class」以外は上と同じ)

  • ナビゲーションラベル:項目のタイトル
  • CSS class:FontAwesomeからコピペ
  • 説明:項目下に表示するサブタイトル的なもの

Font Awesomeは

  • Font Awesome 4
  • Font Awesome 5

の二つがあります。

WordPress管理画面の「Cocoon設定」から「全体」を選択して自分のブログではどちらを使用するか選択してください。

Font Awesome 4 の場合は以下のサイトから使用したい画像を選択し「fa fa-○○」の部分をコピーして「CSS class」に貼り付けてください。

Font Awesome 4 画像選択画面

Font Awesome 5 の場合は以下のサイトから使用したい画像を選択し「fas fa-○○」の部分をコピーして「CSS class」に貼り付けてください。

Font Awesome 5 画像選択画面

以上の内容を全ての項目に入力し終わったら画面右下にある「保存する」を選択してメニュー作成は終了です。

メニュー作成画面

次からはボックスメニューの設置方法について解説します。

2) ボックスメニューの設置方法

ここからはサイドバーにボックスメニューを設置する方法について解説します。

はじめにWordPress管理画面から「外観」→「ウィジェット」→「ボックスメニュー」を選択します。

ウィジェット選択画面

「ボックスメニュー」内で「サイドバー」を選択して右下にある「ウィジェットを追加」を押してください。

ウィジェット選択画面

ウィジェットを追加したらボックスメニュー ウィジェットの詳細設定を行います。

追加したボックスメニューを選択し、その中の項目を入力します。

入力する項目の概要は以下のとおりです。

  • タイトル:ボックスメニュー上部に表示するタイトル
  • メニュー名:先ほど作成したボックスメニュー
まったり

私の場合はタイトルを「カテゴリ一覧」にしています。メニュー名は先ほど作成した「ボックスメニュー」です。

それぞれの項目を入力したら右下にある「Save」を押して保存してください。

ウィジェット選択画面

保存し終わったら、最後に自身のブログを表示してサイドバーを確認してみてください。

このように表示されていれば成功です!

私のボックスメニューはCSSカスタマイズをしているため色などがデフォルトのものとは異なります。

ボックスメニューのCSSカスタマイズ方法については別の記事で紹介しています。

▼ボックスメニューのCSSカスタマイズはこちら▼

3. 最後に

今回は

「Cocoonにおけるボックスメニューの作成方法/設置方法」

について詳しく解説しました。

ボックスメニュー を置くことでブログの直帰率を下げる手助けができるので直帰率で悩んでいるブロガーさんはぜひ設置してみることをお勧めします。

まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

\\本ブログで使用中のテーマ”SWELL”//

よかったらシェアしてね!

コメント

コメントする

目次
閉じる