【筆者体験ベース】おすすめ副業10選>>>

Cocoonボックスメニューを”イケメン”カスタマイズ→「帰さないゼ」仕様にした

Cocoonボックスメニューを設置する
とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。
※本記事にも触れてますが現在は、法人たててやっております。

Cocoonで運営する当ブログ。

20年5月のGoogleアップデートで撃沈したアクセスも、おかげさまで徐々に戻ってきましたm(__)m

グーグルアナリティクスPV遷移グラフ

ただ課題もある!
直帰率がべらぼうに高い!

直帰率とは

ユーザーがサイトを訪れたとき、最初にたどり着いたページだけを見てそのサイトを去った割合のこと。

下の写真が、近1週間の当ブログ、アクセストップ10記事の直帰率です。
(写真はGoogleアナリティクス)

直帰率データ画像

88%は、ちょっと帰し過ぎですね。。。

一般的にブログの直帰率は60〜90%とされてます。

まぁアフィリエイトやる分には、一概に「直帰率高い=ダメ」ではないですが、もっと記事を読んでってほしいなと。

そこで一つの施策として、サイト内の巡回を促すウィジェットを探すと、ありました。

やはりCocoonには、ありました

アイコン付きのボックスメニュー。
こんなやつです。

Cocoon公式サイトボックスメニュー1
Cocoon公式サイトより
Cocoon公式サイトボックスメニュー2
Cocoon公式サイトより

Cocoon制作者のわいひらさんも公式サイトで、ボックスメニューの役割をこう書いています。

ボックスメニューは、ヒートマップツールなどで見ても、とてもタップ(クリック)されやすいメニューになります。
上手に利用すれば分かりやすいサイトになり、サイト回遊率のアップも図れる機能化と思います。

導入するしかないっしょ、ですね。

本記事では、Cocoonボックスメニューの導入手順を全画像つきで解説。
さらにカスタマイズ(コピペでOK!)で、クリック率を上げる策を打ちました。

Cocoonボックスメニューを取り入れたい方、サイト内を読者にもっと巡回してほしいと願う方、是非参考にしてみてください。

Cocoonボックスメニューを設置する

Cocoonボックスメニューを設置する

それではCocoonボックスメニューの作成から実装までを、順番にご説明します。

Cocoonボックスメニューを作成する

1:「新しいメニューを作成する」をクリック

「外観」→「メニュー」から「新しいメニューを作成する」を押します。

外観からメニューを選択
新しいメニューを作成する

2:ボックスメニューと入力し、作成を押す

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

ボックスメニューと入力

3:ボックスメニューを選択し、表示させたい記事やカテゴリーを選択する

メニュー一覧に「ボックスメニュー」が現れるので、プルダウンメニューから選択。

ボックスメニューを選択

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

ボックスメニューに追加していく

4:個別メニューの設定:タイトル入力、アイコン挿入

表示オプションから、「cssクラス」と「説明」にチェックを入れる。

