(스토리스킨) 카테고리 괄호 없애기 (feat. HELLO 스킨)

현재 제 블로그에 적용된 스킨은 hELLO 4.1.3 버전입니다.


각 카테고리의 게시물 수는 표시되지만 괄호 안에 있으므로 제거해 보겠습니다.

---

카테고리 찾기

이력 관리 페이지 – 꾸미기 – 스킨 편집 – HTML에서 카테고리 부분 찾아보기.

• (##category_list_##) 치환기를 찾고 있다면 이 부분이 카테고리 목록입니다.
  
  

위의 스킨 편집 HTML에서 카테고리 부분을 찾는다면 대체품 밖에 없기 때문에 까다로울 수 있습니다.

위치만 알면 된다 카테고리 목록 위치를 추가로 사용자 지정하려면 HTML 코드와 CSS를 결합하여 작성할 수 있습니다.

이 부분의 HTML을 변경하는 것이 아니라 JS 스크립트와 CSS를 변경하는 것입니다.

• 블로그에서 사이드바를 활성화한 상태에서 개발자 도구를 엽니다.
  
  (F12 이상 – 개발자 도구)
• Ctrl + Shift + C를 사용하여 페이지 요소 검색을 실행합니다.
  
  
• HTML을 보려면 범주를 선택하십시오.
• 클래스 이름 또는 ID 이름을 확인하십시오.

스킨 편집에서 본 HTML과 조금 다르지 않나요? 피부에 대용으로 넣었기 때문에 보이지 않는 것 같다.

여기 태그에서 클래스 이름과 id 이름을 확인하고 스크립트와 css를 변경합니다.

---

JS 스크립트 추가

상단에 스크립트 작성 스킨 편집 HTML에서.

• 대괄호를 제거하는 코드입니다.
  
  – #카테고리 아이디 부분입니다.
  
  

<script>
  // 카테고리 글 숫자의 괄호 변경
  const categoryCount = document.querySelectorAll('#category .c_cnt');
  for (i = 0; i < categoryCount.length; i++) {
    let pattern = /(())/gi;
    let str = categoryCount(i).innerHTML;
    let n = str.replace(pattern, '');
    categoryCount(i).innerHTML = n;
  }
</script>

CSS 추가

제 블로그에 적용된 CSS인데 한번 참고해서 변경하시면 됩니다.

스킨 편집 – CSS -> #sidebar #category. tt_category. link_tit 이 부분을 찾을 수 있습니다.

/* 카테고리 글 수 커스텀 */
#sidebar #category .tt_category .link_item .c_cnt,
#sidebar #category .tt_category .link_sub_item .c_cnt {
  font-weight: initial;
  --tw-bg-opacity: .1;
  background: rgb(153 153 161 / var(--tw-bg-opacity));
  color: rgb(153 153 161 / var(--tw-text-opacity));
  --tw-text-opacity: .5;
  border-radius: 1rem;
  margin-left: 0.1rem;
  padding: 0.2rem 0.4rem;
  vertical-align: middle;
}
/* 카테고리 글 수 커스텀 */

/* 분류 전체보기 부분 */
#sidebar #category .tt_category .link_tit .c_cnt {
  --tw-bg-opacity: 0.1;
  background: rgb(153 153 161 / var(--tw-bg-opacity));
  border-radius: 1rem;
  margin-left: 0.1rem;
  padding: 0.2rem 0.4rem;
}
/* 분류 전체보기 부분 */

HELLO 4.1.3 버전에서 범주 괄호를 제거하는 방법을 배웠습니다.

부족하지만 읽어주셔서 감사합니다.

---

참조 블로그

(JS) 기록의 카테고리 괄호를 제거하는 방법

각 기록 범주의 게시물 수가 표시되며 번호는 괄호 안에 있습니다.

오늘은 티스토리 카테고리에서 괄호를 제거하는 방법에 대해 알아보겠습니다.

seons-dev.tistory.com