(티스토리) 카테고리 새 글 발생 시 나오는 NEW 아이콘 변경하는 방법 - 아이콘 첨부!

티스토리에서 새 글을 발행하면 카테고리에 아이콘이 생기는 것을 확인할 수 있는데, 이번에는 이 애매하고 예쁘지도 않은 아이콘을 원하는 이미지로 변경하는 방법을 알아볼까 합니다. 직접 일러스트레이트로 따와서 SVG 파일로 변경한 이미지 파일도 첨부합니다!

 

많은 분들이 이미 알고 계신 줄 알았는데 댓글로 요청해주셔서 이번 기회에 포스팅해봅니다!

 

만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

카테고리 새 글 아이콘 변경 방법

사실 이번 스크립트는 이미 많은 블로그에서 다룬 내용이고 또, 아주 간단한 스크립트이기 때문에 티스토리 스킨 편집에 대한 기본 지식만 있으면 누구든 따라 할 수 있습니다. 

새 글 발행 여부 설정

카테고리 새 글 아이콘을 변경하기 전에 사전작업을 해주셔야 합니다. 티스토리 관리 ➜ 콘텐츠 ➜ 카테고리 관리 ➜ 하단 카테고리 설정 ➜ 카테고리에 새 글 발행 여부를 [표시합니다]로 설정

 

이렇게 하면 일단 새 글이 발행될 때마다 새 글 아이콘이 생성되게 됩니다.

SVG 파일 다운로드

이제, 자바스크립트를 넣어주기 전에 원하는 아이콘을 10x10 사이즈로 만드시거나, 다운로드하여 줍니다.

 

제가 일러스트레이터를 사용해서 SVG 파일로 몇 개 따와서 만들어 봤는데 혹시 마음에 드신다면 다운로드하셔서 활용해주시기 바랍니다! 색은 동일하게 #FAB03D으로 통일시켰습니다.

 

참고로 PNG / JPG / GIF 들은 픽셀이 줄어들거나 커지면 깨지는 현상이 있는데, SVG 파일은 픽셀이 깨지지 않기 때문에 아주 좋은 확장자입니다.

new-icon1.svg

0.00MB

new-icon2.svg

0.00MB

new-icon3.svg

0.00MB

new-icon4.svg

0.00MB

new-icon5.svg

0.00MB

원하시는 이미지 중 하나를 선택해서 받아주시면 됩니다.

파일 업로드

티스토리 관리 ➜ 꾸미기 ➜ 스킨 편집 ➜ html 편집 ➜ 파일 업로드 로 들어가서, 해당 SVG 파일을 첨부해줍니다.

자바스크립트 삽입

파일업로드 후, HTML 탭으로 가서 Ctrl + F를 눌러주고 </body>를 입력하시거나, 스크롤을 최하단으로 내려줍니다.

 

그리고 </body> 바로 위에 아래 코드를 복사해서 넣어줍니다.

  <!--new 새 포스팅 아이콘 스크립트-->
  <script>
    $('img[alt="N"]').each(function(){$(this).replaceWith('<img src="./images/new-icon.svg" class="newpost">')});
  </script>

그리고 수정해주셔야 할 부분은 new-icon.svg 부분입니다. 이곳에 다운로드하신 파일명을 복사해서 붙여 넣어 주신 후, 오른쪽 상단의 적용 버튼을 눌러주세요. (확장자 .svg 는 반드시 넣어주세요)

CSS 적용

스킨편집의 CSS 탭을 누른 뒤 시트 최하단에 아래 코드를 넣어주세요.

.newpost {
    padding-left: 3px;
    vertical-align: baseline;
    width: 10px !important
}

padding-left(왼쪽 여백)와 width(넓이)를 직접 수정하시면 됩니다. (이대로 적용하셔도 괜찮습니다)

결과 확인

이제 블로그 홈으로 돌아가서 카테고리 부분을 보시면 아래와 같이 정상적으로 새 글 아이콘이 출력되는 것을 확인할 수 있습니다.

아이콘이 뜨지 않을때 해결 방법

만약 아이콘이 제대로 적용되지 않았으면 아래 가능성 부분을 확인하셔서 해결해주시면 됩니다.

• 자바스크립트의 파일명이 제대로 입력되지 않음.
• 윈도우 : Ctrl + Shift + R  /  맥북 : Command + Shift + R 을 눌러 강력 새로고침과 캐시를 삭제해줌.
• CSS부분에 카테고리 태그 .link_tit img, .link_item img, .link_sub_item img 를 검색하고 display:none; 이라면 해당 부분 삭제.

 

만약 CSS부분이 적용이 안되고 이미지가 크게 나올때는, 위에 CSS부분은 삭제하시고 아래 스크립트를 사용해보세요.

  <!--new 새 포스팅 아이콘 스크립트-->
  <script>
    $('img[alt="N"]').each(function(){$(this).replaceWith('<img src="./images/new-icon5.svg" class="newpost" style="width: 10px;height:10px;padding-left: 3px;vertical-align: baseline;">')});
  </script>

어때요? 좀 이뻐졌나요? 

 

이렇게 이번에는 카테고리 새 글 발생 시 나오는 NEW 아이콘 변경하는 방법에 대해 알아보았습니다. 혹시 스킨에 적용시키시다가 막히는 부분이 있으시다면 댓글로 남겨주시면 최대한 도와드리겠습니다.

 

읽어주셔서 감사합니다🤟