오디세이(Odyssey) 스킨의 사이드바를 왼쪽으로 옮기는 방법

출처 : 투에이치패션 현쭌아빠

광고는 오른쪽 사이드바에 있는 것보다 왼쪽에 사이드바에 광고가 있을 때 더 잘 눌린다. 그래서 오디세이 스킨의 기존 오른쪽 사이드바를 왼쪽으로 옮기고자 한다.

 

티스토리 블로그 관리-꾸미기-스킨 편집-html 편집-CSS로 들어간다.

CSS 탭의 최하단에 엔터를 친 후 아래를 복사하여 붙여넣는다.

 

@media screen and (min-width: 1061px) { .wrap-right .main { flex-direction: row-reverse; } .wrap-right .area-aside { margin: 32px 80px 0 0; } .article-header .box-meta { margin-left: 380px; } }

 

붙이고 나서 적용을 누른 뒤 왼쪽 새로고침을 누르면 사이드바가 오른쪽에서 왼쪽으로 이동한다.

오디세이 스킨 사이드바가 오른쪽에서 왼쪽으로 바뀐 모습(전→후)

내가 최근에 산 티스토리 전자책에서는 왼쪽이 더 광고가 잘 눌린다는데, 나는 화면 터치가 가능한 노트북을 써서 그런지 오른손잡이인 나에게는 오히려 화면 오른쪽을 오른손으로 드래그하며 가끔 오른쪽에 있는 광고가 눌러지는데 말이다. 나는 오른쪽이 경험상 잘 눌리는 것 같은데, 모두가 나처럼 화면 터치가 가능한 노트북을 가지고 있는 건 아니니~

 

참고 : 사이드바가 고정되기를 원한다면 아까 CSS탭에 붙여넣은 것 아래에 아래 문구를 복사 붙여넣기를 한다.

 

@media screen and (min-width: 1061px) { .wrap-right .area-aside { align-self: flex-start; position: sticky; top: 32px; height: 100%; } } #wrap { overflow: auto; overflow-x: hidden; height: 100%; }

 

나는 별 차이가 없어서 그냥 사이드바 고정 안 했다.

 

사이드바를 왼쪽으로 옮기고 나서는 어색했는데, 지금은 덜 한 편이다. 나는 오른손잡이여서 그런지 아직도 내 블로그가 새롭다.ㅋㅋ

 

아 처음 이미지의 A+, A, B, C의 의미는 아래와 같다.

A+ : 사람들의 시선이 제일 많이 머물고 클릭이 가장 많이 일어나는 곳
A : 사람들의 시선이 많이 머물고 어느 정도의 클릭이 발생하는 위치
B : A나 A+에 비해서는 효과가 떨어지지만 보통 정도의 클릭은 발생하는 위치
C : 사람들의 시선이 거의 없는 곳, 당연히 클릭이 거의 나오지 않은 위치