블로그를 운영하다 보면 썸네일 이미지 크기를 조정하고 싶을 때가 있습니다. 특히 워드프레스 GeneratePress 테마의 무료버전을 사용할 때, 기본적으로 제공되는 썸네일 크기가 크다고 느껴질 수 있습니다. 이번 포스트에서는 사용자 정의하기 화면을 통해 간단한 CSS를 추가하여 썸네일 이미지 크기를 줄이는 방법을 소개하겠습니다.
1. 사용자 정의 화면으로 이동
먼저, 워드프레스 대시보드에서 외모 → 사용자 정의를 클릭합니다.
2. 추가 CSS 메뉴 선택
사용자 정의 화면으로 이동한 후, 추가 CSS 메뉴를 선택합니다. 이곳에서 원하는 스타일을 추가할 수 있습니다.
3. CSS 코드 추가
추가 CSS 입력란에 아래의 코드를 복사하여 붙여넣기만 하면 됩니다:.post-image {
margin-top: 0;
margin-right: 2em;
float: left;
text-align: left;
width : 200px;
}
4. CSS 코드 설명
CSS 코드가 추가되면, 썸네일의 크기와 레이아웃을 조정할 수 있습니다. 코드에서 각 속성의 의미는 다음과 같습니다.
- margin-top: 0;
썸네일 이미지와 위쪽 요소 사이의 여백을 제거합니다. - margin-right: 2em;
썸네일 이미지와 글 사이의 간격을 설정합니다. 여기서 2em은 텍스트 크기를 기준으로 한 간격이므로, 필요에 따라 값을 조정할 수 있습니다. - float: left;
썸네일 이미지를 왼쪽으로 띄워서 글과 나란히 배치되도록 합니다. - text-align: left;
이미지가 왼쪽 정렬되도록 합니다. - width: 200px;
썸네일 이미지의 가로 크기를 200px로 설정합니다. 이를 통해 이미지 크기를 조절할 수 있습니다. 필요에 따라 이 값을 더 작게 또는 크게 조정할 수 있습니다.
5. 적용 확인
이제 게시 버튼을 클릭하여 변경 사항을 저장하고, 사이트에서 썸네일 이미지 크기가 줄어든 것을 확인해 보세요. 이미지 크기뿐만 아니라 이미지와 텍스트 간의 여백도 조정되어 더 깔끔한 레이아웃을 만들 수 있습니다.
워드프레스 GeneratePress 테마의 무료버전에서 썸네일 이미지 크기를 줄이는 방법은 아주 간단합니다. 사용자 정의하기 화면에서 추가 CSS를 사용해 원하는 스타일을 적용하면, 이미지 크기뿐만 아니라 페이지의 레이아웃까지 깔끔하게 조정할 수 있습니다.
