2013년 9월 21일 토요일

링크목록, 태그 가젯 좌측의 list style 보이지 않게 설정하기


블로거에서 기본으로 제공되는 가젯들 중에는 목록 태그(ul, li)로 이루어진 가젯들이 있습니다. '링크 목록' 가젯이나 '목록' 가젯, '태그' 가젯 등이 그러한 예들인데요.

'깔끔' 템플릿과 '여행' 템플릿에서 이 가젯들은 목록 옆에 점( · )을 표시합니다. 이를 list style이라고 하며, list style은 점외에 숫자나 알파벳 등으로도 표현할 수 있습니다.

먄약 디자인 문제 때문에 이 점들을 없애고 싶다면, list style을 none으로 설정하면 됩니다.

 #위젯id ul {  
 list-style-type:none;  
 }  

위의 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 자리에,
또는 [대시보드 → 템플릿 → HTML편집] 모드에서

 ]]></b:skin>  

코드 바로 앞에 삽입하면 됩니다.

! 참고.

참고로, 위의 코드는 점( · )을 없애주지만, 점이 있던 자리의 빈 공간까지 처리해주지는 않습니다.


점이 있던 자리의 빈 공간 너비까지 설정하려면, padding-left 속성을 추가해주면 됩니다.

 #위젯id ul {  
 list-style-type:none;  
 padding-left:10px;  
 }  

padding-left는 왼쪽 가장자리와 목록 사이의 간격을 설정해줍니다. 10px 대신 자신이 원하는 간격을 입력합니다.


코드 적용의 예와 결과 :

 #TextList1 ul {  
 list-style-type:none;  
 padding-left:5px;  
 }  




댓글 없음:

댓글 쓰기