워드프레스 제목, 카테고리 css 꾸미기

워드프레스에서 알림판으로 들어가서

외모(테마) → 추가 css 에서 적용할 수 있습니다.

워드프레스 - 외모(테마) - 추가 css

1. 제목 class 이름 확인

크롬 개발자도구 (크롬에서 F12)

chrome 개발자 도구로 확인하니, h2.wp-block-heading이라고 나옵니다.

2. 제목 추가 css 작성

보통 h2와 h3로 제목을 쓰기 때문에 아래처럼 수정합니다.

제목 H2 워드프레스 추가 css

제목 H3 워드프레스 추가 css

h2.wp-block-heading {
  padding-bottom: 10px; 
  padding: 6px; 
  border-style: solid; 
  border-width: 0px 0px 1px 12px;
  border-color: #CDCDCD;
}

h3.wp-block-heading {
  padding-bottom: 10px;
  padding: 0 0 6px 0;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #CDCDCD;
}

3. 하위-카테고리 class 이름 css 확인

추가로 사이드 메뉴의 카테고리에서
상위 카테고리와 하위 카테고리 구분이 잘 안됩니다.

크롬 개발자도구 - 워드프레스 서브 카테고리

chrome 개발자 도구로 확인하니, ul.children이라고 나옵니다.

4. 하위-카테고리 추가 css 작성

앞에 표시를 붙이고, 들여쓰기 공간을 넣어줍니다.

ul.children {
  line-height: 1.2;
  padding: 0 0 0 0;
  border-style: solid; 
  border-width: 0px 0px 0px 5px;
  border-color: #DADADA;
  text-indent: 5px;
}

아래는 결과물입니다.

하위 카테고리가 앞에 도형이 붙고, 우측으로 위치가 이동했습니다.

---

이전에 티스토리 css 꾸미기로 워드프레스에도 적용할 수 있어 관련 내용 기록으로 남깁니다.