워드프레스를 하다 보면 반복적으로 하는 작업들을 조금 더 편하게 할 수 없을지 고민하게 됩니다. 그 중에 하나가 바로 이미지를 넣을때 자동으로 자동 정렬 시키는 것이 아닐까 하는데, 이번 포스팅에서는 워드프레스에서 이미지 삽입 시 자동으로 가운데 정렬하는 방법과 이미지와 테이블의 캡션을 자동으로 자동 정렬하는 방법, 이미지의 하단 여백을 자동으로 넣는 방법을 알아보겠습니다.
우선 워드프레스 관리자 페이지에 접속을 해서 외모 ➡ 사용자 정의하기 ➡ 추가 CSS로 이동해 아래의 코드를 넣습니다.
/* 이미지/테이블 캡션 가운데 정렬 및 하단 여백 */
.wp-block-image {
text-align: center;
margin-bottom: 40px;
} figcaption {
text-align: center;
}
.wp-block-table {
margin-bottom: 40px;
} figcaption {
text-align: center;
}코드를 하나씩 설명을 드리면 .wp-block-image는 워드프레스의 이미지 블록을 의미합니다. text-align: center;은 가운데 정렬을 하라는 코드입니다. margin-bottom: 40px;는 하단의 여백을 40px만큼 주라는 의미입니다.
여백을 더 늘리고 싶다면 40px의 값을 더 큰 값으로 주면 되고, 상단의 여백을 조정하고 싶다면 margin-top:40px;를 추가하시면 됩니다.
figcaption은 캡션으로 역시 text-align: center;로 가운데 정렬을 시킵니다. 캡션의 글자 크기가 마음에 들지 않는다면 font-size: 15px;를 추가해서 사이즈를 변경할 수 있습니다. 15px는 폰트의 크기를 의미하니 원하는 숫자로 변경하실 수 있습니다.
.wp-block-table은 워드프레스의 테이블 블록을 의미하고 같은 방법으로 하단 여백과 정렬을 하실 수 있습니다.
