워드프레스 사진 이미지 캡션 왼쪽 정렬하기 (GeneratePress)

워드프레스 GeneratePress 테마에서 첨부 이미지의 텍스트 캡션은 기본적으로 가운데 정렬이다. 다만, 사진이 본문 페이지 너비보다 작고 왼쪽으로 정렬되어 있는 상황에서 캡션이 중앙 정렬이 되면 우스꽝스러운 상황이 벌어진다.

이를 해결할 수 있는 방법으로는 우선 이미지를 중앙 정렬하여 캡션의 중앙 정렬과 맥을 같이 하게 할 수 있다. 이미지가 중앙 정렬인 것과 캡션이 중앙 정렬인 것 모두를 선호하는 사람에게 권장되는 방법. (개인적으로는 이미지가 중앙 정렬이어도 캡션은 이미지 시작점부터 시작하는 왼쪽 정렬을 선호한다.)

다른 방법으로는 이미지가 왼쪽 정렬이 되어 있는 상태이니 캡션도 왼쪽 정렬을 시키는 방법이다. 캡션의 왼쪽 정렬의 시작점은 포스트의 너비가 아니라 이미지의 시작점이기 때문에 개인적으로 선호하는 형식이기도 하다. 따라서 이번 기회에 캡션의 정렬을 왼쪽으로 수정해 주었다.

1. 수정 방법

외모 > 사용자 정의하기 > 추가 CSS
아래의 내용을 추가하기.

css

.wp-block-image figcaption {
text-align: left;
}

나중에 이미지 캡션의 글자 스타일을 바꾸고 싶을 때(글자 크기, 여백 등) 위의 스니펫에 원하는 내용을 추가하여 활용하면 될 것 같으니 참고해 두면 좋을 것 같다.


2. 수정 결과

이미지와 따로 노는 듯한 캡션이 왼쪽 정렬이 되면서 안정적인 모습이 되었다.

center aligned
수정 전
left aligned
수정 후

카테고리의 다른 글

  1. 클라우드웨이즈 청구서 날짜 및 결제일
  2. 네이버 서치 어드바이저 웹페이지 수집 요청이 또 말썽이다 (색인)
  3. 티스토리 본문 줄간격 바꾸기 (스킨 CSS 편집)
  4. 워드프레스 WP Statistics에서 네이버, 다음 검색엔진 공식 추가방법
  5. 티스토리 매거진 스킨 본문 폭 넓히기

댓글 남기기