본문으로 바로가기
  1. Home
  2. 워드프레스/테마
  3. 워드프레스 이미지 캡션 스타일 변경하는 방법(+GeneratePress 테마)

워드프레스 이미지 캡션 스타일 변경하는 방법(+GeneratePress 테마)

· 댓글 20

이 글에서는 워드프레스 테마 중 하나인 GeneratePress에서 이미지 캡션 스타일을 변경하는 방법에 대해 살펴보겠습니다.

참고로 GeneratePress 테마는 꼭 필요한 기능만 탑재하여 속도가 빠른 것이 특징입니다. 워드프레스 사이트 속도가 느려 고민인 경우 GeneratePress 같은 가벼운 테마를 이용하는 것도 한 방법일 수 있습니다.

GeneratePress 테마에서 워드프레스 이미지 캡션 스타일 변경하기

GeneratePress 테마에서 이미지 캡션은 글자 크기가 본문과 비슷하고 색상도 비슷하여 본문 텍스트와 구분이 잘 안 되어 마음에 들지 않을 수 있습니다.

GeneratePress 테마에서 워드프레스 이미지 캡션 스타일 변경하기
GeneratePress 테마의 기본 이미지 캡션 스타일

이미지 캡션이 마음에 들지 않으면 CSS 코드를 사용하여 쉽게 이미지 캡션의 스타일을 입맛에 맞게 변경할 수 있습니다. 다음 CSS 코드를 워드프레스 관리자 페이지 > 외모(테마 디자인) > 사용자 정의하기 > 추가 CSS의 맨 아래에 추가하도록 합니다.

/* 워드프레스 테마 GeneratePress 이미지 캡션 스타일 변경 */
/* Change the style of the image caption in the GeneratePress theme */
.wp-block-image figcaption,
.wp-caption .wp-caption-text {
      text-align: center;
    font-size: 0.9em;
      font-style: italic;
	color: #8f919e;
	    overflow-wrap: break-word;
    word-wrap: break-word;
	line-height: 1.5em;
}

위에서 [**.wp-caption .wp-caption-text**]는 고전 편집기에서 작성한 글에 삽입된 이미지의 캡션 스타일을 위해 추가되었습니다. 위의 코드로 테스트해보면 고전 편집기와 블록 편집기(구텐베르크 에디터) 모두에서 잘 작동할 것입니다.

[**text-align: center;**]는 이미지 캡션을 가운데 정렬하기 위한 것입니다. 가운데 정렬을 원치 않는 경우 이 라인을 삭제하시기 발바니다.

위의 코드를 저장하고 캐시를 삭제하고 브라우저를 새로고침해보면 이미지 캡션의 스타일이 변경된 것을 확인할 수 있을 것입니다.

변경된 이미지 캡션 스타일

코드에서 숫자와 컬러 값은 적절히 변경하시기 바랍니다. [**line-height**] 값을 낮추어 이미지 캡션에 여러 줄의 텍스트가 있을 경우 줄간격이 좁게 표시될 것입니다. 마음에 들지 않으면 [**line-height**] 라인을 삭제하거나 값을 적절히 조정할 수 있습니다.

두 줄 이상인 경우 줄간격(라인 간격)이 본문보다 좁게 설정되어 있다. line-height 값을 변경하여 줄간격을 조정 가능하다.

기본적인 CSS를 알면 워드프레스, 티스토리 블로그 등을 운영할 때 수월하게 특정 부분의 스타일을 변경할 수 있습니다. 기본적인 CSS를 익히고 싶은 경우 서점에서 마음에 드는 책을 하나 구입하여 보아도 되고, '생활 코딩' 같은 무료 강의를 활용해도 됩니다.

[참고*다른 테마를 이용하더라도 비슷한 방법으로 이미지 캡션 문구의 스타일을 조정할 수 있습니다. 사용하는 워드프레스 테마에서 이미지 캡션 스타일을 변경하는 데 어려움을 겪는 경우 아래 댓글로 사이트 주소와 사용하는 테마를 알려주시면 체크해드리겠습니다.*]

마치며

메인 워드프레스 블로그의 테마를 뉴스페이퍼에서 GeneratePress로 얼마 전에 변경했습니다. 인기 매거진 테마인 뉴스페이퍼의 경우 사용이 편리하고 별다른 설정을 하지 않아도 하이 퀄리티 블로그, 뉴스, 매거진 사이트를 만들 수 있는 것이 특징입니다. 하지만 자동 업데이트 기능이 제공되지 않아 불편한 감이 있었습니다. 늦은 감이 있지만 다행히 어제 뉴스페이퍼 테마가 업데이트되면서 자동 업데이트 기능이 추가되었습니다.

 

