워드프레스 썸네일 가운데 정렬하기 (글목록)

워드프레스 썸네일 가운데 정렬하는 방법을 알려드립니다. 왼쪽 정렬되는 GP 무료테마에서 간단한 코드 삽입으로 보기좋게 가운데 정렬을 할 수 있어요.

워드프레스 썸네일 가운데 정렬 (GP무료테마)

빠른 속도와 손쉬운 커스터마이징으로 워드프레스 무료테마 중 가장 인기있는 GP(제너레이트프레스)테마. 사실 오늘 하려고 하는 썸네일 가운데 정렬, 혹은 이 전에 소개 해드린 본문 제목 아래 크게 나오는 썸네일을 안보이게 감추는 방법 등은 GP 유료테마를 구입하면 해결이 되는 것들입니다. 그런데 GP테마가 1년에 약 60달러나 하기 때문에… 이제 막 워드프레스를 시작하는 우리들에겐 부담이 되는 것이 사실이죠.

워드프레스-썸네일정렬-변경전
워드프레스 썸네일 (변경전)

원래 GP무료테마에서는 위의 이미지처럼 워드프레스 썸네일이 왼쪽 정렬로 표시가 되는데요. 아무래도 이미지가 왼쪽으로 쏠려있어 보기에 좋지 않습니다. 앞으로 알려드릴 코드를 적용하면 위와 같은 이미지를 아래와 같이 가운데 정렬 시킬 수 있어요.

워드프레스-썸네일-정렬-변경후
워드프레스 썸네일 정렬(변경후)

CSS 수정하는 위치

아주 간단한 코드만 삽입 해 주면 워드프레스 썸네일 가운데 정렬하기가 끝나요. CSS 코드를 수정하는 위치는 아래와 같아요.

✅ 워드프레스 관리자 화면 – 외모 – 사용자 정의하기 – 추가 CSS

워드프레스-CSS코드-수정위치
워드프레스 CSS 수정하기

워드프레스 썸네일 가운데 정렬 코드

위의 [추가 CSS]를 클릭하면 CSS 코드를 넣을 수 있는 창이 뜹니다. 개인별 워드프레스 테마 상태에 따라 이미 여러가지 코드가 들어가 있을수도, 한두줄의 코드만 들어가 있을수도 있어요. 가장 아래 비어있는 줄에 다음의 코드를 넣어주세요.

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

코드를 입력하고 위에 있는 [공개(=저장)] 버튼을 눌러주면 이미지를 가운데 정렬시키는 위의 코드가 저장되며, 왼쪽으로 쏠려있던 썸네일이 가운데 정렬 되는 것을 보실 수 있습니다.