Cocoonのボックスメニューをカスタマイズ【スマホでも4列】

まさに「こういうのが欲しかった！！」と言いたいCocoonのボックスメニュー。

わいひらさん＆ぽんひろさんという日本代表みたいなお2人によって創り出されたドリームな機能です。早速使っております。ありがとうございます。

多様性のある機能なので色々な形で使っていますが、スマホで見た時に3列・4列にできないかな？と思ったのでカスタマイズしてみました。

カスタマイズコード

以下のコードはスマホで4列にしています。ただ4列にしただけではボタンと中身のバランスが悪いので、アイコンや文字のサイズなども調整しました。

/*ボックスメニュー*/
.box-menu{
  width:calc(100%/4)!important;
  padding: 1em 2px 5px 2px;
  min-height:80px !important;
}
.box-menu-icon{
  font-size: 25px;
  margin:0;
  padding-bottom: 2px;
  height:30px;
}
.box-menu-label{
  font-size: 11px;
  color:gray;
}
.box-menu-description{
  color: gray;
  background: skyblue;
}

スマホ用CSSコードです！

あくまでもスマホ向けのデザインですので、スマホ用のコードとして参考にしてください。

/* モバイルトップメニュー */
@media screen and (max-width: 750px){

/*こういうやつに追加する感じで*/

}

カスタマイズ詳細

項目ごとにカラーリングしてみたので、画像を見ながらイメージを膨らませてください。

.box-menu

.box-menu{
  width:calc(100%/4)!important;
  padding: 1em 2px 5px 2px;
  min-height:80px !important;
}

個々のボックスに対する定義です。

[calc(100%/4)] = 赤文字の数値が列の数になります。私の場合は[!imporant]を追加しないと4列になりませんでした。

デフォルトの高さは[min-height: 100px]で最低ラインが決まっているので、個々のボックスの高さを100pxより低くしたい場合は上記のコードを参考にしてください。

.box-menu-icon

.box-menu-icon{
  font-size: 25px;
  margin:0;
  padding-bottom: 2px;
  height:30px;
}

アイコン部分【赤】の定義です。

主にはサイズ・位置の調整がメインになると思います。

.box-menu-label

.box-menu-label{
  font-size: 11px;
}

ラベル部分【青】の定義です。

例えば文字数が多くて2行になってしまう場合は、全体定義の[padding]で調整してみてください。※もちろんスペースの限界はあります

.box-menu-description

.box-menu-description{
  color: gray;
}

ディスクリプション【黄】の定義です。

このディスクリプションとボックスの下線とのスペースが[margin]や[padding]を指定しても変わりませんでした。

全体定義の[min-height]が影響していたので、スペースを小さくしたい場合は全体定義の方で調整してみてください。