카테고리 NEW 아이콘 변경 & 아이콘

티스토리 카테고리 NEW 아이콘 변경

이전에 카테고리 아이콘과 게시물 숫자를 표시하는 방법을 블로깅 했는데 이번에는 NEW 아이콘을 변경하는 방법을 알려드릴려고 한다. 기존의 회색의 NEW아이콘은 디자이너로서는 솔직히 이해할 수 없는 아이콘이긴 했다. 물론 애초에 NEW아이콘이 나오지 않게 설정된 점을 생각해보면 그럴만한 뭔가 이유가 있는 것 같긴 한데 여전히 이해는 안간다.

아무튼 먼저 자신이 원하는 NEW 아이콘을 티스토리 파일업로드를 통해 올려두도록 하자. 파일 업로드는 관리자 모드 - 스킨편집 - HTML편집 - 파일업로드를 통해 올리면 된다. 그럼 이제 아이콘을 변경할 코드를 넣어야 한다.

애초에 카테고리에 아이콘이 없는 분들은 아이콘이 나오게 하는 설정을 해야하므로티스토리 카테고리 아이콘 표시하기 참고하도록 하자.

NEW아이콘 변경 CSS CODE

img.va { vertical-align: baseline; }

NEW아이콘 변경 HTML CODE

<script>
$('img[alt="N"]').each(function(){
    $(this).replaceWith('<img src="./images/new_icon_8.png" class="va">');
});
</script>

new_icon_8이라고 써있는 부분에 자신이 파일업로드한 파일명과 확장자를 넣으면 된다. 이 코드는 </body> 바로 위에 붙여 넣어두도록 하자.

스크린샷의 순서대로 따라가면 쉽게 할 수 있다.

여러분들이 자신의 블로그에 맞는 NEW 아이콘을 직접 작업해서 업로드한 파일명을 입력하면 되는데 혹시 몰라서 여러분들이 원하는 NEW 아이콘이 있을지는 모르겠지만 필자가 9가지 정도 준비해봤다. 어짜피 용량이 얼마안되니 한번에 올리고 기분에 따라 이것저것 적용해 보시는 것도 좋을 것이라 생각한다.

꽁기웹디가 만든 NEW 아이콘들

weweb_newicon.zip

원하시는 분들이 있다면 위 다운로드를 통해 받으시면 된다. 지금 필자의 카테고리를 펼쳐보면 변경된 아이콘을 확인할 수 있을 것이다.

주 카테고리 굵게 표시하기

한가지 더 팁을 주자면 티스토리 반응형 스킨 #1을 사용하는 분들은 주제 카테고리와 서브카테고리의 차이점이 안으로 들여쓰기가 되었냐 아니냐의 차이인데 더욱 구분점을 주기위해 CSS 란에 .link_item { font-weight:bold;} 이 코드를 적당한 곳에 붙여 넣어주면 굵게 표시되면서 조금이라도 더 구분하기 쉽게 만들어줄 수 있다.