쉬운 목차 TOC 플러그인 설치와 옵션 설정을 마치면 사용에는 지장이 없지만, 디자인을 조금 고쳐야 한다면 간단하게 설정할 수 있다.
위는 플러그인 기본 설정을 마친 상태의 TOC인데 글자 크기나 간격, 박스 색깔 등 변경이 필요하면 추가 설정을 진행하면 된다.
방법은 크게 플러그인 설정 화면 진행과 CSS가 있는데 하나씩 살펴보자.
1. 플러그인 옵션 설정
대시보드 – 플러그인 – Installed Plugins – 쉬운 목차 TOC Settings 메뉴를 클릭하면 화면에 Appearance 목록이 보일 것이다. 아래는 주로 사용하는 옵션을 정리하였다.
– Width : TOC 박스 너비 (지정 px, 퍼센트 선택)
– Alignment : TOC 박스 위치 (왼쪽, 가운데, 오른쪽)
– Title Font Size : TOC 목차 이름 크기
– Title Font Weight : TOC 목차 이름 굵기
– Font Size : TOC 박스 헤딩 글자 크기
– Font Weight : TOC 박스 헤딩 글자 굵기
– Child Font Size : 계층화된 Child 헤딩 글자 크기
* 본문의 H2가 가장 큰 헤딩이면 H3부터 child
– Theme : TOC 박스 안의 색깔 (원하는 색이 없으면 Custom 선택 후 아래 옵션 설정)
– Background Color : TOC 박스 안 색깔
– Border Color : 박스 테두리 색깔
– Title Color : TOC 목차 이름 색깔
– Link Color : 각 헤딩 글자 색깔
– Link Hover Color : 헤딩에 마우스 올렸을 때 색깔
– Link visited Color : 클릭한 헤딩 색
Title Font Size : 105%
Title Font Weight : Semi Bold
위는 목차 글자의 크기와 굵기만 조금 변경한 결과인데 박스 여백이나 child 헤딩 간격 등은 개발자 도구 검사를 해서 css에 코드를 추가해야 한다. (일부 워드프레스 무료 테마는 CSS 입력에 제한이 있을 수 있습니다)
2. CSS 코드 추가 설정
크롬 창이라면 F12 버튼이나 엣지 창에서 Ctrl+Shift+I 키를 입력하면 개발자 도구를 열 수 있다. 이제 TOC 박스에서 변경해야 하는 목록을 하나씩 검사해 보자.
요소 검사를 하면 개발자 도구 창에서 클래스 이름이 나오는데 원하는 코드 값을 추가해서 워드프레스 CSS 창에 입력 후 저장까지 하면 된다.
* 워드프레스 대시보드 – Appearance – Customize – CSS 추가 (테마마다 경로가 다를 수 있습니다)
위는 이 블로그에 설정한 값인데 코드를 복사하거나 원하는 만큼 숫자를 조정해서 설정을 마치면 된다.
