워드프레스에서 기본 제공 입력 툴은 실망 그자체…

하지만 워드프레스 만큼 유연한 플랫폼도 없는데요. 그 중 제목 태그를 꾸며보는 법을 한번 정리해 보았습니다.

그대는 CSS를 아는가?..

저는 CSS를 잘 모릅니다. 그래도 구글링을 통해 충분히 가능합니다.

워드프레스 > 외모 > 사용자 정의하기 > 추가 CSS 로 이동합니다.

추가 CSS 편집

지금 제 블로그에 적용되어 있는 코드를 공개합니다.

.entry-content h1 {
	background: #FA5858;
	--border-left: 10px solid #F8F4F4;
}

.entry-content h2 {
	background: #F5DA81;
	border-left: 10px solid #F5DA81;
}

.entry-content h3 {
	background: #CEF6D8;
	border-left: 20px solid #CEF6D8;
}

.entry-content h4 {
	background: #F2E0F7;
	border-left: 30px solid #F2E0F7;
}

위 코드를 아래 이미지와 같이 ‘추가 CSS’ 창에 넣고 저장합니다.

내가 적용한 CSS를 굳이 설명하자면..

h4 이하 H태그는 사용하지 않기 때문에 h4까지만 기술했습니다. 더 많은 H태그를 사용하신다면 복붙하시면 되겠지요.

저 같은 경우는 H태그의 앞 부분에 1~4번 순으로 안으로 들어가게끔 border값을 주었고 백그라운드 색을 각각 주어 제목 태그라는 점을 강조했습니다.

정말 간단하게 작업을 마무리 했는데요. 이 정도만으로도 제목 태그를 확연히 구분할 수 있어 가독성이 높아지는 것 같습니다만… 그렇겠죠???

그럼 적용된 H태그를 볼까요

H1 태그입니다.

H2 태그입니다.

H3 태그입니다.

H4 태그입니다.

---

참고

HTML coler code를 정리해 둔 사이트입니다. 여기서 마음에 드는 색상을 골라 적용하시면 됩니다.

https://html-color-codes.info/Korean/

그리고 적용 테마에 따라 CSS가 다를 수 있습니다. 제 홈페이지 테마는 NEVE입니다.