워드프레스에서는 테마 옵션과 약간의 CSS를 활용하여 블로그 레이아웃을 원하는 대로 꾸밀 수 있습니다.
인터넷을 탐색하다 보면 블로그 글의 레이아웃을 텍스트는 좁게, 이미지는 넓게 설정하여 보여주는 사이트가 간혹 있습니다.
워드프레스에서는 간단한 CSS를 사용하여 위의 그림과 같이 이미지는 넓게, 텍스트는 좁게 표시되도록 설정할 수 있습니다.
이 글에서는 GeneratePress 테마를 기준으로 블로그 포스트의 레이아웃을 위의 그림과 같이 설정하는 방법에 대하여 살펴보겠습니다. 아스트라 테마 등 대부분의 테마에 이 방법을 응용할 수 있습니다.
텍스트는 좁게, 이미지는 넓게 표시하는 블로그 레이아웃 설정 방법
1단 레이아웃으로 조정하고 싶은 경우 모양 » 사용자 정의 또는 테마 옵션에서 사이드바가 표시되지 않도록 설정할 수 있습니다. (아바다 등 일부 테마는 워드프레스의 표준 관행을 무시하고 자체 테마 옵션을 제공하기도 합니다.)
GeneratePress 테마에서는 모양 » 사용자 정의 » Layout » Sidebars에서 사이드바 레이아웃을 설정할 수 있습니다. (워드프레스 버전에 따라 한국어 버전에서 "모양"은 "외모" 또는 "디자인" 등으로 표시될 수 있습니다. 현재 최신 버전인 워드프레스 6.6.2에서는 Appearance 메뉴가 모양으로 번역되어 있습니다.)
블로그 글의 사이드바 레이아웃은 Single Post Sidebar Layout에서 지정할 수 있습니다. 보통은 우측 사이드바 레이아웃이 사용됩니다. 블로그 글의 레이아웃을 1단 레아웃으로 구성하려면 Content (no sidebars)를 선택하면 됩니다.
모양 » 사용자 정의 » Layout » Container에서 컨테이너 폭을 지정할 수 있습니다.
컨테이너 너비를 1200px로 지정하고 1단 레이아웃(사이드바 없음)으로 설정하면 콘텐츠 너비가 1200px가 됩니다.
텍스트는 좁게, 이미지는 넓게 표시하려는 경우 이미지를 제외한 모든 요소의 폭을 CSS를 사용하여 줄이는 방법을 사용할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드를 사용하면 이미지를 제외한 콘텐츠의 너비가 700px로 설정됩니다.
/* 이미지를 제외한 모든 요소의 최대 폭 값을 줄이기 */
.single .entry-content > *:not(.wp-block-image, img) {
max-width: 700px; /* 텍스트 너비 */
margin-left: auto;
margin-right: auto;
}상기 코드를 모양 » 사용자 정의 » 추가 CSS에 추가할 수 있습니다.
만약 이미지 너비가 컨테이너 폭보다 작고 중앙 정렬이 안 되는 경우, 다음 CSS를 사용하여 블로그 포스트 본문에 삽입된 모든 이미지를 가운데 정렬시킬 수 있습니다.
/* 모든 이미지를 가운데 정렬하기 */
.single .wp-block-image img {
display: block;
margin: 0 auto;
}실제 CSS 코드는 테마에 따라 조금씩 다를 수 있습니다. 위의 코드를 적용해보시고, 잘 안 되는 경우 이 글의 댓글을 통해 사용 중인 테마를 알려주시면 시간이 될 때 해당 테마에 맞는 코드를 확인하여 드리겠습니다.
뉴스페이퍼 등 일부 테마는 자체 CSS 클래스를 사용하기 때문에 실제 코드는 위와는 많이 다를 수 있습니다. 또한, 엘리멘터 프로의 테마 빌더를 사용하여 싱글 포스트 레이아웃을 만드는 경우에도 상기 코드가 작동하지 않을 것입니다.
GeneratePress 테마 사이드바 레이아웃에서 상단에 Sidebar Layout 설정은 어디에 적용이 되는 건가요?
두 번째는 블로그 사이드바 레이아웃이고, 세 번째는 블로그 포스트의 사이드바 레이아웃입니다. 페이지 등의 사이드 레이아웃이 첫 번째 인 것 같습니다.