오늘은 워드프레스 글을 작성 시, 특정 텍스트 글자색 설정을 위한 블록 편집기 팁에 대해 알려드리고자 합니다.
워드프레스 블록 편집기
워드프레스 5.0 버전 이후부터는 블록 편집기(일명 구텐베르크)가 쓰입니다. 블록 단위로 텍스트, 이미지를 추가하는 방식의 에디터입니다. 기존의 워드프레스 에디터는 클래식 편집기로 텍스트를 추가하는 방식의 에디터로 많은 분들이 아직 사용하고 계실 겁니다. 하지만, 현재 이 블록 편집기의 기능이 많이 향상되고 안정화되었기에, 블록 편집기 사용을 추천합니다.
그런데 이 블록 내의 텍스트에서 특정 텍스트만 지정하여서 글자색을 변경하거나 배경색을 다르게 하고 싶은 경우가 생기게 됩니다. 이 경우, 블록 편집기 내의 강조 기능, Html 코드로 style지정, 플러그인 설치를 이용한 방법 등 다양하게 텍스트의 크기나 색상을 변경할 수 있습니다.
오늘은 이 블록 편집기를 통해 텍스트의 디자인을 변경하는 방법에 대해 알아보도록 하겠습니다.
워드프레스 블록 편집기에서 특정 텍스트의 글자색 설정하는 방법
단순하게 텍스트 블록의 텍스트의 색상을 설정하게 되면, 해당 블록 안의 전체 텍스트가 변경됩니다. 기본적으로 해당 기능으로는 문단 블록을 선택하고 우측의 설정 패널의 색상 메뉴에서 텍스트와 배경의 색상을 지정할 수 있습니다.
하지만 특정 텍스트를 골라서 설정하려면 추가적인 작업이 필요한데요. 3가지 방법으로 나누어 설명드리겠습니다.
1.블록 편집기의 강조 기능 사용
첫번째는 블록 편집기에 있는 강조 기능을 사용하는 것입니다. 작업량이 많지 않아 그냥 특정 글자색을 변경할 때 추천드립니다.
강조하고자 하는 텍스트를 드래그하여 선택한뒤, 텍스트 편집 박스에 포함되어 있는 아래 화살표 표시를 클릭한 다음, 강조를 선택합니다.
그러면 다음과 같은 텍스트와 배경의 글자색을 지정할 수 있는 색상표가 나오게 됩니다. 각 화살표로 표시된 부분을 원하는 색에 맞게 마우스로 옮겨서 지정합니다.
참고로, 이 방법은 글이 길어지거나 강조할 텍스트가 많아지면, 시간 소요가 너무 많아지고 비효율적인 작업이 됩니다.
따라서, 특정 강조 효과를 여러 개로 정리하여서 원하는 스타일의 글자를 지정하고 싶다면, 아래 CSS 클래스를 이용하는 방법을 참고해주세요.
2.CSS 클래스를 지정하여 style 코드 지정하기
블록 편집기는 텍스트 블록을 HTML 편집기 모드로 전환한 다음, HTML 코드를 추가한 뒤, CSS코드를 입력하여 스타일을 지정하는 방법입니다.
블록 컨트롤러의 맨 오른쪽 점 세 개로 되어있는 메뉴를 클릭한 뒤, 아래의 HTML로 편집을 선택해줍니다.
기존의 블록 편집기에서 <p> </p>가 포함된 HTML이 나타나게 됩니다. 여기서 특정 텍스트 양옆에 <span> </span>태그를 넣습니다.
그리고 첫번째 <span> 태그 안에 class=”text style1″이라는 코드를 넣어줍니다. 해당 코드는 text style1이라는 class로 지정했다는 뜻입니다.
이제 해야할 것은 해당 class의 CSS 코드 즉, 디자인을 설정하는 코드를 지정해야 합니다. 워프 관리자 페이지에서 모양(외모) > 사용자 정의 > 추가 CSS 로 들어갑니다. 참고로 저는 블로그 운영 최적화에 용이하게 디자인 설정도 좋은 GeneratePress 테마를 이용하고 있습니다.
수익화 블로그에 적합한 GeneratePress 테마 알아보러 가기
추가 CSS를 클릭하면, 코드를 입력할 수 있는 창이 뜨게 되는데요. 여기서 위와 같은 코드를 입력합니다. text_style1은 <span>안에 넣은 class명입니다. 클래스를 여러 개 설정하여서 지정한 색상에 따라 골라 사용할 수 있습니다.
공개 버튼을 누른 뒤, 위의 텍스트가 실제로 어떻게 보여지는지 미리보기를 통해 확인해보겠습니다.
지정한 클래스명에 맞게 각각 파란색, 빨간색 색상이 적용된 것을 확인할 수 있습니다. 이렇게 한 번 지정해놓으면, <span> 태그에 미리 설정한 class명을 지정하는 것으로 간편하게 특정 텍스트 글자색 설정을 할 수 있습니다.
3.플러그인 사용하여 특정 텍스트 글자색 설정하기
위에서 설명드린 HTML과 CSS 코드 적용법이 너무 어렵게 느껴지신다면, 텍스트에 형광펜 효과를 주는 간편한 플러그인 설치를 통해 특정 텍스트 글자색 설정으로 강조 효과를 넣을 수 있겠습니다.
텍스트 하이라이터라는 플러그인입니다. 위의 플러그인을 다운로드하여서 워드프레스에서 활성화를 시켜줍니다.
[high]특정 텍스트[/high]라는 형식의 숏코드를 적용하여 형광 효과를 넣을 수 있습니다.
[high]특정 텍스트[/high] -> 노란색으로 적용
[high color="red" bg="blue"]테스트[/high] -> 파란색으로 하이라이트한 뒤, 텍스트 색상은 빨간색으로 지정.기본적으로 노란색으로 형광 효과가 되며, 코드 추가를 통해 글자색과 배경을 바꿀 수 있습니다. 이 텍스트 하이라이터 플러그인의 자세한 활용법은 아래 글을 참고해주시면 되겠습니다.
텍스트 하이라이터 플러그인 활용법 보러가기이상으로 워드프레스 블록 편집기를 활용하여, 특정 텍스트 글자색 설정을 하는 3가지 방법을 알아보았습니다.
<추가로 볼만한 글>
가독성을 높이는 이미지 그림자 효과 적용하는 법 알아보기수익화 블로그에 적합한 GeneratePress 테마 알아보러 가기
