티스토리 사이드바 꾸미기(카테고리 숨기기)

적어두지 않으면 까먹을거 같아서 이렇게 정리해놔야지ㅎㅎ

일단 참고했던 블로그는 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 }

전문적으로 아는 사람이 아니기때문에 이이상 더 설명할 수가....ㅠㅜ

호옥시나 찾아오신 분들은 도움이 되셨길 바랍니다ㅎㅎ