カラーミーショップ　ドロップダウンメニューの表示につきまして。

Question

お世話になります。
カラーミーショップのテンプレートを使用しています。
添付画像のドロップダウンメニューですが、元々１列でしか表示されなかったところを、ECマスターズさんに相談させて頂き２列の表示にして頂きました。２０２１年６月２７日、７月２日に同様のタイトルで質問させて頂いております。添付のHTMLがその時のものかと想います。これを３列で表示させることは可能でしょうか。
ご回答よろしくお願い致します。###HR######IMG0cfacb15bd038072202c25b4709256b44.pngIMG0### ###IMG1b2c5d174660077f7b4f077d93e7d6173.pngIMG1###

Answer

ECマスターズの中村です。

>これを３列で表示させることは可能でしょうか。

前回、ご紹介した下記の部分の
幅のサイズを「width: 485px;」から
「width: 728px;」程度に広げていただくと
3列表示が可能になると考えます。
---------------------------
body .l-dropdown-menu.menu_brand {
width: 485px;
}
---------------------------

※数字は720px以上であれば問題無いと
考えますが、変更した後、微調整下さい。
この部分の数値を調整する事で、
メニュー部分の幅が変化します。

※実際の本番環境をこちらで確認する
事ができない為、もしもご希望通りの
レイアウトにならなかった場合は、
お手数ですが再度ご連絡下さい。

宜しくお願い致します。

Answer

お世話になります。
widthの数値を上げると、枠は広がりますが３列にはならないようです。
以下、以前１列から２列にする方法を教わった際のフォーラムです。

https://forum.ec-masters.net/post_view.php?id=19217
https://forum.ec-masters.net/post_view.php?id=19290

よろしくお願い致します。

Answer

ECマスターズの中村です。

>widthの数値を上げると、枠は広がりますが３列にはならないようです。

今回、ご検討されているレイアウトは、
ブランド数が増える事はなく、現在の
ブランド数のままで、2列表示から、
3列表示にされたいという事でしょうか。

現在のブランド数で、
リストを3列にされたい場合は、

liのwidthを
　width:calc(100% / 3);
と記載いただくと3列表示となります。

こちらでご希望のレイアウトになるか
お試しください。宜しくお願い致します。

Answer

お世話になります。

＞liのwidthをwidth:calc(100% / 3);と記載いただくと3列表示となります。

「liのwidth」とはどの部分でしょうか。
また、ブランドが増えることも見越しつつ、「ACATE / アカーテ」というブランドにカタカナ表記を加えようと考えていることから、３列に出来ないかと思いご相談させて頂きました。

そして以前ご相談させて頂いた時とHTMLの記述が変わっているかもしれません。
下記に現状のHTMLと表示のキャプチャを添付致しますので、ご確認頂き、改めてご教示頂けますと幸いです。

よろしくお願い致します。



 
        
        
					


body .l-dropdown-menu.menu_brand {
width: 485px;
}
.menu_brand .l-dropdown-menu-list {
display: flex;
flex-wrap: wrap;
}

@media screen and (min-width: 1030px) {
body .menu_brand .l-dropdown-menu-list {
width: auto;
}
.menu_brand .l-dropdown-menu-list__item {
flex: 50% 0 0;
}
}




BRAND











###HR######IMG0081dcbbc4251251012e066abc9bcc1e7.pngIMG0###

Answer

ECマスターズの中村です。

こちら確認し週明け回答させていただきます。

Answer

ECマスターズの中村です。

ご希望されているデザイン構成と
現状のHTMLタグの共有をありがとうございます。

下記部分に、以下の様に
追加してください。
--------------------------------------------------------------
.menu_brand .l-dropdown-menu-list__item {
flex: 0 0 calc(100% / 3);
}
--------------------------------------------------------------

この記述で、リストを横並び3列で
3列の幅を3等分にして表示する、
という設定になります。

なお、今回のご質問の初回に回答させて
いただきました、
--------------------------------------------------------------
body .l-dropdown-menu.menu_brand {
width: 485px;
}
--------------------------------------------------------------
部分については、「width: 」の幅を
「width: 728px;」程度に広げていただく様に
ご案内させていただきましたが、この部分の
数字については、全体のバランスをみて
適宜、調整して下さい。

ご確認の程、宜しくお願い致します。

カラーミーショップ ドロップダウンメニューの表示につきまして。

カラーミーショップ　ドロップダウンメニューの表示につきまして。