iNove 스킨 '카테고리 글 더 보기' 꾸미기
2014.03.09 15:14
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^
iNove 스킨 '카테고리 글 더 보기' 꾸미기

iNove 스킨 수정 글을 오랜만에 작성해 보네요. 이 글은 제 블로그에 문의 주셔서 글로 작성해 봅니다.

 

iNove 스킨의 장점이라면 복잡하지 않은 HTML소스에 있다고 봅니다. 티스토리 블로그를 처음하시는 분들께는 단점이 될수도 있겠지만 간결한 HTML소스로 인한 디자인 / 기능 추가가 쉽습니다.

 

카테고리 글 더 보기 역시 iNove스킨에서는 티스토리 기본을 사용합니다. 그러니 CSS란에 꾸미는 명령어가 없습니다. 그냥 간단하게 티스토리에서 지원하는 기능을 불러와서 보여줄 뿐이죠.

 

iNove스킨에서 '카테고리 글 더 보기'를 꾸미실려면 간단하게 CSS란에 소스를 넣어주시면 끝납니다.

 

iNove 스킨 '카테고리 글 더 보기'를 꾸며 보자

 

카테고리 글 더 보기를 꾸미기 전에 먼저 이 기능을 사용할수 있게 설정해야 합니다.

 

티스토리 관리 -> 플러그인 설정 -> 꾸미기 란에서 '카테고리 글 더 보기'를 선택 하세요.

 

목록 개수를 지정하시고 '확인'을 선택하시면 본문 글 하단에 출력 됩니다.

 

본문 글로 들어가 보시면 위 이미지처럼 보일것입니다. 티스토리에서 기본으로 제공하는 플러그인을 그대로 출력해 주는데요. 밋밋한 '카테고리 글 더 보기'를 아래 처럼 꾸며 보겠습니다.

 

CSS에 소스를 입력해서 위 이미지처럼 '카테고리 글 더 보기'를 꾸며 눈에 확 들어오게 만들었습니다.

 

이 소스는 이곳에서 참고 하였습니다.

 

먼저 작업하기전에 사용하시는 스킨을 백업해 주세요.

 

 

스킨 백업을 하셨다면 진행해 보겠습니다.

 

티스토리 관리 -> HTML/CSS 편집 -> HTML/CSS란에 style.css에 아래 소스를 넣어 주세요.

 

