WordPress에서 글꼴 색상을 변경하는 방법

웹사이트의 색 구성표는 웹사이트의 모양을 결정하는 전반적인 사용자 경험을 반영합니다. WordPress에는 여러 개의 무료 또는 유료 테마가 있을 수 있지만 여전히 개선의 여지가 있습니다. 이 개선은 배경을 변경하거나 글꼴 색상을 사용자 정의하여 수행할 수 있습니다. 이 기사에서는 WordPress에서 글꼴 색상을 변경하는 방법을 배웁니다.

색상 고려 사항

색상은 고객을 유도하기 위해 하이라이트를 추가하는 데 도움이 되는 타이포그래피의 중요한 부분입니다. 추가 색상이 없는 흰색 배경의 단순한 웹 사이트가 있다면 사용자 정의 분야의 평신도와 같습니다. 때때로 사람들은 너무 많은 색상 조합을 시도하여 가독성을 떨어뜨립니다. 가장 중요한 것은 방문자가 선호하는 글꼴이어야 한다는 것입니다.

따라서 배경과 혼합되지 않는 색상을 선택해야 합니다. 어두운 색상은 밝은 색상의 배경과 대조됩니다. 많은 곳에서 검은색이 기본값이지만 다른 어두운 색으로 변경할 수 있습니다. 어두운 글꼴 색상은 어두운 배경과 일치하지 않습니다. 예를 들어 검은색과 짙은 파란색을 사용하면 배경에 혼합되어 가독성이 떨어집니다.

그러나 밝은 색상은 배경과의 대비를 돋보이게 합니다. 웹사이트 디자인과 브랜딩 색상이 우선되어야 합니다. 브랜드에 특정 색상이 있는 경우 글꼴에 동일한 색상 또는 일치하는 색상을 구현할 수도 있습니다. 또한 독자의 마음에 색 진동을 채우는 데 도움이됩니다.

테마를 최대한 활용하기 위해 탐색해 보겠습니다.

1단계: 테마 확인

먼저 테마에 글꼴 색상을 변경할 수 있는 옵션이 있는지 확인해야 합니다.

확인하려면 관리 대시보드에서 모양 > 사용자 지정 으로 이동합니다.

테마에 따라 사용자 지정 설정이 다를 수 있습니다. 글꼴 색상에 대한 적절한 사용자 정의 설정을 찾기만 하면 됩니다. 우리 테마에서 색상 설정은 일반 설정 안에 있습니다. 귀하의 경우 다른 위치에 있을 수 있습니다.

보시다시피 이 설정에서 배경색과 머리글 텍스트 색상을 변경할 수 있습니다.

여기에서 테마에서 제공하는 템플릿 색상, 헤더 텍스트 색상 또는 배경 색상 을 변경할 수 있습니다.

사용자 정의 색상을 선택하기 위해 색상을 찾을 때까지 탐색할 수 있습니다. 특정 색상을 원할 경우에 대비하여 16진수 코드를 유지할 수도 있습니다. 색상의 16진수 코드를 알고 싶다면 W3Schools에서 제공하는 HTML 색상 선택기 를 사용할 수 있습니다. 이러한 변경 사항을 적용하려면 게시하십시오.

이제 WordPress에서 글꼴 색상을 변경하는 방법을 살펴보겠습니다. CSS.

2단계: 글꼴 검사 패널

이 검사를 실행하려면 Chrome 브라우저 또는 Firefox가 있어야 합니다. 먼저 웹사이트를 엽니다. 변경하려는 글꼴 항목을 살펴보십시오. 그것을 마우스 오른쪽 버튼으로 클릭하고 검사(Chrome) / 요소 검사(Firefox)를 클릭합니다.

동일한 창에서 두 개의 새 창이 나란히 또는 위아래로 표시되는 것을 볼 수 있습니다. 한 창에서는 요소를 볼 수 있고 다른 창에서는 해당 스타일을 확인할 수 있습니다. 여기서 다른 선은 다른 요소를 나타냅니다. 이제 아래와 같이 변경하려는 글꼴을 선택합니다.

