[티스토리 블로거 되기] 008. 사이드바 위치 바꾸기

티스토리에는 기본으로 제공하는 스킨들이 꽤 많이 있습니다. 그렇지만 마음에 딱 맞는 스킨을 고르기란 쉽지 않은것 같네요.^^ 혹시 스킨은 마음에 드는데 사이드바의 위치가 마음에 들지 않는 경우는 없나요? 

저는 그런 경우가 있더라구요. 사이드바의 위치는 왼쪽이 좋아보이는데, 마음에 드는 스킨은 사이드바를 오른쪽에 두고 있는 경우가 그런데요. 그럴땐 스티일시트만 조금 건드리면 사이드바의 위치를 바꿀 수 있답니다.ㅋ

(덧: 모든 사진은 클릭하시면 커집니다. 클릭해서 보세요.^^;)

위와같이 오른쪽 빨간 박스 안에 있는 사이드바를 왼쪽으로 옮겨보겠습니다. 먼저, 관리 페이지로 가셔서 스킨 > HTML/CSS 편집 메뉴로 들어가시면 아래와 같은 화면이 뜹니다.

위쪽 박스(skin.html)는 보실 필요 없구요. 아래쪽 박스(style.css)만 보시면 됩니다. 아래쪽 style.css 박스 안에서 "블로그 레이아웃" 이라는 부분을 찾아야 하는데요. 스크롤 내리면서 그냥 찾으려면 눈 아파요.ㅜㅜ 이럴때는 윈도우 기본기능인 찾기(Ctrl + F) 기능을 이용하시면 좋습니다.^^;

(파이어폭스는 찾기 메뉴가 아랫쪽에 나오네요. 익스는 아마 조그마한 창으로 뜰거에요.)

레이아웃에 보시면 content 부분과 sidebar 부분이 있을거에요. 우리는 content 와 sidebar 의 위치를 바꿔주는게 목적이니 위치를 지정해주는 코드를 서로 바꿔버리면 되겠지요.

content 아래쪽에 있는 float:left; 를 float:right; 로 바꿔주시구요.

sidebar 아래쪽에 있는 float:right; 를 float:left; 로 바꿔주세요.

사이드바가 오른쪽에 표시됩니다.

사이드바가 왼쪽에 표시됩니다.

                  
제대로 바꿔주셨다면 끝입니다.  어려운건 없죠? ㅋ
저장하시구, 블로그로 가시면, 아래와 같이 바뀐걸 확인하실 수 있습니다.

사이드바(빨간박스 부분)의 위치가 오른쪽에서 왼쪽으로 바뀌어져 있습니다.

이제 스킨을 고르신 후, 사이드바의 위치는 취향대로 바꿔보세요~ ^^;


덧.) 쭈르님의 블로그(http://jiryu.tistory.com/379) 에서 배운걸 바탕으로 했습니다. 쭈르님이 고르신 스킨의 CSS 와는 코드가 약간 다르긴 하지만 대부분의 스킨은 비슷한 방법으로 사이드바의 위치를 바꿀 수 있더라구요. 쭈르님 글도 참고해서 보세요~ ^^;

덧2.) 2010년 12월 26일 작성되었던 글을 약간 수정하고, 카테고리만 바꿔 재업했습니다.^^;