iNove 스킨 수정 글을 오랜만에 작성해 보네요. 이 글은 제 블로그에 문의 주셔서 글로 작성해 봅니다.
iNove 스킨의 장점이라면 복잡하지 않은 HTML소스에 있다고 봅니다. 티스토리 블로그를 처음하시는 분들께는 단점이 될수도 있겠지만 간결한 HTML소스로 인한 디자인 / 기능 추가가 쉽습니다.
카테고리 글 더 보기 역시 iNove스킨에서는 티스토리 기본을 사용합니다. 그러니 CSS란에 꾸미는 명령어가 없습니다. 그냥 간단하게 티스토리에서 지원하는 기능을 불러와서 보여줄 뿐이죠.
iNove스킨에서 '카테고리 글 더 보기'를 꾸미실려면 간단하게 CSS란에 소스를 넣어주시면 끝납니다.
iNove 스킨 '카테고리 글 더 보기'를 꾸며 보자
카테고리 글 더 보기를 꾸미기 전에 먼저 이 기능을 사용할수 있게 설정해야 합니다.
티스토리 관리 -> 플러그인 설정 -> 꾸미기 란에서 '카테고리 글 더 보기'를 선택 하세요.
목록 개수를 지정하시고 '확인'을 선택하시면 본문 글 하단에 출력 됩니다.
본문 글로 들어가 보시면 위 이미지처럼 보일것입니다. 티스토리에서 기본으로 제공하는 플러그인을 그대로 출력해 주는데요. 밋밋한 '카테고리 글 더 보기'를 아래 처럼 꾸며 보겠습니다.
CSS에 소스를 입력해서 위 이미지처럼 '카테고리 글 더 보기'를 꾸며 눈에 확 들어오게 만들었습니다.
먼저 작업하기전에 사용하시는 스킨을 백업해 주세요.
스킨 백업을 하셨다면 진행해 보겠습니다.
티스토리 관리 -> HTML/CSS 편집 -> HTML/CSS란에 style.css에 아래 소스를 넣어 주세요.
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 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은 글 목록에 마우스 오버시 변하는 색상 지정입니다.
좀더 세세한 수정을 원하신다면 조금씩 소스를 수정해 보시면 됩니다.
