WordPress無料テーマ「Cocoon」を使うなら周遊率向上のためにボックスメニューを設定しよう

どうもこんにちわ、Studio Argusです。

本日は、WordPress無料テーマ「Cocoon」をご利用の方へ「ボックスメニュー」のオススメ記事となります。

ボックスメニューというのは、Cocoonの機能として実装されているもののひとつになります。

こちらは、Cocoon公式サイトの「「ボックスメニュー」ウィジェットの使い方」より引用させて頂いたサンプル画像となります。

このように、ボックスメニューをウィジェットを利用して設置すると、アイコン＋メニュー名＋説明といった形で、目立ちやすいメニューを設置することが出来ます。

既に使っているよ！という方も多くいらっしゃるかもしれませんが、今回のポイントは「スマホで表示させているかどうか」です。

サイドバーに設置したボックスメニューは、スマホで閲覧した際にはスライドメニューに格納され、通常のページには表示されません。それが非常にもったいない、とわたしは思います。

こちらは、わたしが運営するハンドメイドブログの１記事を「Aurora Heatmap」というプラグインで確認したものです。

記事内のどこが最もタップされたのか、可視化するプラグインになりますが、ご覧の通りボックスメニューはタップされる回数が多いことが分かります。

スライドメニューもタップはされますが、それなり、といった回数です。

閲覧者にとって、パッと見てすぐに分かるメニューがあり、なおかつタップしやすいボックスメニューはスマホでの閲覧の際にも便利なのだ、と分かります。

スマホ閲覧の際にボックスメニューを表示させるには、ウィジェットを利用してコンテンツ上部に固定表示させたり、ページにショートコードを挿入して表示させたり、といった方法があります。

詳しいやり方は、公式サイトの「「ボックスメニュー」ウィジェットの使い方」をご覧ください。上手に使えば、とても有効なメニューになるはずです。

---

ただし、ボックスメニューはとても有効なメニューですが「Cocoonっぽさ」が分かりやすいものともなります。

もちろん、デフォルト状態でも充分に使えるデザインになっていますが、ブログのイメージとは離れてしまう可能性も、なくはありません。

デザインをカスタマイズするには、CSSを編集する必要があります。

現在わたしが作成しているハンドメイドブログの新しいデザインでは、このようにサイトイメージに合わせてボックスメニューのデザインを大きく変更してあります。

こちらはウィジェットで「コンテンツ上部」に挿入したボックスメニューです。トップページだけでなく、各ページに表示されますので、スマホ閲覧での周遊率を高める効果が期待出来ます。

（スマホ閲覧では２列表示するか３列表示するかは考え中です）

CSSで頑張れば、このようなカスタマイズも可能となっています。

Cocoonカスタマイズはさまざまな箇所で可能ですが、ボックスメニューのカスタマイズも出来ますので、もしご希望の方がいらっしゃいましたら、是非ご相談ください。

サイトイメージに合わせつつ、スマートフォン閲覧で周遊率を高めるボックスメニューのカスタマイズを承ります。