워드프레스 블로그를 처음 설치하면 카테고리 글 모음 (아카이브) 페이지는 왼쪽 썸네일 이미지 + 오른쪽 글 본문 요약으로 나온다. 이후 적용하는 테마에 따라 디자인과 설정 방법은 달라질 텐데, 썸네일 이미지를 정사각형으로 바꾸는 것은 간단한 CSS 설정으로 해결할 수 있다. 잠시 아래 첨부 이미지부터 살펴 보자.

이 블로그에는 GeneratePress 테마를 적용하였고 카테고리 페이지는 따로 Element 설정 없이 기본 모습으로 사용하고 있다. 페이지로 오면 왼쪽에 대표 이미지 썸네일이 나오지만, 실제 첨부한 이미지 사이즈에 따라 가로 크기가 제각각인 것을 볼 수 있다.

GeneratePress 테마 아카이브 페이지 설정 해지하는 방법

워드프레스 대시보드 – Appearance – Customize – Additional css

/* Category Page Thumnail Image */
.post-image img {
width: 100%;
height: 320px;
object-fit: cover;
}

이렇게 이동한 다음, 빈 곳에 위의 코드를 넣으면 썸네일 이미지가 정사각형으로 나오는데 여기서 object-fit: cover;을 넣지 않으면 이미지 전체가 세로 사이즈에 맞게 억지로 늘어나서 찐빵처럼 나오니 주의하자.

참고로 320px은 F12 키 개발자 도구로 이미지를 검사했을 때 나온 가로 사이즈이다. 정확한 이미지 사이즈는 블로그 테마나 설정에 따라 다를 수 있고, 또한 클래스 이름이 .post-image img가 적용되지 않는다면 직접 개발자 도구 검사로 확인 후 설정하는 것이 좋다.

워드프레스 마스터 가이드
워드프레스 테마 변경할 때 주의해야 하는 점
GP 마케터 테마 글 목록 아카이브 대표 이미지 크기 조절 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법