高性能なWordPress無料テーマ「Cocoon」で実装された「ボックスナビメニュー」を、ブログのヘッダー下に設置しました。
カスタマイズ後のイメージはこんな感じ。「WEB」メニューはオンマウスした状態です。
ウィジェットの「コンテンツ上部」に挿入しています。
記入したCSSを掲載しますので、コピペして使っていただいてOKです。
CSSの内容は記事執筆時（2020年2月）の、当ブログのものになっています。コピペして使う場合はご自身のブログに合うように修正してください。
ボックスメニューの設置の仕方はこちら。
カスタマイズ前後の比較
パソコンから表示した場合
カスタマイズ前はパソコンから見た場合、メニューが5個以下だと左側に寄ってしまうので、記事とサイドバーに幅を合わせました。
オンマウスすると表示される枠線をなくし、背景色が変わるようになりました。
モバイルから表示した場合
モバイル環境から見た場合、カスタマイズ前はメニューが3個以上になると複数の段に分かれるのを、パソコンから見たとき同様、横一列に並ぶようにしました。
記述したCSS
/* ボックスメニューの設定 */
.box-menu{
background: #fff; /* 背景色 */
box-shadow: inset 1px 1px 0 0 #F2F0EE, 1px 1px 0 0 #F2F0EE, 1px 0 0 0 #F2F0EE; /* 枠線の設定 */
}
.box-menu-icon{
color: #339432; /* アイコンの色 */
}
.wwa .box-menu {
width: calc(100%/4); /* メニューの数 */
}
/* オンマウス時の設定 */
.box-menu:hover{
box-shadow: none; /* 枠線を消す */
background: #F2F0EE; /* 背景色 */
}
/* モバイル用の設定 */
@media screen and (max-width: 599px){
.box-menus .box-menu {
width: calc(100%/4); /* メニューの数 */
}
.box-menu-label{
font-size: 10px; /* 文字サイズ */
}
.box-menu{
min-height: 50px; /* 高さ */
}
}CSS解説
/* ボックスメニューの設定 */
.box-menu{
background: #fff; /* 背景色 */
box-shadow: inset 1px 1px 0 0 #F2F0EE, 1px 1px 0 0 #F2F0EE, 1px 0 0 0 #F2F0EE; /* 枠線の設定 */
}
.box-menu-icon{
color: #339432; /* アイコンの色 */
}background: #fff;で背景色を変更しています。#fffの部分をお好きなカラーコードへ変更してください。
box-shadowの#F2F0EEでデフォルトのグレーの枠線を背景色と同じ色にしています。
color: #339432;はアイコンの色の設定です。#339432の部分をお好きなカラーコードへ変更してください。
背景色（白）とアイコンの色（サイトキーカラー）はデフォルトと同じ色を使っているのですが、後々設定を変更した時に分かりやすくするために入力しておきました。
サイトキーカラーはCocoon設定の全体タブから設定できます。
.wwa .box-menu {
width: calc(100%/4); /* メニューの数 */
}calc(100%/4)の4がメニューの数です。
メニューが7個以上の時もcalc(100%/7)と入力すると、横に7個並べることが出来ます。
/* オンマウス時の設定 */
.box-menu:hover{
box-shadow: none; /* 枠線を消す */
background: #F2F0EE; /* 背景色 */
}box-shadow: none;で枠線を消して、background: #F2F0EE;で背景色を設定しています。
/* モバイル用の設定 */
@media screen and (max-width: 599px){
.box-menus .box-menu {
width: calc(100%/4); /* メニューの数 */
}
.box-menu-label{
font-size: 10px; /* 文字サイズ */
}
.box-menu{
min-height: 50px; /* 高さ */
}
}モバイル用の設定です。
デフォルトの設定だと文字サイズが大きかったので、文字を小さくしたのと、min-height: 50px;でメニューの高さを少し調整しました。
width: calc(100%/4);はパソコン用の設定と同様です。
ただし、たくさんのメニューをモバイルで表示すると、ひとつひとつのメニューが小さくなったり表示が崩れたりします。
アイコンや文字の大きさにもよりますが、モバイルでは横一列に4個くらいが限界だと思います。
注意点
- ウィジェットの設置場所によって、クラス名が違う可能性があります。
- 当ブログで使用しているコードなので、ご自身のブログに合わせて色や数値を変更してください。
- ブログ内に設定しているボックスメニューが、すべてデザインが変更されます。
直接ボックスメニューで使われているクラス名でスタイルを上書きしているため、サイドバーなどでボックスメニューを使っている場合、サイドバー側のメニューの表示が崩れます。
ボックスメニューのショートコードを使い、クラス名を追記して任意の場所のみデザインを変更するなど、工夫が必要です。
