워드프레스 쉬운 목차 플러그인: 목차 상자가 아래 요소와 너무 가까운 경우

워드프레스에는 다양한 무료 및 유료 목차 플러그인이 있으며 쉬운 목차(Easy Table of Conents)는 현재 50만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 목차 플러그인입니다.

쉬운 목차 플러그인을 사용할 경우 목차를 표시할 위치를 선택할 수 있으며, 경우에 따라 아래 요소와 너무 가까이 붙어서 보기 싫은 경우가 있을 수 있습니다. 그런 경우에는 CSS를 사용하여 목차 상자의 아래 여백을 조정하여 적당히 간격을 줄 수 있습니다.

목차

• 1 워드프레스 쉬운 목차 플러그인: 목차 상자가 아래 요소와 너무 가까운 경우 간격 조정하기
• 2 쉬운 목차 사용 시 애드센스 광고가 목차 상자 안에 표시되는 문제
• 3 참고

워드프레스 쉬운 목차 플러그인: 목차 상자가 아래 요소와 너무 가까운 경우 간격 조정하기

쉬운 목차를 설치한 경우 설정 » 쉬운 목차 » 일반에서 목차를 표시할 위치와 목차를 언제 표시할 것인지(예: 4개 이상의 소제목이 있을 경우에만 표시) 지정할 수 있습니다.

기본적으로 첫 번째 머리글(소제목) 앞에 표시하도록 설정되어 있습니다.

목차 박스의 아래 여백은 1em으로 설정되어 있습니다. 아래와 비슷하게 표시될 수 있습니다. 

사용되는 테마나 환경에 따라 목차 상자 아래에 간격이 너무 좁을 수 있습니다. 간격을 늘리고 싶은 경우 모양 » 사용자 정의 » 추가 CSS로 이동하여 다음과 같은 코드를 추가하도록 합니다. (또는 차일드 테마를 설치하여 차일드 테마 내의 스타일 시트 파일인 style.css 파일에 코드를 추가하는 것도 가능합니다.)

#ez-toc-container {
	margin-bottom: 1.5em;
}

위의 코드가 작동하지 않는다면 !important를 추가하여 작동하는지 확인해 보세요.

#ez-toc-container {
	margin-bottom: 1.5em !important;
}

업데이트 사항이 적용되지 않으면 캐시 플러그인의 캐시를 삭제하고 브라우저 캐시도 삭제한 후에 확인하시기 바랍니다.

목차 간격이 마음에 들 때까지 값을 적절히 조정하여 원하는 간격을 찾을 수 있습니다.

참고로 유료 TOC 플러그인인 Tocer에서는 설정에서 목차의 상하 여백을 조정할 수 있습니다.

기본적으로 20px가 설정되어 있으며 이 값을 적절히 조정할 수 있습니다.

쉬운 목차 사용 시 애드센스 광고가 목차 상자 안에 표시되는 문제

쉬운 목차를 사용할 때 애드센스 광고가 목차 상자 내부에 표시되는 문제를 호소하는 분들이 계십니다.

이 경우 애드센스 계정에서 광고 위치를 제외시킬 수 있는지 체크하고, 잘 안 되는 경우 수동으로 광고를 배치하는 것을 고려해 볼 수 있을 것입니다.

다른 방법으로 Tocer와 같은 유료 플러그인을 사용하면 목차가 지연 로드되어 광고가 표시된 이후에 목차가 표시될 것입니다. 그러면 광고가 목차 내부에 표시되는 문제가 발생하지 않을 것입니다.

참고

https://avada.tistory.com/3332

워드프레스 쉬운 목차 (Easy Table of Contents) 너비 조정하기

https://avada.tistory.com/3265

심플한 티스토리 자동 목차 스크립트 (자바스크립트 & CSS)

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)