현재 워드프레스 테마로 원프레스(onepress)를 사용하고 있습니다. 최근에 구글 서치 콘솔의 모바일 사용 편의성 항목에 아래와 같이 텍스트가 너무 작아 읽을 수 없다는 경고 알림이 떴습니다.
워드프레스 원프레스 글자 크기를 바꾸는 것은 편집기의 블록-서체 크기 메뉴에서 S, M, L, XL를 선택함으로써 블록 별로 크기 수정을 하는 것으로 조절하고 있었습니다만, 이 방법은 매 블록마다 글씨 크기를 조절해 주어야 해서, 조금 더 Global하게 default 글씨 크기를 조절하는 법을 검색하다가 아래 CSS 수정 방법을 찾았습니다.
CSS를 이용한 워드프레스 원프레스 글자 크기 조절
1. 추가 CSS 메뉴 선택
generatepress를 비롯한 다른 테마 플러그인을 사용하는 경우, Typography 메뉴를 통해 조절하는 방식이 많이 소개가 되었는데, CSS 수정을 통해서 기본 글자 크기를 변경하는 방법은 잘 다뤄지지 않다보니 포스팅을 통해 기억해 두려고 합니다.
우선 워드프레스의 관리자 페이지에서 외모 > 추가 CSS를 클릭합니다.
2. 글자 크기 조절
글자 크기를 조절하기 위해서는 크기를 조절하고자 하는 글자의 분류(예: 헤더, 본문, 목록 등)와 font-size 명령어만 사용해주면 간단하게 조절이 가능합니다.
여기서 헤더 태그는 h2, h3, …, h6와 같이 헤더 이름을 그대로 사용하면 되고, 본문은 p, 목록은 ul 명령어를 사용하면 됩니다.
예를 들어, h2 태그의 글자 크기를 조절하기 위해서 아래와 같이 명령어를 입력합니다.
h2 {
font-size: 30px;
}
위와 같이 입력하면 h2 태그의 글자 크기를 24px로 정의하겠다는 것입니다. 24가 글자크기에 해당하는 숫자이고 단위는 픽셀입니다. 글자 크기를 조절해가면서 우측의 포스팅 창을 보면 수시로 글자 크기가 바뀌는 것을 확인할 수 있습니다.
마찬가지로, 본문의 글자 크기를 모두 바꿔 주기 위해서는 아래와 같이 타이핑해 줍니다.
p {
font-size: 24px;
}
목록의 경우에는 ul 다른 헤더태그에 대해서는 맨 앞의 글자만 알맞은 문자로 바꿔주고 font-size를 입력하면 됩니다.