워드프레스 GeneratePress 테마와 Astra 테마 등에서 이미지 캡션 스타일을 변경하는 방법에 대해 간단히 살펴보겠습니다. 심플한 CSS로 이미지 캡션 스타일을 쉽게 변경할 수 있습니다.
워드프레스: 이미지 삽입 및 캡션 추가
워드프레스의 기본 편집기인 블록 에디터를 사용하는 경우 쉽게 이미지를 삽입하고 쉽게 이미지 캡션을 추가할 수 있습니다.
이미지 블록을 추가하고 이미지를 업로드하거나 미디어 라이브러리에서 이미지를 선택하여 이미지를 삽입한 후에 "캡션 추가" 부분에 이미지 캡션을 입력할 수 있습니다.
그리고 설정 패널(오른쪽 패널)의 대체 텍스트 섹션에 ALT 텍스트를 입력할 수 있습니다. SEO를 위해 대체 텍스트를 입력하는 것이 좋습니다.
워드프레스 이미지 캡션 스타일 변경하기
이미지 캡션 스타일은 테마에 따라 조금씩 다를 수 있습니다. GeneratePress 테마에서는 다음과 비슷하게 이미지 캡션이 표시됩니다.
외모 > 사용자 정의하기 > 추가 CSS에 다음과 비슷한 코드를 추가하여 스타일을 바꿀 수 있습니다.
/* GeneratePress 테마 이미지 캡션 스타일 */
.wp-block-image figcaption {
background-color: #1e1e1e;
color: #f5f5f5;
padding: 10px;
margin-top: 0px;
text-align:center;
font-style: italic;
}코드는 적절히 변경합니다. 위의 CSS 코드를 추가하면 다음과 같은 스타일로 이미지 캡션이 변경됩니다.
위의 코드는 인기 테마 중 하나인 아스트라 테마나 엘리멘터 페이지 빌더와 함께 많이 사용되는 Hello 테마에서도 기대한 대로 작동합니다. 다른 워드프레스 테마에서도 블록 에디터를 사용하는 경우 작동할 것입니다.
