左メニュー[CATEGORY_MENU_3]に背景画像を使う
左メニューの独自変数タグ[CATEGORY_MENU_3]で出力されたメニューには、
それぞれのdiv、ul、li要素にid、class名が振り分けられていますので、CSSスタイル指定でカスタマイズが可能です。
←この左メニューのスタイル指定例:
背景画像を指定しています。
<style type="text/css">
#M_ctgList3 li{
background-size:35px auto;
padding:10px 0 10px 30px;
margin:5px 0;
border-bottom:dashed 1px #999;
}
#M_ctgList3 li li{border:none; padding-left:0;}
#M_ctgList3 li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#M_ctg1_2{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/01.jpg) no-repeat;}
#M_ctg1_4{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/02.jpg) no-repeat;}
#M_ctg1_5{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/03.jpg) no-repeat;}
#M_ctg1_19{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/04.jpg) no-repeat;}
#M_ctg1_8{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/05.jpg) no-repeat;}
#M_ctg1_9{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/06.jpg) no-repeat;}
#M_ctg1_10{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/07.jpg) no-repeat;}
#M_ctg1_11{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/08.jpg) no-repeat;}
#M_ctg1_21{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/09.jpg) no-repeat;}
#M_ctg1_12{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/10.jpg) no-repeat;}
#M_ctg1_23{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/01.jpg) no-repeat;}
#M_ctg1_22{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/02.jpg) no-repeat;}
#M_ctg1_14{background:url(https://gigaplus.makeshop.jp/designdemo05/icon/03.jpg) no-repeat;}
#M_ctgList3 .M_hasChild span {
background-position: top right !important;
padding-right:20px;
}
</style>