이렇게 하면 동일한 요소에 대해 다른 창에 연결된 스타일이 표시됩니다. 자신의 테마에 맞는 것을 찾아야 합니다.

여기서 "p"는 단락을 나타내고 "entry-content"는 페이지 및 게시물의 내용을 선택하는 역할을 수행합니다. 스타일 창에서 사용할 수 있음을 추가로 확인할 수 있습니다.

괄호 안에 제공된 기존 스타일을 선택합니다. 따라서 새로운 라인을 얻게 됩니다.

"색상" 필드를 입력하고 원하는 색상을 선택할 수 있습니다. 필드를 입력한 후 탭을 누르면 해당 필드 아래에 사용 가능한 옵션 목록이 표시됩니다. 어떤 색상의 16진수 값이나 RGB를 알고 있다면 그것들도 언급할 수 있습니다.

3단계: 미리보기

스타일에서 이러한 변경을 수행하면 페이지의 텍스트가 실시간으로 변경됩니다. 이렇게 하면 이러한 스타일 변경 사항을 저장할 때 페이지의 실제 보기를 볼 수 있습니다.

이러한 변경 사항을 확인한 후 더 편집하고 싶다면 만족할 때까지 프로세스를 반복할 수 있습니다. 이러한 변경 사항만 관찰하기 때문에 여러 번 시도하고 테스트할 수 있습니다. 마지막으로 원하는 색상이 나오면 마우스 오른쪽 버튼을 클릭하고 브라우저에서 전체 규칙을 복사합니다.

CSS 스타일 삽입을 진행해 보겠습니다.

4단계: CSS 스타일을 삽입하여 글꼴 색상 변경

관리 대시보드에서 모양 > 사용자 정의 > 추가 CSS 로 이동합니다.

그러면 새 창에서 테마에 대한 사용자 정의 CSS가 열립니다. 이 창에서 CSS 관련 콘텐츠를 볼 수 있습니다.

여기에 앞서 복사한 스타일을 페이지 하단에 붙여넣습니다. "색상" 줄을 제외하고 복사된 텍스트 안의 다른 모든 줄을 제거해야 합니다.

이러한 변경 사항을 저장하려면 "게시" 버튼을 누르십시오. 이것은 CSS 스타일을 사용하여 글꼴 색상을 변경하는 가장 좋은 방법입니다.

특정 게시물 또는 페이지의 WordPress에서 글꼴 색상을 변경하는 방법

관리 대시보드에 있을 때 편집하려는 게시물/페이지를 엽니다. 편집 옵션을 클릭합니다. 특정 게시물이 열리면 오른쪽에 있는 차단을 클릭합니다. 거기에 색상 설정과 고급 설정이 표시됩니다. 색상 설정의 도움으로 블록의 개별 배경 색상과 텍스트 색상을 변경할 수 있습니다. 또한 고급 설정을 통해 CSS 클래스를 추가할 수 있습니다. 여러 CSS 클래스를 추가하려면 쉼표를 사용하여 구분합니다.

또한 사용자 정의 색상을 클릭하여 색상을 선택할 수도 있습니다. 원하는 색상을 얻지 못하면 슬라이더를 사용할 수 있습니다. 색상 선택기는 새로운 색상을 검색하는 데 도움이 됩니다. 사실, 당신은 또한 당신의 브랜드와 일치하는 색상을 얻을 수 있습니다.

색상 코드를 알고 있으면 16진수 코드를 직접 입력할 수도 있습니다. 이 방법은 단락 블록의 경우 텍스트와 배경의 색상을 모두 설정하는 데 유용합니다. 그러나 향후 다른 블록 유형에서도 이 사용자 정의 옵션을 기대할 수 있습니다.

마무리

이것은 WordPress에서 글꼴 색상을 변경하는 방법을 더 쉽게 배울 수 있기를 바랍니다. 더 궁금한 사항이 있으시면 아래에 남겨주세요.

추가 판독값