뷰티 가정의달 선물 기획전

GeneratePress 테마/Astra 테마 이미지 캡션 스타일 변경하는 방법

워드프레스 GeneratePress 테마와 Astra 테마 등에서 이미지 캡션 스타일을 변경하는 방법에 대해 간단히 살펴보겠습니다. 심플한 CSS로 이미지 캡션 스타일을 쉽게 변경할 수 있습니다.

워드프레스: 이미지 삽입 및 캡션 추가

워드프레스의 기본 편집기인 블록 에디터를 사용하는 경우 쉽게 이미지를 삽입하고 쉽게 이미지 캡션을 추가할 수 있습니다.

워드프레스 이미지 추가
이미지 블록. 이미지를 업로드하거나 미디어 라이브러리에서 선택하거나, 혹은 URL로 삽입할 수 있다.

이미지 블록을 추가하고 이미지를 업로드하거나 미디어 라이브러리에서 이미지를 선택하여 이미지를 삽입한 후에 “캡션 추가” 부분에 이미지 캡션을 입력할 수 있습니다.

워드프레스 이미지 캡션 추가
캡션 추가 필드에 이미지 캡션을 추가할 수 있다.

그리고 설정 패널(오른쪽 패널)의 대체 텍스트 섹션에 ALT 텍스트를 입력할 수 있습니다. SEO를 위해 대체 텍스트를 입력하는 것이 좋습니다.

워드프레스 이미지 캡션에 ALT 텍스트 추가
대체 텍스트 입력

워드프레스 이미지 캡션 스타일 변경하기

이미지 캡션 스타일은 테마에 따라 조금씩 다를 수 있습니다. GeneratePress 테마에서는 다음과 비슷하게 이미지 캡션이 표시됩니다.

GeneratePress 테마 이미지 캡션

외모 > 사용자 정의하기 > 추가 CSS에 다음과 비슷한 코드를 추가하여 스타일을 바꿀 수 있습니다.

/* GeneratePress 테마 이미지 캡션 스타일 */
.wp-block-image figcaption {
    background-color: #1e1e1e;
    color: #f5f5f5;
    padding: 10px;
    margin-top: 0px;
	text-align:center;
	font-style: italic;	
}

코드는 적절히 변경합니다. 위의 CSS 코드를 추가하면 다음과 같은 스타일로 이미지 캡션이 변경됩니다.

GeneratePress 테마/Astra 테마 이미지 캡션 스타일 변경하는 방법

위의 코드는 인기 테마 중 하나인 아스트라 테마엘리멘터 페이지 빌더와 함께 많이 사용되는 Hello 테마에서도 기대한 대로 작동합니다. 다른 워드프레스 테마에서도 블록 에디터를 사용하는 경우 작동할 것입니다.