워드프레스 GeneratePress 테마 글쓰기 향상을 위한 CSS 설정 방법

워드프레스 GeneratePress 테마에서 효율적이고 집중력 있는 글쓰기를 위해 외모를 간단히 조정하는 CSS 설정 방법을 알아봅니다. 이번 글에서는 무료 버전에서도 글쓰기 환경을 최적화하는 효과적인 방법을 소개합니다.

효과적인 글쓰기를 위한 GeneratePress 테마 설정 변경

글씨 크기, 색상 (글 제목, 본문, h2….)
목록 리스트 글씨 크기, 색상
썸네일 숨기기
링크 표시줄 숨기기

글씨 크기, 색상 CSS 설정 (크기와 색상은 사용자에게 맞게 변경하세요.)

CSS 입력 위치 : 관리자 페이지 → 외모 → 사용자 정의하기 → 추가 CSS

① 글 제목 (h1 태그)
글 제목의 크기를 조정할 수 있습니다. ‘font-size’ 부분의 숫자를 사용자에게 맞게 변경하고 글씨의 색상도 원하는 색상표의 값으로 조정하세요. CSS 입력 화면 우측의 미리 보기를 통해 변경 사항을 확인할 수 있습니다. 변경 사항을 적용하려면 화면 왼쪽 상단의 ‘발행함’ 버튼을 클릭하여 저장하세요.

/* 문자 크기 */
h1 {
 font-size: 30px;
}

/* 문자 크기, 색상 변경 */
h1 {
 font-size: 30px;
 color: #000000
}

▲ 글씨 크기(font-size)는 30px, 글씨 색상(color)은 검은색을 나타냅니다.

② 본문
제목을 제외한 본문 내용의 글씨 크기와 색상을 조절할 수 있습니다.

/* 문자 크기, 색상 변경 */ 
p {
 font-size: 20px;
 color: #3b3b3b
}

③ h2, h3….
제목과 부제목, 그리고 소제목은 글씨 크기가 점점 작아지도록 구성됩니다. 만약 구성과 상관없이 동일한 크기로 표시되기를 원한다면 다음과 같이 변경할 수 있습니다.

h2 {
 font-size: 28px;
}

h3 {
 font-size: 28px;
}

h4 {
 font-size: 28px;
}

글씨 색상도 변경하고 싶다면 다음과 같이 추가로 입력합니다.

h2 {
 font-size: 28px;
 color: #000000
}

h3 {
 font-size: 28px;
 color: #000000
}

h4 {
 font-size: 28px;
 color: #000000
}

④ 아래는 목록 리스트의 글씨 크기와 색상을 변경하는 예시입니다.
목록의 크기를 적절하게 조정하여 내용을 구분 짓고 중요한 정보는 강조할 수 있습니다.

ul {
 font-size: 17px;
 color: #5c5c5c
}

li {
 font-size: 16px;
 color: #5c5c5c

GeneratePress 테마에서 본문 상단의 썸네일 숨기기 CSS

GeneratePress 테마를 사용하면 글 본문 상단에 자동으로 썸네일(Thumbnail)이 표시됩니다. 필요하지 않은 경우 이를 화면에 표시하지 않도록 설정할 수 있습니다.

.single .inside-article>.featured-image {
 display: none;
}

링크 표시(밑줄) 감추기 CSS

글 내의 링크 표시한 줄을 보이지 않게 설정하여 시선을 집중시키고 깔끔한 글쓰기 환경을 조성할 수 있습니다.

a {
 text-decoration: none!important;
}

■ 참고

마무리

여기까지 워드프레스 GeneratePress 테마의 글씨 크기, 색상, 썸네일 및 링크 표시줄 감추기를 간단한 CSS 설정 변경으로 조절해 보았습니다. 이를 통해 더욱 효과적인 글쓰기 환경을 구성할 수 있었습니다. 최적화된 글쓰기 환경에서 앞으로도 즐거운 블로깅 하시길 바랍니다.