Cocoon: ボックスナビ画像下の文字がずれるときの解決策

Cocoonテーマでボックスナビを作成中。

画像下の文字がずれるときの対処法を教えて！

ジュリママ

[結論] 画像の大きさをそろえましょう。

ブログにCocoonのボックスナビを設定するメリット

メリットは、回遊率をUPできること！

回遊率とは、ユーザー１人あたりのPV数のこと。

Cocoonにボックスナビを設定したらこんな感じに↓

メニューが目立って分かりやすくなりました◎

ジュリママ

ハワイ島観光ブログなので、わちゃわちゃさせたくてカラフルな画像を使用！かわいくできた♩

Cocoonのボックスナビ画像下の文字がずれる原因と解決策

ボックスナビ画像下の文字がずれる原因は、画像の高さが不揃いだから。

解決策は、画像の高さを揃えること！

Cocoonのボックスナビに画像URLを登録する時の注意点

ボックスナビの画像に限った話ですが、WordPressにアップロードした画像をやめて、新しい画像に差し替えたいとき、同じファイル名の画像を再登録するのはやめましょう。

なぜなら、WordPressは削除した画像データもWordPress内で保持されているから。

何が問題かというと、

同じファイル名で上げ直した場合、ボックスナビのウィジェットに登録する画像URLは同じままなので、ユーザー画面では削除したはずの画像がずっと残っていました…。

解決策は、ボックスナビの画像を新しく差し替えたい場合、ファイル名も新しくすることです。

ボックスナビの画像に使える商用可能なイラストサイト

筆者はイラストACを使いました。

イラストACは商用利用・加工が自由なのと、かわいいイラストが沢山あるので気に入っています。

Cocoon公式のボックスナビ設定手順はこちら

Cocoonの開発者・わいひらさんが、ボックスナビの設定手順を公開されています。

→Cocoonの設定手順を見に行く

さいごに

１ヶ月後にサイトの回遊率が上がったか測定したいと思います。

結果もこちらのページで公開予定です。