워드프레스 뉴스페이퍼 테마 자동 업데이트 기능 추가 - 워드프레스 기본

뉴스페이퍼 사용자들에게 반가운 소식이 있습니다. 뉴스페이퍼는 장점이 많지만 불편한 점이 하나 있었는데요. 바로 자동 업데이트 기능이 없어 업데이트하는 것이 여간 번거로운 것이 아니었습니다. 이번 업데이트에서 뉴스페이퍼 자동 업데이트 기능이 추가되었습니다.

www.thewordcracker.com

참고:

 

워드프레스 테마 GeneratePress: 본문 글자 크기 조정하기

워드프레스 GeneratePress 테마에서는 사용자 정의하기 (Customize)에서 글자 크기를 조정하는 옵션을 제공합니다. 본문 글자 크기를 키우거나 줄이려면 알림판 > 사용자 정의하기 > Typography(타이포그래피)를..

avada.tistory.com

 

SNS 공유하기
💬 댓글 20
logo

안타깝게도 바뀌는게 없네요.
심지어 다른 컴퓨터, 다른 브라우저로 봐도 마찬가지에요. ㅠㅠ
그냥 이대로 써야할까봐요.

logo
익명

비밀댓글입니다

logo

CSS 코드에 오류가 있는 것 같네요. 사용자 정의하기에서 x 아이콘이 표시되지 않네요.

.post-thumbnail
/* 워드프레스 테마 GeneratePress 이미지 캡션 스타일 변경 */
/* Change the style of the image caption in the GeneratePress theme */

==> .post-thumbnail을 삭제하시겠어요?

logo
익명

비밀댓글입니다

logo

다음 코드를 추가해보시겠어요?

.wp-block-image figcaption {
text-align: center;
font-size: 0.5em;
font-style: italic;
color: #8f919e;
overflow-wrap: break-word;
word-wrap: break-word;
line-height: 1.5em;
}

아마 이미지 정렬이 정의되지 않아서 그런 것 같습니다.

logo

코드가 조금 복잡한데요. 다시 글을 업데이트했습니다. 댓글의 내용은 잊어버리고, 또 이미 추가한 코드를 삭제하고 업데이트된 코드로 테스트해보시겠어요?

logo

감사합니다!
폰트크기는 0.7, 줄간격은 1.0으로 해서 적용했어요.
덕분에 정말 잘 해결할 수 있게 되었습니다. 고맙습니다. ^^

logo
익명

비밀댓글입니다

logo

안녕하세요?
문제가 되는 URL 몇 개를 알려주시겠어요? 그러면 확인해보겠습니다.

logo

비밀댓글입니다

logo

글을 살펴보니 모두 중앙 정렬이 되어 있네요.

이미지를 중앙 정렬이 안 되게 기본 설정으로 수정해보시겠어요? 그러면 중앙 정렬 설정을 안 해도 중앙 정렬하도록 하는 방법을 확인할 수 있습니다.

logo

직접 봐주셔서 너무 감사합니다! 이제 기본정렬로 수정한 상태입니다.
.wp-block-image {text-align:center;} 적용했구요!

logo

다음 CSS 코드를 사용하여 이미지가 중앙 정렬되는지 확인해보시겠어요?

.wp-block-image {
margin: auto !important;
}

logo

그걸로 바꾸니깐 두번째것만 좌측으로 붙고 나머지가 가운데정렬이 됐어요!!^^;

logo

네. 본래 넣었던 CSS도 그대로 유지해보시기 바랍니다.

.wp-block-image {
text-align: center;
margin: auto !important;
}

logo

해결됐어요!!! 정말 감사합니다 ㅠㅠ 다음 호스팅 갱신때 레퍼럴 예약입니다!!

logo

GeneratePress 테마가 심플하고 속도도 괜찮은 것 같습니다.

CSS를 조금 알면 사이트 레이아웃을 어느 정도는 원하는대로 꾸밀 수 있을 것입니다.

GeneratePress 테마나 워드프레스와 관련하여 질문이 있으면 제 워드프레스 블로그에 댓글로 알려주시면 아는 범위 내에서 알려드리겠습니다.

즐거운 시간 보내세요.

logo

자주 찾겠습니다^^ 다시 한번 감사드려요.

logo

좋은 정보 감사합니다
행복한 하루 보내세요^^

logo

워드프레스 이미지 캡션 스타일 변경하는 방법이로군요^^

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅

최근 댓글

가성비적인 측면에서 괜찮은⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 요가하구 비보북 너무 괜찮은⋯ 💬Hman 윈도우 11은 아직 사용해 보⋯ 💬空空(공공) 감사합니다. 다시 한번 차근⋯ 💬viator_min 사이트 속도가 느리면 SEO(검⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 시작 가이드

워드프레스 시작하기