워드프레스 특성이미지 가운데 정렬, 썸네일 중앙 정렬 방법

 

 

워드프레스를 이용하여 블로그를 운용하고 계신 많은 분들께서 generatepress 테마를 많이 사용하십니다. 심플하며 속도가 빠르기 때문인데요, 오늘은 특성이미지라고 불리는 썸네일 이미지의 정렬에 대해서 알아보겠습니다.

 

특성이미지 정렬

 워드프레스와 generatepress 설치 시 기본적으로 특성이미지는 좌측 정렬로 표시됩니다. 

 

휴대폰 등 모바일 화면에서는 이미지의 크기가 휴대폰의 디스플레이 영역을 채울 정도로 크다면 이미지 정렬이 의미가 없겠지만 작은 이미지의 경우 또는 PC 같은 큰 화면에서는 좌측으로 치우쳐 표시가 됩니다.

 

네이버나 티스토리 등의 블로그에 익숙해져 있기 때문에 썸네일이 가운데에 위치하지 않으면 거슬리게 보일 수도 있습니다.

 

GeneratePress 바로가기

 

만일 generatepress 유료 버전을 사용 하시는 분들이라면 레이아웃 메뉴에서 정렬 항목을 쉽게 변경하실 수 있는데 무료 버전은 이 기능이 제공되지 않습니다.

 

무료 버전에서도 가능한 방법은 CSS에 코드를 추가하는 방법입니다.

 

 

CSS 코드 추가

워드프레스 관리자 > 외모 > 사용자 정의하기 메뉴로 들어갑니다.

 

 

사용자 정의하기 > 추가 CSS 항목을 선택 후 아래 코드를 추가해 주세요.

 

 

첫번째 코드는 블로그 포스트 내에 표시되는 특성이미지(썸네일)의 정렬을 가운데로 변경하는 방법입니다.

 

/* 썸네일 이미지 중앙 정렬 */
.featured-image {
	text-align: center;
}

 

 

두번째 코드는 카테고리 또는 글 목록, 메인 화면등에 나타나는 썸네일 들을 가운데로 변경하는 방법입니다.

 

/* 글 목록의 썸네일 이미지 중앙정렬 */
.post-image {
	text-align: center;
}

 

위 두 코드를 CSS에 추가하시면 모든 썸네일이미지가 가운데로 모이는 것을 볼 수 있습니다.

 

[함께 읽으면 좋은 글]

갤럭시 공장 초기화 방법, 구글락 해제, 기기 전체 초기화 방법

갤럭시 공장 초기화 방법, 구글락 해제, 기기 전체 초기화 방법

 

ChatGPT 4.0 챗GPT 신규 가입 방법, 대기 없이 바로 가입하기

ChatGPT 4.0 챗GPT 신규 가입 방법, 대기 없이 바로 가입하기

 

애플 iCloud 이용 약관, Apple ID 설정 업데이트 오류 해결 방법

애플 iCloud 이용 약관, Apple ID 설정 업데이트 오류 해결 방법