워드프레스 본문 이미지 텍스트 간격 늘리는 방법!

워드프레스 본문 이미지 텍스트 간격이 일정치 않은 오류로 고민이 많았었는데 드디어 해결했습니다! 정확한 증상은 글 작성 시, 본문에 업로드한 이미지와 바로 그 밑에 작성되는 글의 간격이 매우 좁은 현상이 발생하는 것이었습니다.

해결법은 의외로 간단했습니다. 워드프레스 관리자 화면에서 외모→사용자 정의하기→추가 CSS에 관련 코드를 추가해주시면 되는 일인데요.

참고로 해당 글은 워드프레스 정보꾸러기님의 게시글의 정보를 토대로 작성 되었음을 알려드리며, 아래의 방법대로 해도 해결이 되지 않는다면 바로 밑에 공유해드리는 ‘워드프레스 정보꾸러미’님이 올리신 게시글의 댓글을 통해 문의해보시기 바랍니다.

❤ 워드프레스 정보꾸러미님의 글 보러가기

워드프레스 본문 이미지 텍스트 간격 늘리기

참고로 이 방법은 구텐베르크 편집기를 사용했을 때 생기는 오류에 대한 해결책입니다. 위에서 안내해 드린대로 CSS 코드를 추가해주면 끝나는 간단한 일인데, 이미지 업로드 시 사용하는 ‘이미지 블록’에 적용시킬 코드와 ‘갤러리 블록’에 적용시킬 코드를 입력해주면 됩니다.

‘ㅇㅇㅇ블록’에 적용 시킨다는 개념은 이미지, 혹은 갤러리 블록을 사용하여 이미지를 올릴 때, 해당 블록을 통해 업로드한 이미지와 텍스트 사이의 간격을 조절해주는 CSS 코드를 추가해준다는 의미로 받아들이시면 될듯 합니다.

‘이미지 블록’에 CSS 코드 추가하기

.single .wp-block-image { 
	margin-bottom: 22px;
}

위 CSS 코드를 사용자 정의하기→추가 CSS로 들어가셔서 추가해주시면 됩니다. 해당 코드에서 .wp-block-image 부분의 image를 보고 구텐베르크 편집기의 이미지 블록에 적용된다는 것을 알 수 있습니다.

그리고 margin-bottom 뒤쪽의 숫자는 이미지와 텍스트 사이의 간격을 나타내는 픽셀 수치입니다. 해당 픽셀값을 늘리거나 줄여서 워드프레스 이미지 텍스트 간격을 조절 할 수 있습니다. 가독성 좋게 조절해주시면 되겠습니다.

‘갤러리 블록’에 CSS 코드 추가하기

.single .wp-block-gallery {
 margin-bottom: 21px;
 }

그 다음은 갤러리 블록의 CSS를 추가할 차례입니다. 어렵지 않습니다. 기존 이미지 블록에 적용 시키는 코드에서 image 부분만 gallery로 변경해주면 됩니다.

역시 margin-bottom 부분의 픽셀값도 적절하게 선택해서 입력해주시면 됩니다. 추가 CSS 화면에서 미리보기 화면으로도 확인하실 수 있으니 변경되는거 보시면서 적당하게 설정해주시면 될듯 합니다.

CSS 코드 적용된 화면

위에 안내해드린 CSS 코드가 적용된 화면입니다. 둘 다 추가해줘서 앞으로 이미지 블록이든 갤러리 블록이든 글 본문의 이미지와 텍스트의 간격이 좁아지는 일은 없어졌습니다.

그동안 이걸 몰라서 방치해두고 있었는데, 이렇게 쉽게 해결할 수 있는 문제였다니 뭔가 허탈하기도 하네요.ㅎㅎ

글을 마치며

CSS 코드라는 게 어려워 보이지만 알고보면 굉장히 쉬운 분야라고 합니다. 저의 경우 CSS 관련 정보가 필요할 때면 대부분 위에 소개해드렸던 워드프레스 정보꾸러미님의 사이트를 많이 참고하곤 합니다. 해당 내용에 대해 보다 더 자세한 정보가 필요하신 분들은 위 사이트에 접속하셔서 관련 정보 찾아보시면 되겠습니다. 짧지 않은 글 읽어주셔서 감사합니다. 끝!

함께보면 좋은 글

😄 구글 애드센스 “판매자 정보를 Google sellers.json 파일에 게시” 관련 문제 해결 방법!

😄 워드프레스 사이트맵 생성 및 제출하는 방법!

😄 워드프레스 동영상 업로드 하는 방법 3가지!