이 글에서는 워드프레스에서 글자수가 너무 작거나 크게 보일 경우, 기본적인 글자 크기를 키우거나 줄이는 방법을 알아보겠습니다. 한번 설정해 놓으면 블로그에서 글을 작성할 때 서체를 일일이 블록 지정해서 수정할 필요가 없어집니다. H태그 역시 마찬가지 입니다.
워드프레스 글자 크기 고정 CSS 설정 방법
- 워드프레스 > 외모 > 사용자 정의하기 > 추가 CSS > 입력 후 [발행함]
접속 후에 아래 코드를 입력하면 현재 보시는 블로그에 나오는 것과 같은 글자 크기가 나오게 됩니다. 또한 제목의 H2, H3, H4, H5, H6 태그의 크기 역시 동일하게 설정하여 겉에서 봤을 때는 H 태그의 크기를 통일시켜줬습니다.
내용을 설명하자면 “p{ }”에 해당하는 것이 본문의 글자 크기와 색상입니다. 23포인트로 했고 색상 코드는 오른쪽 옆에 블록 탭에서 색상을 누르면 색상 코드를 확인할 수 있는데 그곳에서 마음에 드는 색상을 골라주시면 됩니다.
ul의 내용은 아래와 같은 목록 구성의 내용입니다.
- “ul { }”는 이 목록의 글자 크기와 색상을 결정한다.
- “ol {}”는 이 숙자 목록의 글자 크기와 색상을 결장한다.
또한 h2부터 나오는 내용은 H태그, 즉 제목의 크기를 동일하게 맞춰주는 것이니 이대로 입력하고 넣어주세요.
이렇게 설정하고 자신의 블로그를 새로고침 해 보시면 설정이 바뀌어 있는 것을 확인할 수 있습니다. 이미 작성된 글에도 모두 동일하게 적용되니 이전 글까지 수정하는 수고를 덜 수 있습니다. 또한 이 설정을 변경했다고 해서 글 작성 시에 보였던 화면이 바뀐 것은 아니어서, 글을 작성할 때에는 이전과 같이 작은 글자로 보이고, 제목 또한 h2가 제일 큰 형태로 나타나니 이점 참고 하세요. 하지만 미리보기를 하면 바뀐 상태로 나온답니다. 아래는 그대로 복붙할 수 있게 CSS 코드를 적어놓았으니, 각자에 맞게 사용해 보세요.
p {
font-size: 23px;
color: #4D4D4D
}
ol {
font-size: 20px;
color: #605858
}
ul {
font-size: 20px;
color: #605858
}
h2 {
font-size: 32px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 32px;
}
h6 {
font-size: 32px;
}