「ボックスメニュー」ウィジェットの使い方

ウィジェット
この記事は約2分で読めます。

Cocoon 2.0.7にて「ボックスメニュー」がウィジェットでも利用できるようになりました。

ボックスメニューショートコードを利用せずとも、ウィジェットを放り込んで設定するだけで手軽に利用できるようになりました。

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

ボックスメニューを利用するとこんなことができる

サイドバーで使用した場合はこんな感じで2列になります。

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

本文中で利用した場合は、こんな感じで4列になります。

ボックスメニュー(本文中)

コンテンツ上部・下部で表示した場合は、こんな感じで6列になります。

ボックスメニュー(コンテンツトップ・ボトム)

キーカラーを変更すると、色が反映されます。

キーカラーを変更したボックスメニュー

以下のように独自画像を指定してメニューも作成できます。

ボックスメニュー(画像アイコン)

画像アイコン FLAT ICON DESIGN

スポンサーリンク

ボックスメニューを利用する主な手順

ボックスメニューを利用するための主な手順はこれだけ。

  1. WordPressメニューを作成する
  2. ボックスメニューをショートコードで呼び出す

大まかな設定方法はこれだけです。以下で詳しく方法を説明します。

WordPressメニューを作成する

メニューの作成は、WordPressのグローバルナビの作成方法と同じです。

まずはWordPress管理画面から「外観→メニュー」を選択します。

外観からメニューを選択する

新規メニューの作成

メニュー画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。

メニュー画面で新規メニューの作成

「メニュー名」を入力して「メニューを作成」ボタンを押します。

メニューでボックスメニューを作成

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

表示オプションからCSSクラス等説明を有効化

メニュー項目の追加

「メニュー項目を追加」からナビカードを作成したいメニューを選択していきます。

メニュー項目を追加からメニュー作成

メニューの追加例がこちら。

ボックスメニューのメニュー構造例

個別メニューの設定を行う

次に個々のメニューに対して「タイトル(ナビゲーションラベル)」、「アイコン(CSS class)」、「サブキャプション(説明)」を入力します。

入力例がこちら。

ボックスメニューの個別メニューの入力例

  1. 「ナビゲーションラベル」にタイトルを入力してください
  2. 「CSS class」にアイコンフォントのクラス名を入力します(Font Awesome4、Font Awesome5)
  3. 「説明」にサブメニューキャプション(サブタイトル)を入力してください

Font Awesomeアイコンの入力例

Font Awesomeアイコンは、4でも5でも入力できます。

ただしCocoon設定の「全体」タブにある「サイトアイコンフォント」の設定に依存します。

サイトアイコンフォントの設定に依存

上記の設定で、Font Awesome4利用するか、Font Awesome5を利用するか切り分けてください。

Font Awesome4でアイコンを設定する

Font Awesome4でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

個別ページからアイコンのクラス名をコピーします。

Font Awesome4のクラス名を取得する

あとは、メニューの「CSS class」部分に貼り付けます。

CSS classに貼り付ける

Font Awesome5でアイコンを設定する

Font Awesome5でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

個別ページからアイコンのクラス名をコピーします。

Font Awesome5の個別ページからクラス名をコピーする

あとは、メニューの「CSS class」部分に貼り付けます。

Font Awesome5クラスをCSS classに貼り付ける

画像をアイコンとして利用する場合

画像をアイコンとして利用する場合は、「メディア → 新規追加」から画像をアップロードしておいてください。

アイコン用画像のアップロード

次に「外観 → メニュー」を開きます。その後「表示オプション」から「タイトル属性」を選択してください。

表示オプションからタイトル属性を選択

アップロードした画像からURLをコピーします。

アップロードアイコンからURLを取得

その後、個別メニューの設定項目で「タイトル属性」に対してURLを入力してください。

画像はアイコンメニューの入力

  1. 「ナビゲーションラベル」にタイトルを入力してください
  2. 「タイトル属性」に画像アイコン用のURLを入力してください
  3. 「説明」にサブメニューキャプション(サブタイトル)を入力してください
「タイトル属性」は、本来HTML要素のtitle属性の値を入れるためのものだとは思いますが、今回は画像のURL用として利用しています。本来の使われ方ではないのはご容赦ください。

メニューの保存

上記までのような設定を個々のメニューに対して行い、最後に「メニューを保存」ボタンを押してください。

ボックスメニューの保存

スポンサーリンク

ウィジェットの設定

ウィジェットの設定はWordPress管理画面の「外観 → ウィジェット」から行います。

「ボックスメニュー」ウィジェットを表示したいウィジェットエリアにドラッグ&ドロップで移動します。

ボックスメニューウィジェットをウィジェットエリアに設置する

あとは作成したメニューを「メニュー名」ドロップダウンリストから選択します。

ボックスメニューウィジェットからメニュー名を選択する

表示例

「ボックスメニュー」ウィジェットを「サイドバーウィジェットエリア」に入れた場合はこんな感じの表示になります。

サイドバーにボークスメニューウィジェット入れた表示で

「コンテンツトップウィジェットエリア」に入れた場合は、以下のように6列になります(モバイルでは2列)。

ボークスメニューウィジェットをコンテンツトップウィジェットエリアに入れた場合

実際の動作などは、以下のフォーラムページを参照してみてください。

Cocoon フォーラム
Cocoon ディスカッション掲示板

まとめ

ボックスメニューショートコードをウィジェット化したことにより、ショートコード作成という手間をかけるとも、ボックスメニューを使えるようになりました。

ただ、ボックスメニューを本文中に表示させるには、ショートコードを利用したほうが便利かと思います。

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

ボックスメニューは、ヒートマップツールなどで見ても、とてもタップ(クリック)されやすいメニューになります。

上手に利用利用すれば、分かりやすいサイトになり、サイト回遊率もアップも図れる機能化と思います。

参考

今回のボックスメニューのデザインは、ぽんひろ.comを運営されているぽんひろさんの以下の記事を参考にさせていただきました。

ボックス分けされたナビを作る!回遊率をアップしよう!
区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるようにしました!

ぽんひろさんは、Cocoonのseasonスキンの作者でもあります。

Cocoonのカスタマイズ記事も多数書いておられます。

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。
ウィジェット
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

コメント テーマの質問はフォーラムへ

タイトルとURLをコピーしました