예전에 티스토리 카테고리를 정리하면서 기존의 카테고리는 관리가 편리했지만
카테고리의 상하 메뉴의 글씨크기 구분, 색깔 구분이 없기때문에 가독성이 떨어져 보이고
답답해 보인다는 생각이들어서 상위 카테고리의 색깔은 진하고 큰글씨로 만들어주고
하위카테고리는 작고 연한글씨로 만들고 그 방법을 포스팅해봤습니다. 

 아직 미완성 상태이고 부족한 부분이 많이 있지만 궁금해하시는분이 계셔서 포스팅해봤습니다.


가독성 좋은 카테고리 만들기 기본기  

가독성 좋은 카테고리 만드는 방법 

 상위 카테고리와 경계선은 포토샵으로 만들었고 하위카테고리는 <ul>~</ul>태그를
이용해서
텍스트로 만들어서 기존 카테고리와 링크 시켰습니다.


가독성 좋은 카테고리 만들기 재료  

 아래의 재료.zip 압축파일에 분류전체보기, 경계선, 상위카테고리 이미지를 첨부했습니다. 
상위 카테고리이미지는 PSD로 만들어서 포토샵을 이용하셔서 원하시는 내용으로

아래 내용을 참고하셔서 간단히 수정해주시면 됩니다.


상위카테고리 이미지 수정 방법

1. 글자입력 도구를 선택해줍니다.
2. 글자부분을 클릭하시고 내용을 수정해주시면됩니다.
3. Ctrl + Alt + S를 누르시고 Gif 파일 확장자로 저장해주시면 됩니다.


가독성 좋은 카테고리 만들기  ( Life in Mono 기준 )


3, 4, 5번을 계속해서 확장시켜주시면 됩니다.



가독성 좋은 카테고리 변경하는 방법


1. 작업을 하기전에 반드시 스킨저장을 해두시기 바랍니다.
2. 위에서 작업한 내용을 Html/CSS 편집에서 아래 내용과 교체해주시면 됩니다.



후기

 Life in Mono 스킨기준이라 기존의 다른 스킨에서는 이미지의 가로폭을 조절 해주셔야 합니다.
최근에 업데이트된 메뉴설정기능처럼 메뉴뿐만이 아니라 카테고리에서도 기본 카테고리외에
다양한 모양의 카테고리를 설정을 할수 있는 메뉴가 만들어졌으면 하는 바람이 드네요.  










신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 스킨을 자유자재로 다루시네요~!
    부럽습니다.

    2011.04.07 14:12 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 잘 보았습니다.
    많은 도움이 되었네요.
    그런데....
    블로그 홍보하기, 블로그 수익 등... 에 있는 그림들 가져다 써도 될까요?
    ㅎㅎ

    2011.04.07 19:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 이제 막 시작한 새내기 블로거인데요,
    티비님 카테고리 살짝 배껴가도 될까요 ? ^^;
    모방은 창조의 어머니라고,
    잠시만 빌려쓰겠습니다 ㅎㅎㅎ

    2011.05.13 15:29 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 미라클

    티비님 좋은정보 감사합니다.
    근데 궁금한게 하나 있어서요
    사이드바에 카테고리 글자크기가 기본적으로 제공되는 크기가 너무 작아서
    글자크기를 좀 키우고 싶은데 크기만 편집하는방법도 있을까요?
    그럼 좋은하루 되세요 ^^

    2011.05.31 10:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 저기 죄송하지만 혹시 style.css쪽은 안건드려도 되는 것인가요? 제가 초보라 다른 스킨을 쓰는데 혹시 몰라서요~

    2011.06.04 21:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 티비님 다른 컴퓨터의 익스플로러 구버전이나 구글크롬으로 접속했을때, 카테고리 사이사이의 틈이 좁아지는 현상이있던데, 이건 어쩔수없는거죠?? 전 익스플로러9 쓰고있습니다. 구글크롬으로 티비님 블로그들어와도 역시 카테고리 틈이 기존보다 좁게 출력돼내요.

    2011.06.12 22:16 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 감사합니다! 티스토리 새로시작했는데, 구분선 넣는법을 몰랐는데 이렇게 넣으면 되는거였네요! 좋은 하루 보내세요.

    2011.08.23 16:28 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 좋은 정보 감사합니다 ㅎ.ㅎ..

    손대기는 무섭지만 그래도 한번 적용시켜봐야겠습니다.

    2011.10.27 18:27 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 정말 많은 도움이 되었어요. 수정하려고 포샵으로 낑낑대는 중~ ㅋㅋㅋ

    2012.04.16 18:22 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 정말 많은 도움이 되었어요. 수정하려고 포샵으로 낑낑대는 중~ ㅋㅋㅋ

    2012.04.16 18:22 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 이렇게 하면 혹시 category depth를 4~5단계까지 추가가 가능하나요? 저는 depth추가가 너무 필요해서요.

    2012.11.18 02:19 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 글씨체가 없네요 전^^;
    색이랑 글씨체손보고 잘 사용하겠습니다

    2012.11.19 21:06 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 에.... 새로운글 표시는 어떻게 되는건가요?
    그리고, 카테고리 url로 접속하기 때문인지
    저는 자꾸 한페이지에 하나 이상의 포스트가 나열되는데,
    하나만 보게 하려면 어떻게 해야 할까요..?

    2013.04.10 07:08 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 스 판매 어린이 용품서 납, 환경호르몬 검출 1 3

    2013.05.07 23:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 스 판매 어린이 용품서 납, 환경호르몬 검출 1 3 aa

    2013.05.07 23:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 스 판매 어린이 용품서 납, 환경호르몬 검출 1 3 sd

    2013.05.07 23:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 스 판매 어린이 용품서 납, 환경호르몬 검출 1 3 as

    2013.05.07 23:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 스 판매 어린이 용품서 납, 환경호르몬 검출 1 3 xx

    2013.05.07 23:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 스 판매 어린이 용품서 납, 환경호르몬 검출 1 3 s

    2013.05.07 23:50 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 너무 좋은 정보를 배워갑니다. 질문하나 해봅니다.
    메인창 사진을 http://essen2.tistory.com/352 이분처럼 사진을 크게 올리는 방법을 배우고 싶습니다.
    어려워서 질문 올립니다. 알려주시면 멋진 선물 보내드리겠습니다.

    2013.10.14 09:27 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바