티스토리 Whatever 스킨 사이드바 폭 조절 방법

티스토리 Whatever 스킨은 본문 하단에 사이드바가 3개 들어갑니다. 

좌측에 공지사항과 최근포스트, 가운데에 태그, 우측에 검색과 전체방문자가 들어갑니다.

- 티스토리 Whatver 스킨 기본 설정 사이드바 -

문제는 3개의 사이드바 구역이 동일한 폭이 아니라 가운데 사이드바의 폭은 넓고 좌우 사이드바의 폭은 좁기 때문에 무언가 어색한 모습을 보입니다. (정확히는 좌측 25%, 중앙 50%, 우측 25%)

공지사항과 최근 포스트의 경우 제목이 다소 길게 들어가야 하는데 기본 설정이 좌측 좁은 사이드바에 위치하기 때문에 제목 몇 글자만 나오고 끝나는 경우가 발생하기 때문입니다.

그래서 폭을 동일하게 바꿔서 가시성을 높이는 것이 필요한데 여기서는 그 방법을 안내해 드립니다.

 

방법은 간단합니다.

1. 설정-꾸미기-스킨편집 - html편집-css 로 갑니다.

 

2. CSS 하단 어디든 클릭하여 커서를 CSS 명령어 속에 위치 시키기

 

3. ctrl+f 를 이용하여 sidebar 를 검색

- 제대로 검색한 사례 - 

 

4. 찾아진 sidebar 에서 width 수정

윗 사진이 sidebar 로 검색하여 나온 결과 입니다.

여기서 sidebar-1 이 가장 왼쪽 사이드바, sidebar2가 중앙, sidebar-3 이 가장 우측 사이드바를 뜻합니다.

float는 일단 무시하시고, width가 폭을 뜻합니다.

기본 설정은 윗 사진 처럼 왼쪽 25%, 중앙 50%, 우측 25% 로 되어 있습니다.

본인이 원하시는 대로 수정하시면 됩니다.

전 왼쪽 38, 중앙 38, 우측 24 로 한 뒤에, 왼쪽은 최신 게시물, 중앙은 인기게시물, 우측은 태그 등으로 했던 것 같은데, 지금은 모두 25%로 사이드바 4개를 만들어 사용하고 있습니다.

추후에 사이드바 4개 만드는 법과 인기게시물 추가하는 방법도 설명드리도록 하겠습니다. 

 

5. 결과 확인

시험 삼아 결과를 보기 위해, 왼쪽 40, 중앙 10, 우측 40으로 설정하였습니다.

적용과 새로고침을 한 후에 사이트를 확인하게 되면,

이런식으로 변화된 모습을 확인 할 수 있습니다.

 

참고

CSS 본문을 클릭하지 않고 바로 sidebar 를 검색하면 아래와 같이 검색이 되면서 하나도 발견되지 않습니다. 실수하지 않길 바라는 마음에 알려드립니다.

- 본문에 커서를 위치하지 않고 검색한 잘못된 사례 -

 

마치며

티스토리 Whatever 스킨의 사이드바 폭을 변경하는 방법을 설명드렸습니다.

알고나면 간단하지만 모르는 분들이 많아 안내해 드리니 많이 활용하시길 바랍니다. 

다음에는 앞서 말씀드렸지만, Whatver 스킨에 인기게시물을 사이드바에 넣는 방법과 사이드바 개수를 줄이고 늘리는 방법을 설명드리도록 하겠습니다.

 

티스토리 Whatever 스킨 설정 방법 총정리

티스토리 Whatever 스킨에 카테고리 넣는 방법 따라하기

티스토리 whatever 스킨 사이드바 추가 후기 그리고 잡담

티스토리 Whatever 스킨 사이드바 폭 조절 방법

 

제 글이 도움 되었다면 ♥공감+구독+SNS공유+α 꾹 부탁드리며, 궁금한 사항은 언제든 댓글 주세요 :)