“새 글만 열면 글자가 왜 이렇게 작고 흐리지…?” 누구나 한 번쯤 겪는 순간이죠. 다행히 해결은 간단합니다. 이 글에서는 OnePress(클래식 테마) 를 쓰는 초보자도 따라 할 수 있게, “글 추가할 때 기본 글자 크기·색”을 한 번에 고정하는 방법을 차근차근 정리합니다. 덤으로 블록 에디터(글쓰기 화면) 에도 똑같이 적용되는 팁, 글을 매번 같은 서식으로 시작하는 패턴 요령, 캐시 비우는 순서까지 깔끔히 넣었습니다.
핵심 요약
- 모양 → 사용자 정의 → 추가 CSS에 몇 줄만 넣으면 방문자 화면(프런트) 글자가 바로 또렷해집니다.
- 에디터 미리보기(글쓰기 화면) 도 같은 크기·색으로 보이게 별도 규칙을 추가합니다.
- Cloudways + Breeze를 쓰면 저장 후 Purge All Cache와 Purge Varnish로 마무리!
1) 방문자 화면(프런트) 기본값 먼저 고정하기
경로: 워드프레스 관리자 → 모양 → 사용자 정의 → 추가 CSS
아래 코드를 통째로 붙여 넣고 공개(저장) 를 누르세요.
/* OnePress: 본문 기본 글자 크기·행간·색 /
body, .site-content, .entry-content, .page-content, .single .entry-content { font-size: clamp(17px, 1.02rem + 0.25vw, 19px); line-height: 1.8; color: #222; / 흐리다 싶으면 #111~#333 사이 권장 */
}
/* 문단 간격 살짝 넓혀 가독성↑ */
.entry-content p { margin: 1em 0 1.1em; }
/* 링크는 명확하게: 색 + 밑줄 */
.entry-content a { color: #1a73e8; text-decoration: underline; }
.entry-content a:hover, .entry-content a:focus { text-decoration: none; }
/* 사이드바 글자도 살짝 또렷하게 */
.widget_text, .widget_recent_entries, .widget_categories {
font-size: 0.95em; color: #333;
}
왜 이 값일까?
clamp(17px, …, 19px)는 화면 크기에 맞춰 17~19px 사이에서 자연스럽게 반응합니다. 숫자를 고정하고 싶다면font-size: 18px;처럼 바꾸면 됩니다.color: #222는 “거의 검정”이라 흐릿함을 크게 줄여 줍니다. 접근성과 가독성 면에서 구글·네이버 모두 좋아하는 방향이에요.
2) 글쓰기 화면(블록 에디터)에도 똑같이 보이게
같은 화면에서 추가 CSS에 아래도 이어 붙이세요. 에디터(미리보기)와 프런트가 최대한 동일해집니다.
/* Gutenberg 에디터에도 동일 타이포그래피 적용 */
.editor-styles-wrapper,
.editor-styles-wrapper .wp-block {
font-size: 18px !important;
line-height: 1.8 !important;
color: #222 !important;
}
주의: 복붙한 문단에 인라인 스타일(글자색/크기)이 묻어 있으면 위 규칙이 이기지 못할 수 있어요. 그럴 땐
- 문단 클릭 → 오른쪽 블록 설정 → 색상/타이포그래피 ‘재설정(Reset)’
- 또는 Ctrl+Shift+V(서식 없이 붙여넣기) 를 사용하세요.
3) OnePress에서 테마 옵션은 얼마나 쓰나?
무료판 OnePress는 Colors(색상)·Typography(타이포그래피) 옵션이 제한적이라 “추가 CSS”가 빠릅니다. 그래도 외모 → 사용자 정의에서 지원되는 항목이 보이면 먼저 설정해 두고, 부족한 부분만 CSS 로 덮어쓰세요. (중복 설정은 문제 없습니다. CSS가 최종 보정자 역할을 합니다.)
4) 더 단단하게: 차일드 테마로 에디터 전용 스타일 등록(선택)
테마 파일을 만질 수 있다면, 차일드 테마의 functions.php에 아래를 넣고 같은 위치에 editor.css를 만들면 에디터 전용 스타일을 불러옵니다.
// 차일드 테마 functions.php
add_action(‘after_setup_theme’, function () {
add_theme_support(‘editor-styles’); // 에디터 스타일 지원
add_editor_style(‘editor.css’); // /wp-content/themes/자식테마/editor.css
});
editor.css 예시:
body, .wp-block { font-size: 18px; line-height: 1.8; color: #222; }
5) 저장했는데 변화가 없어요? 캐시 3종 점검
Cloudways + Breeze 환경이라면 필수 체크입니다.
- Breeze → Purge All Cache
- Purge Varnish (Cloudways 서버 캐시)
- 브라우저 강력 새로고침(Shift+F5)
이후 시크릿 창으로도 확인해 보세요. 캐시가 잡혀 있으면 “나만 옛날 화면”을 보게 됩니다.
6) 보기 좋은 글의 기준(가독성 가이드)
- 본문 글자 크기: 18–20px
- 행간(Line-height): 1.7–1.9
- 본문 색: #111~#333 (연한 회색은 피하기)
- 링크: 본문과 명확한 대비 + 밑줄 유지 권장(접근성·SEO 측면에서 유리)
7) 자주 묻는 질문(FAQ)
Q. 에디터에서는 크게 보이는데, 발행하면 작아져요.
A. 프런트용 CSS(1단계) 와 에디터용 CSS(2단계) 를 둘 다 넣어야 합니다. 하나만 넣으면 화면이 달라 보일 수 있어요.
Q. 글이 여기저기 연하게만 보여요.
A. 복사·붙여넣기 시 묻어온 인라인 스타일 때문일 확률이 높습니다. 서식 없이 붙여넣기(Ctrl+Shift+V) 를 습관화하세요.
마무리
한 번만 제대로 세팅해 두면, 이후 글쓰기는 놀랄 만큼 편해집니다. 글이 처음부터 크게·진하게 시작되면 체류 시간과 가독성이 좋아지고, 이는 자연스럽게 구글·네이버 SEO 에도 긍정적인 신호로 작용합니다. 오늘 10분 투자해서, 앞으로의 글쓰기 시간을 매번 10초씩 아껴 보세요.