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

| Updated

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

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

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

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

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

Vultr 서버 100$ 프로모션 안내

안녕하세요?

혹시 워드프세스 사이트 구축 또는 쇼핑몰 구축을 위해 신규 서버 구축을 고민하신다면 지금 진행하는 Vultr 100$ 프로모션을 검토해 보세요.

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

아래 이미지를 클릭해 등록할 수 있습니다.

제가 생각하는 Vultr의 강점은 일본 서버를 기준으로 가장 빠르고 성능도 가장 좋으며 사용자 UI도 낫다고 생각합니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 가상 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

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

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

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

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

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

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
현토리

가끔 들어와 보는데 페이지 레이아웃이 확달라져서 의아해 했습니다. 워드프레스 구동 환경이 전 CentOS에 Apache라 환경은 다르지만 Pagespeed 설정 부분및 여러가지 글에서 도움을 많이 받고 있습니다. 요것도 제가 또 테스트해 볼만한 내용이네요. 이미지는 이미지대로 글을 글대로 적용할수 있는 방법 같아서 좋아 보입니다. 좋은 주말 되세요

Happist

기존 오랫동안 사용하던 뉴스페이퍼 테마를 버리고 GeneratePress 테마로 변경해 보았습니다.
뉴스페이퍼 테마가 화려하기는 하지만 최근 10.0으로 판올림하면서 변경점이 많아 세팅에 애를 먹었고,
많이 가벼워졌다는 테마 제작자의 주장도 있지만 여전히 생각보다는 무겁고 빠르지는 않았기 때문에 새로운 테마를 적용해 보자는 생각을 했습니다.

제가 생각한 뉴스페이퍼의 단점은
1) 오래전부터 자체 페이지 빌더를 선보였지만 여전히 페이지빌더 자체의 무거움에서는 벗어나지 못했으며
2) 10.0으로 판올림하면서 기존 플러그인들과 호환이 쉽지가 않았습니다.
플러그인으로 구성되는 워드프레스 생태계를 적극 반영하기보다는
자체 해결하는 쪽으로 많은 방점을 두고 있는 것처럼 보였습니다.
그러다보니 완전 새롭게 세팅하고, 기존에 사용하던 플러그인과 호환이 쉽지 않았는데요.
3) 예전부터 그랬지만 독특한 설계를 통해서 워드프레스 기본 해결 방법들이 잘 작동하지는 않았습니다.
그래서 더 많은 공부가 필요했지요.
4) 업데이트도 수작업으로 업그레이드 파일을 다운받아서 올려야 합니다.
이게 생각보다 힘듭더군요.

제가 생각한 뉴스페이퍼 단점은 블러그에 맞는 다양한 기능을 잘 갖추고 있다는 점입니다.
그러나 항상 그렇듯이 완벽한 것은 없죠. 예를들어 애드센스 기능도 훌륭하지만 전문 플러그인을 사용하지 않을만큼은 아니기 때문에 불필요하게 많은 기능이 있다는 생각을 했습니다.

간단히 정리해서 포스팅해봐야겠네요..