このサイトでは、管理人であるままくまが、日常で起こった出来事をもとに、 皆さんに役立つ(?)であろう出来事をゆるっと発信していきます。

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

ブログ

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

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

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

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

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

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

サイドバーのボックスメニュー

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

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

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

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

    今回はボックスメニューという名前で保存しました。

  • 3
    表示オプションを設定する

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

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

    ※自分で用意した画像をアイコンとして使いたい場合は、タイトル属性にもチェックを入れましょう。

  • 4
    メニューに入れるページを選択する

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

    追加するとメニュー構造に追加されるので、確認しましょう。

  • 5
    各ページのアイコンを設定し、メニューを保存する

    メニュー構造に追加した記事やカテゴリーの▼をクリックすると、ボックスメニューの表示に関する設定ができます。

    設定内容はこちらです。

    • ナビゲーションラベル…タイトル
    • CSS class…アイコン
    • 説明…サブタイトル
    • (タイトル属性…画像アイコン)

    CSS classで設定するアイコンは、Font Awesomeというサイトから取得しましょう。

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

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

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

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

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

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

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

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

    このURLをコピーして、タイトル属性欄に貼り付けましょう。

  • 6
    メニュー保存後、表示したい場所にショートコードを貼り付ければOKです。

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

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

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

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

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

今回作成したボックスメニューは以下のように表示されます。

文字を読まなくても、パッとメニューを判断できるので、読者に優しいですね。

サイドバー以外にも、ヘッダー下や記事上部への設定もできるので、お好みの場所に設置してみてください。

その他おすすめのCocoon機能

Cocoonテーマには、ボックスメニュー以外にも回遊率を上げる機能はたくさんあります。

中でも私が『これは設定すると良いのでは?』と思ったおすすめ機能を3つ紹介します。

フロントページの表示変更

サイトのホームに記事が羅列されますよね。初期設定では、新着順に表示されるよう設定されていますが、カテゴリーごとに分けることもできます。

Cocoon設定のインデックスタブを選択し、設定しましょう。

サイトのホーム(フロントページ)の表示方法は5パターンから選択できます。

  • 一覧(デフォルト)
  • タブ一覧
  • カテゴリごと
  • カテゴリごと(2カラム)
  • カテゴリごと(3カラム

ちなみにこのサイトはタブ一覧表示になっているよ

また、記事の並び方も選択できます。

  • エントリーカード(デフォルト)
  • 大きなカード(先頭のみ)
  • 大きなカード
  • 縦型カード2列
  • 縦型カード3列
  • タイルカード2列
  • タイルカード3列

このサイトは、縦型カード2列で設定しているよ

サイトのホームは、記事に興味を持った方がサイトを回遊する際に必ず開くメイン画面です。最低限この設定は頭に入れておきましょう。

もっとかっこいいメイン画面にしたい!という方は、固定ページでメイン画面を作成する方法もあります。

興味がある方はこちらの記事もご覧ください。

ままくま
ままくま

CSSが分からなくても簡単に設定できる方法を紹介しているよ

カルーセル

カルーセルというのは、ヘッダー下に表示される自動で動くブログカードです。

これがカルーセル

カルーセルを表示させるだけでも、一気におしゃれなホームになります。

フロントページの表示方法の変更と同様にCocoon設を開き、カルーセルタブを選択して設定しましょう。

表示ページや内容、表示数や自動送りの設定など細かく設定できます。

※設定の保存ができない場合は、サーバーのWAF設定を切ってから保存してみてください。

カルーセルを設定すると、サイトスピードが低下する可能性があるので注意しましょう。

おすすめカード

今回紹介したボックスメニューと似た機能です。このサイトでいう以下のような画像のボタンです。

実際のものとは少し違っていますが。

ボックスメニューとの違いは、メニューボタン全体が画像であること。

ボックスメニューはアイコン画像を使用しますが、おすすめカードは1枚の画像がそのままメニューとなります。

自分のブログのデザインに合わせて使い分けたいですね。

似た機能だからどちらかで十分だと思うよ

おすすめカードについての記事も書いているので、興味があればご覧ください。

まとめ

今回はCocoonテーマの機能の一つである「ボックスメニュー」の使い方について紹介しました。

詳しい内容や注意点に関しては、以下の記事をご覧ください。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方
アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

cocoonは無料であるにもかかわらず、初心者でも簡単に見やすいページを作成できて良いですね。

皆さんも色々触って見やすいサイト設計を目指して見てください!

それではまた〜

コメント