表示オプション
  1. 「ナビゲーションラベル」にタイトルを入力
  2. 「CSS class(オプション)」にアイコンのクラス名を入力(Font Awesome
  3. 「説明」にサブタイトルを入力
個別メニュー画像

アイコンはFont Awesome4、Font Awesome5でも入力可能ですが、Cocoon設定の「全体」タブにある「サイトアイコンフォント」の設定に依存します。

Font Awesome選択画面

※Font Awesomeの最新バージョンの6も、ほとんどのアイコンは使用できます。(Cocoonの設定はFont Awesome5)

Cocoonボックスメニューではアイコンの代わりに画像表示もできます。
ただボックス個々の画像スペースが小さいため、ごちゃつきを考えるとシンプルなアイコンがいいと思います。

※一応、画像の表示方法を説明しておきます。
表示オプションの「タイトル属性」にチェックを入れる→個別設定の「タイトル属性」に画像URLを入力する。(画像URLは、管理画面メディア→新規追加→アップロードで取得できます)

すべての個別設定を終えたら、メニュー側の作業は以上です。

Cocoonボックスメニューを設置する

ウィジェット設定で表示させる

「外観→ウィジェット」を開き、「ボックスメニュー」を任意の場所に挿入します。

ウィジェット画面
ボックスメニューウィジェット画面

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

ボックスメニュー挿入完了!

Cocoonボックスメニューは、ウィジェットの挿入箇所によって、表示形式が以下のようになります。

  • サイドバー→2列
  • 本文→4列
  • コンテンツ上部・下部→6列

当ブログはサイドバーに設定。
こちらの表示になりました。

ボックスメニュー、デフォルト画像

アイコンのカラーは、個々の指定するメーンカラーです。

うん、いいですね。
ただ、デザイン的にちょっとあっさりかなと。

ボックスメニュー設置の目的はクリックしてもらうことですから、もっと目を引かせたい
なので、イジります!

Cocoonボックスメニューを「補色」カスタマイズ

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のクラス名によって、変更してください。

Font Awesomeクラス画像

FontAwesomeは1アイコンに2つのクラスが指定されています。
2つ目のクラスが個別コードなので、こちらを適用させるのが他との干渉を防ぐには良策です。
僕はメンドイので、一気に指定できる.fasやら.fabを使いました^^;

以上が、Cocoonのボックスメニュー作成からカスタマイズです。

これで、

回遊率アップ!
直帰率ダウン!

確定です。

Cocoonボックスメニューのカスタマイズでクリック率は?

Cocoonボックスメニューのカスタマイズでクリック率は?

「で、Cocoonボックスメニューを導入してどうなの?」

って話ですが、直帰率は下がってます(/・ω・)/

だた、まだボックスメニューを導入して日が浅いため、データが溜まってから効果のほどはしっかりお伝えします。

アナリティクスの直帰率数値だけだと、それが本当にボックスメニューのおかげ・・・・・・・・・・・・なのか判然としないためヒートマップを使用します。

クリック率の計測には「Aurora Heatmap」というプラグインが便利です。

Aurora Heatmapプラグイン

1ページだけとか「無料」とは名ばかりのヒートマップツールが多いですが、「Aurora Heatmap」は無料でかなり使えるプラグインです。

「Aurora Heatmap」を入れるだけで、多くクリック(タップ)されている箇所を表示してくれます。

プラグインインストール後、ある程度、閲覧データがたまるのを待つ必要があります。

この「Aurora Heatmap」と「Googleアナリティクス」で、Cocoonボックスメニュー導入による直帰率への効果が見えます。

繰り返しですが、データがたまるまで、しばしお待ちを。

当ブログからボックスメニューがさらりと消滅していたら、、、察してくださいm(__)m


最後に余談ですが、僕が別サイトで使用するWordPressテーマ・SWELLのボタン機能には、驚かされました。
編集画面でボタンのクリック率がわかるんです。

SWELLボタン機能画面

通常、プラグインか高額ヒートマップで導入する機能です。
やはり、SWELLも、神。

他にもアフィリエイトタグのクリック回数もとれたりと、アフィリエイトの機能性も良いです。

無料のCocoon対して、SWELLは17,600円。
高額に感じるかもですが、その分の感動が詰まっているテーマが、SWELLです。

すいません。
鬼の脱線しました、、、。

ただ最近あまりにSWELLに感動したもので、共有したいなと。

多少資金に余裕のある方は、是非、一度SWELL体感してみてください。
>>>SWELL公式ページ

CocoonとSWELLのテーマ比較は、下記の記事に詳しいんで、参考にしてみてください。

Cocoonボックスメニューを”イケメン”カスタマイズ→「帰さないゼ」仕様にした:まとめ

まとめ2

本記事でボックスメニューを導入、補色カスタマイズしたCocoonユーザーのサイト回遊率や直帰率が改善されれば、うれしみです。

今回は、この辺で!

あっ、、、帰さないゼ!

コメント待ってます!

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