워드프레스 본문 제목 스타일 바꾸는 방법

워드프레스의 장점은 하나부터 열까지 본인의 스타일로 꾸밀 수 있다는 점인데요, 막상 자신만의 스타일로 사이트를 꾸미려고 하다보면 생각보다 어려운 것이 워프이기도 합니다.

그래도 약간의 CSS 지식이 있으면 그리 어렵지 않게 자신만의 스타일로 꾸밀 수도 있습니다.

워드프레스 테마 CSS 설정하기

워드프레스 테마 CSS를 설정하기 위해서 테마 편집기까지 갈 필요는 없습니다. 사용자 정의하기 메뉴로 들어가서 추가 CSS만 잘 이용해도 최소한 본문 내 들어가는 것들에 대한 것은 꾸밀 수 있더군요.

그 중에서도 제목 스타일은 이것만 기억하면 됩니다.

워드프레스의 거의 대부분 스킨, 아마 전체 스킨의 본문 내용은 entry-content 라는 클래스 안쪽으로 묶여서 들어가게 됩니다.

그럼 본문 제목은 뭐로 들어갈까요? 바로 entry-content 내에 있는 h2, h3, h4, h5가 되는 것입니다.

h1이 가끔 들어가는 테마가 있기는 하지만, SEO에 맞춰서 설정된 테마는 h2부터 본문에 들어가게 됩니다.

그래서 테마 CSS를 꾸밀 때 제목 스타일을 바꾸는 방법은 아래와 같이 작성해 넣으면 됩니다.

제목 스타일 CSS

추가 CSS 입력하는 칸에 entry-content를 적으면서 해당 클래스 내부에 들어가는 각종 태그의 스타일을 조정하면 되는 것입니다.

제목 스타일은 아래와 같이 하면 됩니다.

.entry-content h2 { font-weight: 600; }

위와 같이 입력하면 제목2로 선택해서 본문에 넣은 제목은 폰트를 조금 굵게 바꿔주게 됩니다. BOLD로 하는 것과 거의 같기는 합니다. 저처럼 웨이트 조정으로 해도 되고 bold 값으로 입력하는 것도 됩니다.

제목 스타일 말고 해당 클래스에 들어가는 모든 폰트의 크기를 16px로 고정하고 싶다면 아래와 같이 코드를 만들어 넣어도 됩니다.

.entry-content * { font-size : 16px; }

위와 같이 입력하면 본문 내에 들어가는 모든 폰트가 16px로 되는 것인데, 이렇게 전체 태그에 다 영향을 주게 하는 코드는 테마를 깨지게 할 수도 있기 때문에 그리 추천하지는 않습니다.

하지만, 제목 정도는 확실히 제가 구분해서 사용하지 않습니까? 그래서 제목 스타일은 직접 바꿔도 되는 것이죠.

이런 방법으로 워드프레스 CSS 편집을 할 수 있습니다.

Leave a Comment