テンプレート【WIDELY】では、ヘッダーと左のカテゴリー表示で2階層目までをツリー表示にし、3階層目以降も2階層目のメニュー内に表示されます。
＜変更前＞
ヘッダー：
左側メニュー：
CSSを編集することで、3階層目以降もツリー表示に変更することができます。
＜変更後＞
ヘッダー：
左側メニュー：
以下の手順で変更してください。
ショップデザイン / テンプレート選択・編集 / トップページ編集 / 共通CSS管理
（１）ヘッダーのツリー表示を変更します。Ctrl＋Lキーを押して
.global-nav li #M_ctgList2 .M_layer2 {
を検索してください。
この1行を5階層目までの指定に変更してください。
＜変更前＞
.global-nav li #M_ctgList2 .M_layer2 {
display:none;
position:absolute;
left:200px;
top:0px;
}
↓
＜変更後＞
.global-nav li #M_ctgList2 .M_layer2,
.global-nav li #M_ctgList2 .M_layer3,
.global-nav li #M_ctgList2 .M_layer4,
.global-nav li #M_ctgList2 .M_layer5 {
display:none;
position:absolute;
left:200px;
top:0px;
}
太字の部分を追記してください。
（２）（１）の後方に
.global-nav li:hover #M_ctgList2 li:hover ul,
.global-nav li #M_ctgList2 .M_layer2:hover{
という記述がありますので、5階層目までの指定に変更してください。
＜変更前＞
.global-nav li:hover #M_ctgList2 li:hover ul,
.global-nav li #M_ctgList2 .M_layer2:hover{
display:block;
}
↓
＜変更後＞
.global-nav li:hover #M_ctgList2 li:hover .M_layer2,
.global-nav li #M_ctgList2 .M_layer2 li:hover .M_layer3,
.global-nav li #M_ctgList2 .M_layer2 .M_layer3 li:hover .M_layer4,
.global-nav li #M_ctgList2 .M_layer2 .M_layer3 .M_layer4 li:hover .M_layer5{
display:block;
}
{ の前を変更してください。
（３）（２）の後方に
.global-nav li #M_ctgList2 .M_layer1,
.global-nav li #M_ctgList2 .M_layer2{
という記述がありますので、5階層目までの指定に変更してください。
＜変更前＞
.global-nav li #M_ctgList2 .M_layer1,
.global-nav li #M_ctgList2 .M_layer2{
width:200px;
background:#fff;
-webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.1);
box-shadow:3px 3px 10px rgba(0,0,0,0.1);
}
↓
＜変更後＞
.global-nav li #M_ctgList2 .M_layer1,
.global-nav li #M_ctgList2 .M_layer2,
.global-nav li #M_ctgList2 .M_layer3,
.global-nav li #M_ctgList2 .M_layer4,
.global-nav li #M_ctgList2 .M_layer5 {
width:200px;
background:#fff;
-webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.1);
box-shadow:3px 3px 10px rgba(0,0,0,0.1);
}
太字の部分を追記してください。
（４）左側メニューのツリー表示を変更します。Ctrl＋Lキーを押して
.side-nav #M_ctgList2 ul.M_layer1 li ul.M_layer2{
を検索してください。この1行を変更してください。
＜変更前＞
.side-nav #M_ctgList2 ul.M_layer1 li ul.M_layer2{
display:none;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
↓
＜変更後＞
.side-nav #M_ctgList2 ul.M_layer1 li ul.M_layer2,
.side-nav #M_ctgList2 ul.M_layer1 li ul.M_layer3,
.side-nav #M_ctgList2 ul.M_layer1 li ul.M_layer4{
display:none;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
太字の部分を追記してください。
（５）（４）の後方に
.side-nav #M_ctgList2 ul li .M_layer2{
という記述がありますので、5階層目までの指定に変更してください。
＜変更前＞
.side-nav #M_ctgList2 ul li .M_layer2{
width:212px;
-webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.1);
box-shadow:3px 3px 10px rgba(0,0,0,0.1);
}
↓
＜変更後＞
.side-nav #M_ctgList2 ul li .M_layer2,
.side-nav #M_ctgList2 ul li .M_layer3,
.side-nav #M_ctgList2 ul li .M_layer4{
width:212px;
-webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.1);
box-shadow:3px 3px 10px rgba(0,0,0,0.1);
}
太字の部分を追記してください。
（６）（５）の後方に
.side-nav #M_ctgList2 ul.M_layer1 li:hover ul.M_layer2,
.side-nav #M_ctgList2 ul li .M_layer2:hover{
という記述がありますので、5階層目までの指定に変更してください。
＜変更前＞
.side-nav #M_ctgList2 ul.M_layer1 li:hover ul.M_layer2,
.side-nav #M_ctgList2 ul li .M_layer2:hover{
display:block;
position:absolute;
top:0;
left:212px;
width:212px;
z-index:999;
background-color:#FFF;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
↓
＜変更後＞
.side-nav #M_ctgList2 ul.M_layer1 li:hover ul.M_layer2,
.side-nav #M_ctgList2 ul li .M_layer2 li:hover .M_layer3,
.side-nav #M_ctgList2 ul li .M_layer2 li:hover .M_layer3 li:hover .M_layer4{
display:block;
position:absolute;
top:0;
left:212px;
width:212px;
z-index:999;
background-color:#FFF;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
{ の前を変更してください。