티스토리 사이드바 꾸미기(카테고리 숨기기)
적어두지 않으면 까먹을거 같아서 이렇게 정리해놔야지ㅎㅎ
일단 참고했던 블로그는 http://zion437.tistory.com/337
정말 너무 친절하게 설명을 해놓으셔서 엄청 도움이 많이 되었다ㅠㅠ
CSS고 html이고 뭐고 아무것도 몰랐는데 이렇게 팁을 하나하나 찾아서 고생고생 블로그를 만들어서 그런지
애착은 엄청 많아진 거 같은...ㅎㅎㅎ
쓰고있는 스킨은 square스킨으로 wallel님의 멋진 스킨이다!
혹시나 모르겠지만 팁을 바라고 찾아오신 분들에게 꿀팁이길 바라면서!!
자세한 설명은 위에 소개된 블로그를 읽어주세욥
일단 처음 블로그 카테고리의 CSS설정
#sidebar .widget ul { margin: 0; padding: 0; }
#sidebar .widget li { list-style: none; word-break: break-word; }
#sidebar .category .c_cnt { font-size: 11px; line-height: 0; }
#sidebar .category ul li { list-style: none; }
#sidebar .category ul li ul li ul { margin: 0 0 0 15px; padding: 0; }
블로그에 적용되어있는 모습은
여기서
ul li ul li 는 SERENDIPITY라고 되어있는 카테고리
ul li ul li ul는 CANADA라는 카테고리안에 있는 소카테고리(?)라고 할 수 있다
ul li 는 +Categoty 라는 파란색으로 표시되어있는 부분
(사실 자세한거는 모르겠다..)
확실이 구별하려면 html의 카테고리리스트부분을 보면 3중구조로 알 수 있다
****초록부분이 추가한 부분****
여기서 내가 원했던거는 카테고리가 오른쪽으로 치우치길 바랐기 때문에
오른쪽으로 정렬 및 카테고리 글자들의 간격 추가
#sidebar .widget ul { margin: 0; padding: 0; text-align: right; letter-spacing: 3px; }
그리고 소카테고리를 감추고 싶었는데 이거 찾는데 진짜 고생했다ㅠㅜ
결과적으로 앞에 참고했는 블로그에서 꿀팁을 얻어서 열심히 고쳐서 지금의 결과!!ㅎㅎㅎ
일단 소카테고리를 감추고
#sidebar .category ul li ul li ul { display:none }
카테고리에 마우스를 올렸을 때(hover:마우스오버) 소카테고리가 나오게끔 설정
#sidebar .category ul li ul li:hover ul {display:block}
이렇게 해서 적용하게 되면!!
그리고 소카테고리가 위에까지만 했을 때 위치가 이상해서 새로 추가한 부분
숫자를 계속 바꿔서 정확히는 설명못하겠지만 이걸로 소카테고리와 카테고리의 줄(?)을 맞췄다
#sidebar .category ul li ul li ul { margin: 0 -20px 0; padding: 0 }
최종적인 CSS ->현재 내 블로그
#sidebar .widget ul { margin: 0; padding: 0; text-align: right; letter-spacing: 3px; }
#sidebar .widget li { list-style: none; word-break: break-word; }
#sidebar .category .c_cnt { font-size: 11px; line-height: 0; }
#sidebar .category ul li { list-style: none; }
#sidebar .category ul li ul li ul li {width:200px}
#sidebar .category ul li ul li ul { display:none }
#sidebar .category ul li ul li:hover ul {display:block}
#sidebar .category ul li ul li ul { margin: 0 -20px 0; padding: 0 }
전문적으로 아는 사람이 아니기때문에 이이상 더 설명할 수가....ㅠㅜ
호옥시나 찾아오신 분들은 도움이 되셨길 바랍니다ㅎㅎ