워드프레스 이미지 캡션 스타일 변경하는 방법(+GeneratePress 테마)

이 글에서는 워드프레스 테마 중 하나인 GeneratePress에서 이미지 캡션 스타일을 변경하는 방법에 대해 살펴보겠습니다.

참고로 GeneratePress 테마는 꼭 필요한 기능만 탑재하여 속도가 빠른 것이 특징입니다. 워드프레스 사이트 속도가 느려 고민인 경우 GeneratePress 같은 가벼운 테마를 이용하는 것도 한 방법일 수 있습니다.

GeneratePress 테마에서 워드프레스 이미지 캡션 스타일 변경하기

GeneratePress 테마에서 이미지 캡션은 글자 크기가 본문과 비슷하고 색상도 비슷하여 본문 텍스트와 구분이 잘 안 되어 마음에 들지 않을 수 있습니다.

GeneratePress 테마의 기본 이미지 캡션 스타일

이미지 캡션이 마음에 들지 않으면 CSS 코드를 사용하여 쉽게 이미지 캡션의 스타일을 입맛에 맞게 변경할 수 있습니다. 다음 CSS 코드를 워드프레스 관리자 페이지 > 외모(테마 디자인) > 사용자 정의하기 > 추가 CSS의 맨 아래에 추가하도록 합니다.

/* 워드프레스 테마 GeneratePress 이미지 캡션 스타일 변경 */
/* Change the style of the image caption in the GeneratePress theme */
.wp-block-image figcaption,
.wp-caption .wp-caption-text {
      text-align: center;
    font-size: 0.9em;
      font-style: italic;
	color: #8f919e;
	    overflow-wrap: break-word;
    word-wrap: break-word;
	line-height: 1.5em;
}

위에서 [**.wp-caption .wp-caption-text**]는 고전 편집기에서 작성한 글에 삽입된 이미지의 캡션 스타일을 위해 추가되었습니다. 위의 코드로 테스트해보면 고전 편집기와 블록 편집기(구텐베르크 에디터) 모두에서 잘 작동할 것입니다.

[**text-align: center;**]는 이미지 캡션을 가운데 정렬하기 위한 것입니다. 가운데 정렬을 원치 않는 경우 이 라인을 삭제하시기 발바니다.

위의 코드를 저장하고 캐시를 삭제하고 브라우저를 새로고침해보면 이미지 캡션의 스타일이 변경된 것을 확인할 수 있을 것입니다.

변경된 이미지 캡션 스타일

코드에서 숫자와 컬러 값은 적절히 변경하시기 바랍니다. [**line-height**] 값을 낮추어 이미지 캡션에 여러 줄의 텍스트가 있을 경우 줄간격이 좁게 표시될 것입니다. 마음에 들지 않으면 [**line-height**] 라인을 삭제하거나 값을 적절히 조정할 수 있습니다.

두 줄 이상인 경우 줄간격(라인 간격)이 본문보다 좁게 설정되어 있다. line-height 값을 변경하여 줄간격을 조정 가능하다.

기본적인 CSS를 알면 워드프레스, 티스토리 블로그 등을 운영할 때 수월하게 특정 부분의 스타일을 변경할 수 있습니다. 기본적인 CSS를 익히고 싶은 경우 서점에서 마음에 드는 책을 하나 구입하여 보아도 되고, '생활 코딩' 같은 무료 강의를 활용해도 됩니다.

[참고*다른 테마를 이용하더라도 비슷한 방법으로 이미지 캡션 문구의 스타일을 조정할 수 있습니다. 사용하는 워드프레스 테마에서 이미지 캡션 스타일을 변경하는 데 어려움을 겪는 경우 아래 댓글로 사이트 주소와 사용하는 테마를 알려주시면 체크해드리겠습니다.*]

마치며

메인 워드프레스 블로그의 테마를 뉴스페이퍼에서 GeneratePress로 얼마 전에 변경했습니다. 인기 매거진 테마인 뉴스페이퍼의 경우 사용이 편리하고 별다른 설정을 하지 않아도 하이 퀄리티 블로그, 뉴스, 매거진 사이트를 만들 수 있는 것이 특징입니다. 하지만 자동 업데이트 기능이 제공되지 않아 불편한 감이 있었습니다. 늦은 감이 있지만 다행히 어제 뉴스페이퍼 테마가 업데이트되면서 자동 업데이트 기능이 추가되었습니다.

워드프레스 뉴스페이퍼 테마 자동 업데이트 기능 추가 - 워드프레스 기본

참고:

워드프레스 테마 GeneratePress: 본문 글자 크기 조정하기