
Cocoonで運営する当ブログ。
20年5月のGoogleアップデートで撃沈したアクセスも、おかげさまで徐々に戻ってきましたm(__)m

ただ課題もある!
直帰率がべらぼうに高い!
ユーザーがサイトを訪れたとき、最初にたどり着いたページだけを見てそのサイトを去った割合のこと。
下の写真が、近1週間の当ブログ、アクセストップ10記事の直帰率です。
(写真はGoogleアナリティクス)

88%は、ちょっと帰し過ぎですね。。。
まぁアフィリエイトやる分には、一概に「直帰率高い=ダメ」ではないですが、
もっと記事を読んでってほしいなと。
そこで一つの施策として、サイト内の巡回を促すウィジェットを探すと、ありました。
やはりCocoonには、ありました!
アイコン付きのボックスメニュー。
こんなやつです。


Cocoon制作者のわいひらさんも公式サイトで、ボックスメニューの役割をこう書いています。
ボックスメニューは、ヒートマップツールなどで見ても、とてもタップ(クリック)されやすいメニューになります。
上手に利用すれば分かりやすいサイトになり、サイト回遊率のアップも図れる機能化と思います。
導入するしかないっしょ、ですね。
本記事では、Cocoonボックスメニューの導入手順を全画像つきで解説。
さらにカスタマイズ(コピペでOK!)で、クリック率を上げる策を打ちました。
Cocoonボックスメニューを取り入れたい方、サイト内を読者にもっと巡回してほしいと願う方、是非参考にしてみてください。
Cocoonボックスメニューを設置する

それではCocoonボックスメニューの作成から実装までを、順番にご説明します。
Cocoonボックスメニューを作成する
1:「新しいメニューを作成する」をクリック
「外観」→「メニュー」から「新しいメニューを作成する」を押します。


2:ボックスメニューと入力し、作成を押す
メニュー欄に「ボックスメニュー」と入力します。
入力後「メニューを作成」をクリック。

3:ボックスメニューを選択し、表示させたい記事やカテゴリーを選択する
メニュー一覧に「ボックスメニュー」が現れるので、プルダウンメニューから選択。

ボックスメニューに入れたい記事やカテゴリーを追加します。

4:個別メニューの設定:タイトル入力、アイコン挿入
表示オプションから、「cssクラス」と「説明」にチェックを入れる。

- 「ナビゲーションラベル」にタイトルを入力
- 「CSS class(オプション)」にアイコンのクラス名を入力(Font Awesome)
- 「説明」にサブタイトルを入力

Cocoonボックスメニューではアイコンの代わりに画像表示もできます。
ただボックス個々の画像スペースが小さいため、ごちゃつきを考えるとシンプルなアイコンがいいと思います。
※一応、画像の表示方法を説明しておきます。
表示オプションの「タイトル属性」にチェックを入れる→個別設定の「タイトル属性」に画像URLを入力する。(画像URLは、管理画面メディア→新規追加→アップロードで取得できます)
すべての個別設定を終えたら、メニュー側の作業は以上です。
Cocoonボックスメニューを設置する
ウィジェット設定で表示させる
「外観→ウィジェット」を開き、「ボックスメニュー」を任意の場所に挿入します。


下写真のように、挿入したい場所に表示されたら完了です!

Cocoonボックスメニューは、ウィジェットの挿入箇所によって、表示形式が以下のようになります。
- サイドバー→2列
- 本文→4列
- コンテンツ上部・下部→6列
当ブログはサイドバーに設定。
こちらの表示になりました。

うん、いいですね。
ただ、デザイン的に物足りない…。
ボックスメニュー設置の目的はクリックしてもらうことですから、もっと目を引かせたい!
なのでイジります!
Cocoonボックスメニューを「補色」カスタマイズ

目立たせるために、ボックスメニューの色合いをバシッと変えます。
余談ですが「補色」って知ってますか?
色には下記の十二色相環というモデルがあり、「補色」とは色相環の反対にある色を指します。

マーケティング会社の研究で、活発な補色を用いて購入ボタンや問い合わせボタンを作ると、クリックされやすくなる結果が出ています。
(例)当ブログのメインカラーが下記の紺系
メインカラーだ!メインカラーだ!メインカラーだ!
メインカラーに対する「補色」のボタンがこちら↓↓↓
クリック率アップのため「補色」の黄色系を意識して、
ボックスメニューのカラーを変えます。
結果から示すと、このようにしました。

うん、目引きますね。
このカスタマイズのコードを貼っておきます。
.box-menu {
background-color: #ffcc00;
border: 1px dotted #333;
color: #333;
box-shadow: inset 0 8px 0 rgba(255,255,255,0.2), inset 0 -6px 0 rgba(0, 0, 0, 0.05);
}
.box-menu .fas,.fab {
color: #333;
}
.box-menu .far {
color: #333;
}
.box-menu:hover {
box-shadow: inset 2px 2px 0 0 #333, 2px 2px 0 0 #333, 2px 0 0 0 #333, 0 2px 0 0 #333;
}
カラーはお好みで#のあとの数値を変えてください。
カラーコードは下記の原色大辞典さんをご参考にどうぞ。
アイコンは.fasやら.fabで指定してます。
ご自身が使用するFont Awesomeのクラス名によって、変更してください。

以上が、Cocoonのボックスメニュー作成からカスタマイズです。
これで、
回遊率アップ!
直帰率ダウン!
確定ですw
Cocoonボックスメニューのカスタマイズでクリック率は?


「で、Cocoonボックスメニューを導入してどうなの?」
って話ですが、直帰率は下がってます(/・ω・)/
だた、まだボックスメニューを導入して日が浅いため、データが溜まってから効果のほどはしっかりお伝えします。
アナリティクスの直帰率数値だけだと、それが本当にボックスメニューのおかげなのか判然としないためヒートマップを使用します。
クリック率の計測には「Aurora Heatmap」というプラグインが便利です。

「Aurora Heatmap」を入れるだけで、多くクリック(タップ)されている箇所を表示してくれます。
この「Aurora Heatmap」と「Googleアナリティクス」で、
Cocoonボックスメニュー導入による直帰率への効果が見えます。
繰り返しですが、データがたまるまで、しばしお待ちを。
当ブログからボックスメニューがさらりと消滅していたら…察してくださいm(__)m

できない!
コードを見るだけで、拒否反応がすごいんだァァァ
Cocoonはユーザーが育てるテーマなので、思い通りに設計するには
多少のプログラミング知識が必要になります。
対応策をご提案するなら
【1】カスタマイズが容易な有料テーマに変更する
【2】プログラミングを学習する
のいずれかです。
もちろん【1】の方が簡単なんですが、プログラミングがわかるとCocoonは100倍楽しくなります。
僕は「ここの色を変えたい」みたいな感じから学習を始めて、今ではコードを書くことも仕事となりました。そんな難しいもんじゃないです、実際。
どうせなら【2】の「学び」に投資した方がいいと思いませんか?
独学は、おすすめしません。
僕が1万回絶望したから…。
コロナのご時世なので、プログラミング学習するなら
オンライン完結のTechAcademy (テックアカデミー)がおすすめです。
Cocoonボックスメニューを”イケメン”カスタマイズ→「帰さないゼ」仕様にした:まとめ

本記事でボックスメニューを導入したCocoonユーザーの
回遊率や直帰率が改善されれば幸いです。
今回は、この辺で!
あっ、、、帰さないゼ!
コメント待ってます!