블로그 본문에 사진이나 이미지를 추가했을 때 필요에 따라 설명 글을 입력할 수 있다. 설정은 블로그 플랫폼마다 비슷한데 워드프레스는 추가한 이미지 클릭 – Add Caption – 문자 입력을 진행하면 된다.
이미지에 설명 글을 추가하면 위처럼 나온다. 그런데 본문 폭보다 좁은 이미지를 왼쪽에 정렬했지만, 설명 글은 본문 전체 폭 기준으로 가운데 정렬되어 있는 모습이다.
적용한 테마의 CSS 입력란에 들어가서 위의 코드를 추가하면 이미지 설명은 본문 폭이 아니라 이미지를 기준으로 가운데 정렬될 것이다.
.wp-block-image {
position: relative;
display: inline-block;
}
.wp-block-image figcaption {
text-align: center;
width: 100%;
font-size: 16px;
margin-bottom: 0;
}
.wp-block-image : 이미지와 설명 글을 가운데로 정렬
.wp-block-image figcaption : 설명 글의 폰트, 너비, 여백 등 설정
워드프레스 테마에 따라 클래스 이름은 다를 수 있으니, 크롬 F12 개발자 검사를 해보고 정확히 확인해서 코드를 입력하고 저장하면 된다.
워드프레스 GeneratePress 테마를 선택한 이유
호스팅케이알에서 워드프레스 도메인을 구매한 이유
만화 그리기와 블로그 운영에 꾸준함이 필요한 이유
