기본 콘텐츠로 건너뛰기

워드프레스 테마 'Twenty Seventeen' 콘텐츠 폭 조절

본 블로그는 워드프레스를 사용하고 있고, 디자인은 'Twenty Seventeen' 테마를 기본으로 적용하고 있습니다. 기본 테마이고, 군더더기 없는 디자인에, 원하는 요소는 모두 포함되어 있어 만족스럽게 사용하고 있습니다.

한 가지 아쉬운 점은 콘텐츠의 가로폭이 좁아 조금 답답해 보인다는 것이었는데요. 본 테마의 기본 가로폭은 1,000px 이고, 사이드바를 사용할 경우 본문 58%, 사이드바 36% 폭으로 적용되어 있습니다.

이걸 간단하게 늘릴 수 있는 방법을 안내해 드립니다.



워드프레스 테마의 유용한 기능 중 하나인 '추가 CSS 관리' 기능을 활용하는 것입니다.

테마 - 사용자 정의하기 - 추가 CSS 메뉴입니다.

[추가 CSS]는 css 파일의 수정 없이 사용자 임의로 css를 작성할 수 있는 방법입니다. 기본 css가 적용되고 난 후 마지막으로 적용되기 때문에, 워드프레스 코어나 테마에서 정의된 css 내용을 바꿔 적용할 수도 있습니다.

적용한 CSS는 오른쪽 화면에 실시간으로 반영되어 보이므로, 적절하게 작성하신 후 [발행]을 눌러 실 사이트에 적용할 수 있습니다.

추가 CSS를 입력하여 사용자화 할 수 있습니다.

@media 선택자를 사용한 것은 본 테마가 반응형이기 때문입니다. 렌더링 된 레이아웃의 폭이 48em 보다 작아지면 모바일 화면으로 인식하여 2단 배열을 1단으로 바꿔줍니다. 이 옵션이 없으면 화면이 작아졌을 때 레이아웃이 정상적으로 보이지 않습니다.

div.wrap과 .navigation-top .wrap 선택자는 본문의 가로폭을 설정해줍니다. 전자만 설정을 하니 메뉴는 바뀌지 않아서, 후자도 함께 작성하였습니다. 최대 폭은 1200px이나 원하는 값으로 설정할 수 있습니다.

#content #primary는 본문 영역, #content #secondary는 사이드바 영역입니다. 값을 적절히 조절하여 각각이 내용을 잘 보여주고 사이에 여백도 생기는 값을 설정하시면 됩니다. 물론 두 값의 합이 100%를 넘어선 안 됩니다.

CSS 코드입니다:
/* Width arrange on PC/Tablet */
@media screen and (min-width: 48em){
div.wrap, .navigation-top .wrap {max-width: 1200px}
#content #primary {width: 67%}
#content #secondary {width:26%}
}

 

댓글

댓글 쓰기