워드프레스 아스트라 테마: 사이트 제목 글자 색상 및 크기 변경하는 방법

워드프레스 아스트라 테마는 현재 80만 개가 넘는 사이트에 설치되어 사용되고 있습니다. 최근 들어 사용자가 가파르게 늘어나고 있는 것 같습니다. 아스트라 테마 무료 테마에서는 사이트 제목 글자 색상과 크기 등을 상세하지 지정하려면 CSS를 이용할 수 있습니다.

워드프레스 아스트라 테마에서 사이트 제목 글자색과 글자 크기 변경 방법

아스트라 (Astra) 무료 버전에서는 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > Global > Colors > Base Colors에서 기본적인 글자 색상을 지정할 수 있습니다.

워드프레스 아스트라 테마: 사이트 제목 글자 색상 및 크기 변경

Base Colors에서 지정할 수 있는 옵션은 제한적이며 사이트 전체에 적용되기 때문에 개별 항목의 색상을 지정하려면 CSS에 의존해야 합니다.

아스트라 테마의 헤더는 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > Header에서 몇 가지 옵션을 지정할 수 있습니다.

Primary Header 섹션에서 헤더 레이아웃을 세 가지 레이아웃 중에서 선택할 수 있습니다.

아스트라 테마 헤더 레이아웃

무료 버전이라 선택할 수 있는 헤더 레이아웃이 제한적인 것 같습니다. 모바일에서는 로고와 메뉴를 좌우로 배치할 것인지, 아니면 상하로 배치할 것인지 선택할 수 있습니다. 폭(width) 설정은 콘텐츠 너비(Content Width) 또는 전체 너비(Full Width) 중에서 선택할 수 있습니다.

헤더에 표시되는 사이트 제목의 색상 등을 변경하려면 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 다음과 같은 코드를 추가하면 됩니다.

/* Astra 테마 헤더 사이트 타이틀 글자 서식 */
/* Change Site Title text color and font size in Astra */
.site-title a, .site-title a:focus, .site-title a:hover, .site-title a:visited {
    color: #1e73be;
    font-size: 1.2em;
    font-weight: 600;
}Code language: CSS (css)

테마에 따라 CSS 코드가 조금씩 다르지만, 기본적인 CSS 사용법을 익히면 다른 테마에서도 비슷하게 적용이 가능합니다. 예를 들어, GeneratePress 테마에서는 다음과 같은 CSS 코드를 사용하여 사이트 제목 텍스트 컬러를 변경할 수 있습니다.

/* Header title color in GeneratePress theme */
/* GeneratePress 테마 사이트 제목 글자색 */
.main-title a, .main-title a:hover, .main-title a:visited {
    color: #1e73be;
}Code language: CSS (css)

GeneratePress에서 사이트 제목 크기는 사용자 정의하기 내에서 제어가 가능합니다.

가볍고 빠른 워드프레스 테마를 원하는 경우 Astra 테마GeneratePress 테마가 괜찮은 옵션일 수 있습니다. 커스텀이 용이하다면 무료 버전으로 커스터마이징하여 사용하기에 좋을 것입니다. 유료 버전을 이용하면 보다 수월하게 커스텀이 가능합니다.

참고:

댓글 남기기

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드