워드프레스가 구텐베르그 편집기를 적용하면서 블로그 레이아웃을 보다 세련되고 멋지게 만들 수 있는 가능성이 높아졌습니다.

그중 하나가 바로 이미지나 동영상과 같은 새로운 미디어를 강조하도록 텍스트 영역을 좁고, 멀티미어 영역은 넓게 배치하는 스타일인데요.

블로그나 신문등에서 가독성을 높이기 위해 사이드바를 제거한 레이아웃에서 테스트 영역을 좁고 이미지 등 멀티미디어 요소들을 넓게 또는 풀화면으로 베치하는 레이아웃을 말합니다.

아래는 뉴욕타임지 기사의 일부인데요. 텍스트 영역은 700px 정도로 좁지만 이미지는 풀화면으로 배치하고 있습니다.

구텐베르그에서 텍스트 영역을 좁게 배치하기

구텐베르그 편집기가 적용된 워드프레스에서도 이러한 구성이 가능해졌습니다. 이는 기본적으로는 이미지를 Wide Width나 Full Width로 세팅하고, 텍스트가 들어갈 부분을 좁게 세팅하는 것입니다.

페이지/포스트 모두 적용하는 경우

페이지/포스트에 모두 텍스트는 좁게 배치하고, 이미지는 넓게 보이게 하려면 아래와 같은 코드를 사용합니다.

이는 콘텐츠 영역을 700px로 세팅하고, *:not(img) 명령을 사용해 이미지 등은 원래 넓이를 유자하라는 것이니다.

.entry-content>*:not(img) {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

포스트에서만 적용하는 방법

위에서 제시한 코드의 단점은 블로그 포스트 뿐만이 아니라 페이지 설정까지도 변경되는데요. 페이이 폭도 700px로 줄어버리기 때문에 페이지에서 다양한 시도를 하려는 경우는 남감한 상황이 될 수 있겠죠.

그래서 대안을 찾아 봅니다. 페이지 콘텐츠 영역을 넓게하고, 포스트에서만 좁게하고 싶은 경우입니다.

일반적으로 포스트에만 적용하려면 .single css 코드를 사용합니다. 제가 여러가지 시행착오 끝에 확인한 것은 페이지는 적용되지 않고 블러그 포스팅만 적용되는 것은 아래 코드에서 부여주는 것처럼 .single .inside-article 코드를 사용하는 것이었습니다.

.single .inside-article > *:not(.page-header-image-single) {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

적용되지 않는 테마도 있다.

위에서 제안한 코드는 대부분 워드프레스 테마에서 적용이 됩니다. Ocean WP, GeneratePress와 같은 기본 테마에서 크게 변경시키지 않은 테마는 잘 작동합니다.

그러마 제가 여기 사용하고 있는 뉴스페이퍼와 같은 상당히 커스터마이제이션이 진행된 테마는 작동하지 않더군요. 폭 설정등을 자기 테마에서 독특하게 변경시켜놓아서 테마별로 문의를 해야합니다.