div.another_category{margin-top:15px;margin-bottom:0 !important;padding:0;border:0 !important;font-family:tahoma}
div.another_category h4{margin:0px !important;background:#035e4c;color:#fff !important;padding:10px!important;font-size:15px;line-height:normal}
div.another_category h4 a{color:#fff !important;font-size:15px !important;margin:0 !important;}
div.another_category table{border:1px solid #ccc;border-top:0;margin:0 !important}
div.another_category table td{display:none}
div.another_category th a{margin-left:12px;color:#333 !important;padding-left:8px;background:url(images/bu.gif) no-repeat 0 8px;}
div.another_category th a.current{border-bottom:0 !important}
div.another_category th span{color:#f00 !important}
div.another_category th{padding-bottom:8px}
div.another_category table th{padding-bottom:8px !important;}
div.another_category tr:first-child th{padding-top:8px !important;}
div.another_category table th a:hover{color:#f00 !important;}

 

그리고 저장을 눌러 주시면 됩니다. 소스 복사가 안되니 아래 파일을 다운로드 하셔서 압축을 풀어 사용하세요.

 

'카테고리 글 더 보기' 소스 카테고리.zip

 

압축을 풀어 보시면 텍스트 파일에 위 소스가 들어 있고, 'bu.gif'파일이 있습니다. 티스토리 관리 -> HTML/CSS 편집 -> 파일 업로드에 넣어 주시면 됩니다.

 

그럼 모든 작업을 끝났습니다. 간단히 소스 설명을 드릴께요.

 

div.another_category{margin-top:15px;margin-bottom:0 !important;padding:0;border:0 !important;font-family:tahoma}
div.another_category h4{margin:0px !important;background:#035e4c;color:#fff !important;padding:10px!important;font-size:15px;line-height:normal}
div.another_category h4 a{color:#fff !important;font-size:15px !important;margin:0 !important;}
div.another_category table{border:1px solid #ccc;border-top:0;margin:0 !important}
div.another_category table td{display:none}
div.another_category th a{margin-left:12px;color:#333 !important;padding-left:8px;background:url(images/bu.gif) no-repeat 0 8px;}
div.another_category th a.current{border-bottom:0 !important}
div.another_category th span{color:#f00 !important}
div.another_category th{padding-bottom:8px}
div.another_category table th{padding-bottom:8px !important;}
div.another_category tr:first-child th{padding-top:8px !important;}
div.another_category table th a:hover{color:#f00 !important;}

 

div.another_category table td{display:none} 이 소스는 카테고리 글 목록 옆에 날짜를 안보이게 하는 소스 입니다. 날짜를 나오게 하고 싶으시면 삭제하시면 됩니다.

 

035e4c는 카테고리 제목 배경색 지정 입니다.

 

div.another_category th span{color:#f00 !important} f00은 댓글 갯수 색상 지정입니다.

 

div.another_category table th a:hover{color:#f00 !important;}f00은 글 목록에 마우스 오버시 변하는 색상 지정입니다.

 

좀더 세세한 수정을 원하신다면 조금씩 소스를 수정해 보시면 됩니다.

저작자 표시 비영리 변경 금지
신고

, , , , , ,

  1. 감사합니다 덕분에 적용을했습니다
    이쁘게 꾸며습니다

  2. 넵 알찬 블로그 운영하세요.
    댓글 감사합니다.

  3. 잘 보고 가요~ 오늘 비올지도 모른다고 하니 우산 챙겨가시길^^

  4. 안녕하세요.
    감기,몸살로 병원들럿다 이제 출근하네요.

    날이 흐리네요.
    감기 조심하시구 즐건하루 보내세요.^^

  5. Blog Icon
    투덜이아부지

    감사합니다. 정보 진짜 너무 좋습니다..^^
    혹시요 Recent Posts 이게 지금 3개 밖에 안 보이는데요 이걸 늘릴려면 어디를 수정해야할까요?
    좋은 저녁보내십시오

  6. 안녕하세요.
    특별한 소스 변경없이 본문글 소스만 적용하셨다면 티스토리 관리화면 ->플러그인 설정- > 꾸미기 -> 카테고리 글 더 보기에서 갯수 지정하시면 됩니다.

  7. 감사합니다..설명해주신 것은 해봤는데요..그게아닌거 같아요..ㅠㅠ 사이드바에 있는 Recent Posts 의 갯수를 말합니다.ㅠ
    지금 선생님꺼는 보면 한 20개가 보이잖아요..
    그리고 너무 감사합니다. 그 동안 블로그 하나 해볼까 고민하다가 워드프레스도 만들어보고 했는데..ㅠㅠ 저에겐 티스토리가 더 맞는 거 같아요

  8. 안녕하세요.

    제가 댓글을 잘못 달았네요. 댓글이 질문글일때 본문을 다시 읽는 습관이 있어서 헷갈렸습니다. ㅜㅜ

    말씀하신 부분은 티스토리 관리,화면설정,화면출력 으로 들어가시면 있답니다.

  9. Blog Icon
    투덜이아부지

    너무 감사합니다..^^ 좋은 하루되십시오...

  10. 감사합니다.^^

  11. 감사합니다. 덕분에 카테고리가 더 이뻐졌습니다.

  12. 블로그 전체 분위기 맞게 색상을 조절하면 더 깔끔하답니다.
    방문 댓글 감사합니다.^^

  13. 덕분에 조금씩 적용 하고 있습니다. 배경 이미지를 바꾸고 싶은데 어떻게 해야 하는지 전혀 감을 못잡겠네요
    구글링으로 검색을 계속 해봐도 관련 포스트가 없어서 이렇게 문의 한번 드려봅니다

  14. 안녕하세요.
    저도 처음에는 데이오프님께서 사용하는 스킨을 사용하다 http://tyzen.net/199 스킨으로 교체했습니다.

    배경이미지 지정이 좀더 쉽거든요.

    한번 사용해 보세요.
    지금 사용하시는 스킨 배경이미지를 바꿀려면 상당한 그래픽 작업이 필요한데 http://tyzen.net/199 스킨은 조금 쉽답니다.^^

  15. 감사합니다 적용해보고 재방문 할게요