メルマガ登録
2020年 08月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31      
今日
2020年 09月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30    
 
投票タイトル
 
投票項目1
投票項目2
投票項目3
投票項目4
投票項目5
 
[BOARDLIST_5_180_/images/250/leftdot.gif]
 
 
 
 
 
 
 
 
 
 
 

左メニュー[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(/shopimages/designdemo05/0020010000013.jpg) no-repeat;}
#M_ctg1_4{background:url(/shopimages/designdemo05/0020020000093.jpg) no-repeat;}
#M_ctg1_5{background:url(/shopimages/designdemo05/0020020000023.jpg) no-repeat;}
#M_ctg1_19{background:url(/shopimages/designdemo05/0020010000033.jpg) no-repeat;}
#M_ctg1_8{background:url(/shopimages/designdemo05/0020010000023.jpg) no-repeat;}
#M_ctg1_9{background:url(/shopimages/designdemo05/0000000002862.jpg) no-repeat;}
#M_ctg1_10{background:url(/shopimages/designdemo05/0000000002852.jpg) no-repeat;}
#M_ctg1_11{background:url(/shopimages/designdemo05/0000000003273.jpg) no-repeat;}
#M_ctg1_21{background:url(/shopimages/designdemo05/0010000000263.jpg) no-repeat;}
#M_ctg1_12{background:url(/shopimages/designdemo05/0060000000212.jpg) no-repeat;}
#M_ctg1_23{background:url(/shopimages/designdemo05/0020010000013.jpg) no-repeat;}
#M_ctg1_22{background:url(/shopimages/designdemo05/0020020000093.jpg) no-repeat;}
#M_ctg1_14{background:url(/shopimages/designdemo05/0000000003273.jpg) no-repeat;}
#M_ctgList3 .M_hasChild span {
background-position: top right !important;
padding-right:20px;
}
</style>