티스토리 카테고리의 새로운 글 아이콘 변경하는 방법

카테고리 IT/티스토리

무찌마, 댓글

초고 2023. 3. 16.

새 글 아이콘 N

 

티스토리에 (댓글 아니고) 새로운 글을 등록하면 카테고리에 글이 등록되었다는 "N"자 아이콘이 새롭게 표시됩니다.

 

위 이미지를 기준으로 하여, 전체 글("글 모음"), 메인 카테고리("IT"), 서브 카테고리("티스토리") 3군데 아이콘이 나타납니다. 만약에 메인 카테고리만 사용한다면 2군데 표시가 되겠죠.

 

자신이 원하는 다른 이미지가 표시되도록 변경하는 방법 설명합니다.

1. 사용할 아이콘을 업로드합니다. 티스토리에서는 업로드한 이미지는 자동으로 "images" 폴더로 이동합니다.

2. style.css에 필요한 코드를 추가하고 업로드합니다.

 

사용하는 코드는 아래와 같습니다. 개인 사용 환경에 맞게 수정하면 됩니다.

 

/* style.css에 추가하는 코드 */

#category li a img {
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	content:url("./images/ico_new.svg");
}

 

업로드한 이미지는 "ico_new.svg"입니다. gif, jpg, png 모두 가능합니다. 업로드한 이미지 파일명을 집어 넣습니다.

사용한 이미지에 테두리가 있어서 원래 크기 가로와 세로를 12px에서 16px로 수정하였습니다.

 

적용이 안되면 사용 환경이 다르기 때문이므로 원본 코드로 다시 복귀하는 것이 좋습니다.

※ 코드를 수정할 때에는 항상 사전에 원본 코드의 백업을 만들어 놓고 시작합니다.

※ 위 코드를 추가할 때 충돌 가능성이 있는 기존 코드가 있는지 먼저 확인해야 합니다.

 

#category ul li a img

 

이 구문은 추가하는 구문과 충돌하여 후순위의 코드와 합쳐집니다. 어떤 결과가 발생할지 모릅니다. category에 img를 추가하는 것은 북클럽 스킨에서 새로운 글이 등록되었을 때뿐입니다. 티스토리 서버에서 새롭게 추가되는 문장입니다.

 

자신이 사용하는 스킨의 종류와 style.css의 코드를 자세하게 살펴 보고 필요한 코드만 정확하게 입력합니다.

댓글