생활정보

워드프레스 글자 크기 고정 CSS 설정 방법

이 글에서는 워드프레스에서 글자수가 너무 작거나 크게 보일 경우, 기본적인 글자 크기를 키우거나 줄이는 방법을 알아보겠습니다. 한번 설정해 놓으면 블로그에서 글을 작성할 때 서체를 일일이 블록 지정해서 수정할 필요가 없어집니다. H태그 역시 마찬가지 입니다.



워드프레스 글자 크기 고정 CSS 설정 방법

CSS 입력 예시



접속 후에 아래 코드를 입력하면 현재 보시는 블로그에 나오는 것과 같은 글자 크기가 나오게 됩니다. 또한 제목의 H2, H3, H4, H5, H6 태그의 크기 역시 동일하게 설정하여 겉에서 봤을 때는 H 태그의 크기를 통일시켜줬습니다.

내용을 설명하자면 “p{ }”에 해당하는 것이 본문의 글자 크기와 색상입니다. 23포인트로 했고 색상 코드는 오른쪽 옆에 블록 탭에서 색상을 누르면 색상 코드를 확인할 수 있는데 그곳에서 마음에 드는 색상을 골라주시면 됩니다.

ul의 내용은 아래와 같은 목록 구성의 내용입니다.

  1. “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;
}

Exit mobile version