メルマガ登録
2024年 04月
  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     
今日
2024年 05月
      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  
 
投票タイトル
 
投票項目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(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>