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

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

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

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

1. 수정 방법

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

css

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

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

2. 수정 결과

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

center aligned
수정 전
left aligned
수정 후

카테고리의 다른 글

  1. 네이버 서치어드바이저 색인 누락의 원인은 조회수 부족
  2. 워드프레스 미리보기 페이지에서 404 에러를 일으키는 Mediapartners-Google 크롤러
  3. 티스토리 댓글 이름 앞에 블로그 프로필 이미지 넣기 (스퀘어 스킨)
  4. 네이버 서치 어드바이저 웹페이지 수집 요청이 또 말썽이다 (색인)
  5. 일 방문자 100명에 필요한 블로그 포스팅(게시글) 수

댓글 남기기