워드프레스 목록 글자 크기 변경 폰트 사이즈

워드프레스 목록 내의 글자 크기를 바꾸는 법 — 워드프레스 목록 글자 크기 변경

워드프레스의 가독성을 높이기 위해 폰트 사이즈를 키우시는 분들 많으시죠? 워드프레스의 글꼴 크기는 블록 편집기로 조정이 가능합니만 블록별로 일일히 변경해야하기 때문에 여간 불편한 게 아니죠. 그래서 ‘추가 CSS’ 기능을 이용해 원하는 기본 글 사이즈를 지정해 두면 시간을 많이 절약할 수 있습니다.

워드프레스 목록 글자 크기 변경 필요성

그런데 본문의 글 크기를 키운 상태에서 목록기능을 사용하게 되면 목록의 글들만 사이즈가 작아 전체적인 글자 크기가 맞지 않습니다. 이를 맞추기 위해서 ‘추가 CSS’에 코드를 추가하여 전체적인 글자 크기를 맞출 수 있습니다.

또는 목록 글자의 크기나 색깔을 바꿔서 목록을 강조하는 효과를 가질 수도 있습니다.

목록 폰트 사이즈를 변경하시기 전에

사용하는 테마에 따른 오류 등의 위험이 있으니 감수하실 분들만 해보시기를 바랍니다. CSS 코드를 추가하기 전에 백업을 해두는 것도 좋겠네요. 많이 쓰시는 원프레스(OnePress)와 제너레이트프레스(GeneratePress)에서는 적용이 잘 되었음을 확인했습니다.

그리고 이 코드를 추가하면 블로그 내의 모든 글에 적용이 됩니다. 즉, 이전에 쓴 글에도 적용이 되기 때문에, 행의 배열이 달라지는 등의 변경이 있을 수 있습니다.

목록 글자 사이즈 변경 방법

워드프레스 목록에는 두 가지 옵션이 있습니다.

왼쪽에 보이는 것처럼 불렛 포인트라고 불리는 점 모양의 목록 형식입니다.

그리고 이렇게 숫자로 순서를 매길 수 있는 목록 형식이 있습니다.

이 두 목록을 바꾸기 위해 두 가지의 코드를 추가해 보도록 하겠습니다.

1. 디자인 ⇒ 사용자 정의하기로 들어가기

워드프레스 왼쪽 메뉴 탭 중 ‘디자인‘을 클릭하면 하위 메뉴가 나옵니다. 그 중간쯤에 있는 ‘사용자 정의하기‘를 클릭합니다.

2. 추가 CSS 클릭

사용자 정의하기를 눌러 들어가면 왼쪽에 메뉴들이 뜹니다. 그중 가장 아래에 있는 ‘추가 CSS‘를 클릭합니다. 왼쪽에 코드를 넣을 수 있는 공간이 나타납니다.

3. 코드 복사하여 붙여넣기

아래의 코드를 복사하여 빈 공간에 붙여넣기 합니다. 그리고 ’22’를 다른 숫자로 변경하여 폰트 크기를 조정하면 됩니다. 참고로 색깔도 변경할 수 있도록 코드를 만들었습니다.

/* 목록 숫자 폰트 */
ol {
font-size: 22px;
color: #353535;
}

/* 목록 불렛 폰트 */
ul {
font-size: 22px;
color: #353535;
}

워드프레스 디자인, 사용자 정의하기, 추가 css를 차례로 클릭하여 코드를 추가합니다. — 디자인, 사용자 정의하기, 추가 CSS를 차례로 클릭하여 코드를 추가합니다.

코드 설명을 잠깐 해드리면,

/* 목록 숫자 폰트 */
⇒ 코드 설명을 해둔 것으로 나중에 수정해야 할 일이 있을 때 이 코드가 무엇인지 쉽게 알아볼 수 있습니다.

ol {
⇒ 숫자 목록을 의미합니다. ul은 불렛 목록입니다.

font-size: 22px;
⇒ 폰트 사이즈를 조정할 수 있고, 숫자 ’22’를 본인의 블로그 글에 맞게 바꿔주면 됩니다.

color: #353535;
⇒ 글의 색깔을 바꿀 수 있습니다. 색 코드를 쉽게 찾으실 수 있는 사이트를 아래에 링크 걸어두었습니다.
}

컬러 코드 사이트

HTML 컬러 코드 (html-color-codes.info)