Figcaption 피그캡션은 웹사이트나 블로그에 넣은 이미지/사진 아래 추가하는 짧은 설명문이다. 워드프레스 글쓰기 화면에서 피그캡션을 작성하려면 추가한 이미지를 클릭하고 옵션을 체크하면 설정할 수 있다.
이미지를 클릭하면 위처럼 긴 옵션 창이 나올 텐데 […] Add Caption 아이콘을 클릭하고 문구를 작성하면 된다. 이때 이미지 폭이 본문 폭보다 작다면 창 왼쪽의 Align 아이콘을 눌러서 오른쪽/왼쪽/가운데 등 정렬할 수 있다.
하지만 이미지를 왼쪽으로 정렬해도 피그캡션은 이미지가 아니라 본문 폭 가운데 맞춰서 나오고 있다. 화면 폭이 좁은 모바일/태블릿 PC에서는 자동으로 이미지/문구가 가운데 정렬되지만 PC 버전에서는 균형이 맞지 않는 모습이다.
피그캡션을 항상 이미지 가운데 맞추려면 워드프레스 대시보드 – Appearance – Customize – Additional CSS로 온 다음 아무 빈 곳에 아래 코드를 더하면 된다.
/* Figcaption */
.wp-block-image figcaption {
font-size: 16px;
margin-top: -10px;
}
.wp-block-image {
display: inline-block;
text-align: center;
}
여기서 .wp-block-image 코드만 넣어도 적용되는데 Block image, 즉 본문에 넣는 이미지의 Text-align을 가운데로 맞추는 기능이 있다. 위의 .wp-block-image figcaption 부분은 피그캡션 글자 크기와 여백 설정인데 필요하다면 같이 추가하자. 이후 Publish 버튼을 누르면 블로그에 적용할 수 있다.
다만, 워드프레스 테마에 따라 CSS 클래스 이름이 다를 수 있는데 F12 개발자 도구로 검사해서 확인하면 된다.
워드프레스 마스터 가이드
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
워드프레스 꼭 비싼 테마를 사는 것이 좋을까
센과 치히로의 행방불명이 行方不明가 아닌 이유
