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

17 Comments

워드프레스가 업데이트되면서 블록 에디터로 작성된 글에 삽입된 이미지와 텍스트 간격이 너무 좁은 현상이 나타나는 버그가 보고되어 있습니다. 본문 이미지와 텍스트 간 간격은 간단한 CSS로 조정이 가능합니다.

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

워드프레스 본문에서 이미지 아래 간격이 너무 좁아서 이미지 아래의 문단이나 제목 등의 요소와 너무 가까운 경우가 있습니다. 이 경우 다음과 같은 CSS 코드를 사용하여 이미지 아래 여백을 추가할 수 있습니다.

/* 본문 이미지와 텍스트 사이 간격 */
/* Margin between images and text in WordPress single posts */

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

위의 코드를 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다. (숫자를 적절히 조정하여 적절한 여백을 적용하도록 합니다.)

상기 CSS 코드를 복사하여 붙여넣기 해도 이미지 아래 간격이 늘어나지 않으면, 복붙하는 대신 위의 코드를 직접 타이핑하여 입력하여 문제가 해결되는 살펴보시기 바랍니다.

워드프레스 본문 이미지와 텍스트 사이 간격 조정하기

이 문제가 인기 뉴스, 매거진 테마인 뉴스페이퍼(Newspaper)에서 나타나고 있습니다. 다른 테마에서도 이와 같은 현상이 나타날 수도 있습니다. 이 블로그에 설치된 GeneratePress 테마의 경우 대부분 사이트에서 이 현상이 나타나지 않았지만 일부 글에서 이런 현상이 목격되기도 하네요.

이미지 블록 아래에 간격이 너무 좁으면 위의 코드로 테스트해보시고, 잘 작동하지 않을 경우 아래 댓글을 통해 사용 중인 테마와 해당 사이트 URL을 남겨 주시면 정확한 코드를 확인해드리겠습니다.

참고로 기본적인 CSS는 그리 어렵지 않고 배우는 데 시간도 그리 많이 소요되지 않습니다. CSS에 대해 잘 모르는 경우 다음 글을 참고하여 CSS를 배워보시기 바랍니다. 생활코딩 같은 무료 동영상 강의를 이용하고 CSS 관련 서적을 구입하여 레퍼런스로 활용할 수 있습니다.

본문 이미지 가운데 정렬하기

참고로 블록 에디터(구텐베르크)로 작성된 글에서 모든 본문 이미지를 가운데 정렬(중앙 정렬)하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* 모든 본문 이미지 가운데 정렬하기 */
/* Center align all images in WordPress */

.single .wp-block-image img {
display: block;
margin: 0 auto;
}

-또는-

.single .wp-block-image {
text-align: center;
}

마찬가지로 사용자 정의하기 아래의 추가 CSS 섹션에 위의 코드를 입력하시기 바랍니다.

이미지에 음영 적용하기

이 블로그와 같이 본문 이미지에 음영 효과(그림자 효과)를 적용하고 싶은 경우 다음과 같은 코드를 적절히 응용할 수 있습니다.

/* 워드프레스 본문 이미지에 음영 효과 적용하기 */
/* Apply box shadow effect on images in WordPress single posts */

.single .entry-content img {
    box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
}

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

17개 댓글

  1. /* 썸네일과 요악글 사이 간격 */

    .wp-post-image {
    margin-bottom: 수치;
    }

    마이너스 값도 적용이 되는군요.^^

    응답

  2. GeneratePress 테마에서 상단-썸네일, 하단-요약글의 레이아웃 일 때 썸네일과 요약글의 간격도 조정할 수 있나요?

    응답

    1. 모든 썸네일 이미지를 가운데 정렬하는 것이 가능합니다. CSS를 사용할 수 있습니다.

      요소명 {
      text-align: center;
      }

      또는

      요소명 {
      margin: 0 auto;
      }

      해당 샘플 URL을 하나 알려주시면 정확한 코드를 체크해드리겠습니다.

      응답

      2. 썸네일을 가운데 정렬하려면 다음 CSS 코드를 사용해보세요(외모 - 사용자 정의하기 - 추가 CSS에 추가하세요):

        .post-image {
        text-align: center;
        }

        위의 코드가 작동하지 않으면 다음과 같은 코드로도 테스트해보세요.

        .post-image {
        margin: 10px auto !important;
        }

        적용 후에 캐시를 삭제하세요. 클라우드웨이즈의 경우 서버 캐시도 삭제하세요.

        https://avada.tistory.com/2947

  5. 첫 번째 이미지 밑에 목차가 들어가는 형식으로 글을 작성하고 있는데 혹시 본문 이미지와 목차 사이 간격만 늘릴 수 있을까요?

    응답

  6. 선생님 안녕하세요! 최근에 워프에 입문한 새내기입니다.
    첫 시작부터 지금까지 계속 선생님 블로그 보면서 적용하고, 공부하고 있습니다.

    이미지와 텍스트 사이의 간격을 띄우는 코드를 복붙하여 적용해보기도 하고, 직접 타이핑하여 적용해보기도 했는데 어떤건 적용이 되고, 또 어떤 글은 적용이 되질 않습니다. 결국엔 적용이 제대로 되지 않는다고 보는 게 맞는 것 같습니다.

    사용 중인 테마는 Generatepress 유료 버전을 사용중이고,
    사이트는 https://brocoly.co.kr 입니다.

    감사합니다!

    응답

    1. 안녕하세요, 브로콜리 님.

      이미지를 블록 에디터(구텐베르크)의 이미지 블록을 사용하는 경우에만 작동합니다.

      글 하나를 살펴보니 이미지 블록이 아니고 갤러리 같네요.

      .single .wp-block-gallery {
      // 코드
      }

      위의 코드도 추가해보세요.

      기본적인 CSS를 이해하면 쉽게 해결이 가능한 부분입니다.

      https://cafe.naver.com/wphomepage/16730

      응답

      1. 헉.. 제 댓글이 달리지 않은 줄 알고.. 답변 못주시나 했는데.. 이렇게 친절하게 답변을 주실 줄이야ㅠㅠ 진짜 감사합니다! 해결했습니다!

댓글 남기기

* 이메일 정보는 공개되지 않습니다.