사이드바를 이동이 쉬워 옮겼다.

아래 글을 쓴 후 다시 사이드바를 사이드바를 몇년간 오른쪽에서 봤다가 며칠 왼쪽에 있는 것을 보니 어색해서 원위치로 옮겼습니다.

티스토리 스킨을 많이 다루면서 사이드바를 이동하는 것을 어느정도 알게 되었습니다. 이번에 수학방님의 글을 보고서 이 블로그의 사이드바를 왼쪽으로 옮겼습니다.  스킨을 3년 동안 변경을 못해 변화를 주려고요. 스킨도 변경못하고 무엇인가 변화가 필요해서 사이드바를 오른쪽에서 왼쪽으로 옮겼습니다. 이 페이지에서 이것에 대해 설명합니다.

일반적인 2단 스킨의 구조

스킨에서 사이드바를 옮기는 것은 대공사라고 생각했습니다. 그러나 생각해보니 간단할 것이라는 생각이 들었습니다. 티스토리의 2단 스킨에서 스킨 구조가 보통 아래 그림처럼 되며 CSS에서 content는 left(왼쪽)이고 sidebar는 right(오른쪽)입니다. 이 설정을 서로 바꾸면 될 것이라 생각되었습니다. 해보았는데 간단히 됐습니다.

이동시켜보기

위와 같은 생각으로 이 스킨의 CSS를 아래 그림처럼 left를 right로 right를 left로 수정했습니다. 왜 제가 큰 그림을 삽입했는지 눈치가 빠른 사람은 알 것입니다. 지루하고 복잡한 설명보다  한 장의 그림으로 보여주는 것이 훨씬 것이 낫기 때문입니다. 아래 그림에 나왔듯 style.css의 content와 sidebar가 있다면 float에서 right와 left를 서로 바꿉니다. 만약 content,sidebar,float가 없으면 골치아프게 수정이 안 되니 찾지 마세요. 참고로 더 자세히 알고 싶다면 CSS에서 float에 대해 알아보세요.

안되는 경우도 있습니다

모든 2단 스킨이 위와 같이 한다고 되지는 않습니다. 그 경우를 몇가지만 아래에서 예를 들어보겠습니다.

• 대부분의 티스토리 스킨에서 사이드바는 영어로 id(아이디) 이름을 보통 sidebar라고 사용할 것입니다. 스킨 제작자가 내용을 content ,사이드바의 경우를 sidebar라고 안 할 수도 있다는 것을 알기 바랍니다. 만약 이름을 다르게 지정했을 때 위와 같이는 안 됩니다. 단 콘텐츠와 사이드바의 id(아이디)값을 알면 알 수 있는데 초보자에게는 어려우니 하지마세요.
• 제가 배포하는 부트스트랩으로 만든 스킨은 사이드바가 있는 2단형 스킨이지만 사이드바와 콘텐츠를 left,right로 하는 것이 아니라 써준 순서에 따라 왼쪽 오른쪽입니다. 그러니 위와 같이 하는 것은 헛수고입니다. 참고로 그 반응형 스킨은 여기를 클릭하면 볼 수 있습니다.
• 티스토리에서 제공하는 2단형 스킨에서 오른쪽에 사이드바가 있는 두 스킨에서 한번 위와 같이 했습니다. 그 결과 아래 그림의 초록색 스킨은 위와 같이 사이드바를 오른쪽에서 왼쪽으로 이동됐습니다. 그러나 빨간색 사각형 스킨은 3단형과 비슷한 2단형이라 사이드바의 경우는 오른쪽에서 왼쪽으로 이동은 되는데 콘텐츠가 2단형과 비슷해서 깨지네요. 참고로 제가 보니 스킨 아래 그림에서 2단형 다른 스킨은 모두 간단하게 이동이 될 것 같습니다.

네이버나 다음 블로그에서는 쉽습니다

네이버나 다음 블로그를 했다면 사이드바 이동으로 정말 쉽다는 것을 알 것입니다. HTML, CSS를 알 필요도 없고 버튼만 누를 줄 알면 됩니다. 괜히 티스토리에 비해 네이버나 다음 블로그가 쉽다고 하는 것이 아닙니다. 

대부분 스킨은 사이드바가 오른쪽에 있는데 왼쪽에 있으면 어떤 이득이 있는 가는 수학방님의 글을 보기 바랍니다. 그 글을 보면 이탈률,애드센스 등과 관계가 있는 모양입니다. 귀찮게 사이드바를 옮길 필요가 없잖아요. 저의 경우는 스킨을 변경못하니 색다르게 하기 위해 사이드바를 옮겼습니다.

보험상품비교

BY GS보험샵