[워드프레스 Tips] 요즘 핫한 텍스트는 좁게, 이미지 넓게 보여주는 블로그 레이아웃 설정법

Updated on 2019-12-05 by

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

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

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

아래는 뉴욕타임지 기사의 일부인데요. 텍스트 영역은 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와 같은 기본 테마에서 크게 변경시키지 않은 테마는 잘 작동합니다.

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

21년 새롭게 뉴스레터를 시작합니다

한 주간 발행한 포스팅과 읽었던 글 중 괜찮은 내용을 선정해 뉴스레터를 보내드리고 있습니다. 물론 중간에 괜찮은 글들이 있으면 부정기적으로도 보내드리고 있습니다.

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

오랬동안 FMCG 마케팅과 전자제품 상품기획 경험을 기반으로 다양한 분야의 마케팅 및 경영 사례 분석에 관심을 가지고 있습니다. 아울러 IT 등 트렌드 분석과 빠르게 변화하는 뉴스에서 얻을 수 있는 인사이트를 분석해 나누고 있습니다.. 개인적으로 사진에 관심에 많아 소소한 일상의 따뜻함을 담고 있습니다. 혹 연락이 필요하시면 ihappist@gmail.com으로 연락해 주세요

guest
2 Comments
Oldest
Newest
Inline Feedbacks
View all comments