티스토리 카테고리 new 아이콘, 원하는 이미지로 변경하는 초간단 방법 (북클럽 스킨 CSS 코드 공유)

티스토리블로그 new아이콘 변경방법

티스토리 북클럽 new 아이콘이 너무 흐릿한데?

저는 현재 북클럽 스킨을 사용하고 있는데요. 새 글을 발행할 때마다 홈화면에서 보이는 카테고리에 new 버튼이 굉장히 거슬리더라고요. 회색 아이콘이라 너무 밋밋하게 느껴져서요.😢

 

 

 

그래서 북클럽 스킨의 카테고리 new 아이콘을 변경해보았습니다. ✨

 

[좌] Before → [우] After

 

 

 

 

코드 1도 모르는 저도 따라할 수 있을만큼 간단하고, 본문에 CSS코드도 포함하고 있으니 NEW아이콘을 변경하고 싶으신 분들은 꼭 끝까지 읽어주시길 🙏 

 

---

CSS 코드로 사이즈 확인하고, 원하는 이미지 만들기

 

00. 우선, 카테고리에 보이는 NEW아이콘 이미지의 url주소를 확인해야 합니다. 변경하려는 이미지 위에 마우스를 올려놓고 마우스 오른쪽 버튼을 눌러 [검사]를 실행해주세요. 

 

마우스 오른쪽 눌러 검사를 실행해주세요!

 

 

 

 

 

 

 

01. 확인해보니 북클럽 스킨에선 사이즈 12X12px에 1:1비율 그리고 소스 주소가 나옵니다. 여기에 원하는 이미지를 만든 후 소스 주소를 변경하기만 하면 됩니다. 

검사를 실행했을 때 모습

 

 

 

 

 

 

 

 

 

02. 새로운 아이콘을 찾을 수 있는 사이트에 접속합니다. 개인적으로. 픽셀별로 아이콘 다운로드가 가능한 Icons8 사이트를 추천해요.

🔗무료 아이콘 사이트 : Icons8

Free Icons, Clipart Illustrations, Photos, and Music

 

 

 

 

 

 

 

 

 

03. 사이트 접속 후, new를 검색하면 다양한 아이콘을 확인할 수 있어요.

new라고 검색해보세요!

 

 

 

 

 

 

 

04. 가능한 크기가 작은 아이콘을 골라주세요. 저도 임의로 선택해볼게요. 아래 이미지처럼 녹색의 다운로드 버튼을 누르면 픽셀을 선택할 수 있는 창이 나옵니다. 

* 다운로드 아래 Edit 항목에서 색상이나 배경, 각도 등을 바꿀 수도 있어요!

원하는 아이콘을 선택 후, 다운로드

 

 

 

 

 

 

 

 

 

 

05. 파일형식은 PNG, 사이즈는 24x24px 또는 아래 Custom size로 12x12px를 선택하세요. (개인적으로 아이콘의 선명도는 24x24px이 더 좋았어요) 

아이콘 사이즈 설명 화면

 

 

 

 

 

 

 

 

 

06. 이제 다운로드 한 파일을 티스토리에 적용해볼게요. 티스토리 관리페이지에서 [스킨편집] 페이지로 이동합니다. CSS옆에 있는 파일업로드 탭을 눌러주세요. 

파일업로드를 먼저해야 합니다.

 

 

 

 

 

 

 

 

07. 아래 추가 버튼을 눌러 다운로드 받은 아이콘을 추가해주세요. 저는 24픽셀의 아이콘을 삽입했어요. 완료되면 아래 이미지처럼 아이콘이 추가된 걸 확인할 수 있어요.

아이콘이 추가된 걸 확인할 수 있어요!

 

 

 

 

 

 

 

 

 

08. 업로드한 파일명 위에 마우스를 올려놓고 마우스 오른쪽 클릭해서 [링크주소복사]를 해주세요.

링크를 우선 복사해둡니다.

 

 

 

 

 

 

 

09. 이제 CSS코드를 수정할 차례입니다. CSS편집창의 가장 아래쪽에 아래의 코드를 복사하여 붙여넣어주세요.

/* 새로운 글 'N' 아이콘 변경 (가로 폭 확장) */ img[src*="new_ico_1.gif"] {     width: 0 !important; /* 기존 이미지는 숨깁니다. */     height: 12px !important; /* 아이콘의 세로 크기 */     padding-left: 40px !important; /* ★ 아이콘이 표시될 가로 폭입니다. 이 숫자를 조절하세요. */     background: url('./images/your-new-icon.png') no-repeat center !important; /* 새 아이콘 이미지 (가운데 정렬 추가) */     background-size: contain; /* 아이콘 크기를 영역에 맞게 조절 */ }

 

 

 

 

 

 

 

 

 

10. 붙여넣은 코드에서 [background: url] 부분을 업로드한 실제 파일 이름으로 변경해야 합니다. 괄호안 콤마 사이에 복사한 url를 붙여넣어주세요. 

복사한 링크 주소를 반영한 모습

 

 

 

 

 

 

 

 

 

 

[완료] 상단의 적용버튼을 눌러주면 끝! 카테고리에 새 이미지로 반영된 모습입니다. 

카테고리에 새 아이콘이 반영된 모습

 

 

 

---

제가 만든 'NEW 아이콘' 다운 받을 수 있어요

사실, 저는 무료 아이콘 사이트에서 제공하는 건 어쩐지 마음에 들지 않아서 그냥 일러스트로 NEW 아이콘을 직접 만들었어요. 혹시 위의 과정으로 반영이 되지 않거나 좀 더 쨍한 컬러의 아이콘을 원하신다면, 제가 만든 아이콘을 다운로드 받아 적용해보세요😉

 

 

 

🔻

my_new_icon_01.png

0.00MB

 

 

 

 

 

---

 

 

 

오늘의 기록은 여기까지 입니다

다음엔 더 쓸모있는 경험을 가져올게요

🫰

 

 

---

 

 

 

 

덧. 경험하고 쓴 후기 모음

🔗내돈내산 | 중랑구 면목역 디멘션오피스, 프리랜서에게 추천? 비추천? 1일권 사용 후 솔직 후기

내돈내산 | 중랑구 면목역 디멘션오피스, 프리랜서에게 추천? 비추천? 1일권 사용 후 솔직 후기

 

🔗세금 폭탄 피하는 프리랜서 업종코드 (블로그 대행, 숨고 디자이너 필독)

세금 폭탄 피하는 프리랜서 업종코드 (블로그 대행, 숨고 디자이너 필독)