티스토리 Square스킨 사이드바 오른쪽 이동 방법::어나일언덕

일반적으로 컴퓨터를 사용하다보면 마우스 커서는 화면에서 오른쪽으로 치우쳐 위치하는 경우가 많습니다.

그래서 마우스와 많이 반응을 해야할 메뉴들은 보통 오른쪽에 위치하는 것이 편합니다.

이번에 공유할 Square 스킨 수정 팁은 왼쪽에 있는 사이드바를 오른쪽으로 옮기는 방법입니다.

수정 내용

아래에 위 동영상에서 수정된 내용에 대한 설명입니다.

CSS변경 창에서 Line을 찾아 이동해서 수정하면 쉽게 수정할 수 있습니다. Line 은 처음 스킨 적용상태의 Line number로 Style 수정을 한 상태라면 약간의 차이가 있을 수는 있겠지만 크게 변경하지 않은 상태라면 그 전후에 보면 쉽게 찾을 수 있을 겁니다.

사이드 바 위치 이동

51 Line : left -> right;

#sidebar { position: fixed; top: 0; left: 0; bottom: 0; padding: 0; width: 300px; height: 100%; background-color: #fff; border-right: 1px solid #ddd; cursor: default; }

#sidebar { position: fixed; top: 0; right: 0; bottom: 0; padding: 0; width: 300px; height: 100%; background-color: #fff; border-right: 1px solid #ddd; cursor: default; }

이 블로그의 경우에는 녹색박스 의 값이 320로 되어 있습니다. 이유는
사이드바에 애드센스 광고삽입과 Square스킨 사이드바크기 조절 방법
이 글을 참고 하시기 바라며, 만약 사이드바 크기를 변경하였다면 이 아래의 값들에 크기 변경 값을 추가해 주면 됩니다.
사이드바 크기를 300에서 320으로 변경한 상태라면, 아래 값들도 모두 20을 추가해주면 됩니다. ex) 330+20->350, 300+20->320

사이드 바 이동에 따른 본문 여백 변경

80 Line : 0->330px , 330px->0

#content { margin: 0 0 0 330px; padding: 0; }

#content {margin: 0 330px 0 0; padding: 0px; }

81 Line : padding-right -> padding-right

#content-inner { max-width: 1030px; width: 100%; padding-right: 30px; }

#content-inner { max-width: 1030px; width: 100%; padding-left: 30px; }

창 크기 변경시 사이드바 반응 위치 변경

306 Line : -300px -> 300px

@media all and (max-width: 959px) {

#sidebar { z-index: 100;

-webkit-transform: translate3d(-300px,0,0);

-moz-transform: translate3d(-300px,0,0);

transform: translate3d(-300px,0,0);

@media all and (max-width: 959px) {

#sidebar { z-index: 100;

-webkit-transform: translate3d(300px,0,0);

-moz-transform: translate3d(300px,0,0);

transform: translate3d(300px,0,0);

창 크기 변경시 사이드바 토글 위치 변경

321 Line : left -> right

#sidebar-toggle { display: block; position: fixed; left: 10px; bottom: 10px; width: 50px; height: 50px; line-height: 55px; text-align: center; color: #555; background-color: #f1f1f1; border-radius: 10px; opacity: 0.9; box-shadow: 0 0 10px #aaa; z-index: 101; }

#sidebar-toggle { display: block; position: fixed; right: 10px; bottom: 10px; width: 50px; height: 50px; line-height: 55px; text-align: center; color: #555; background-color: #f1f1f1; border-radius: 10px; opacity: 0.9; box-shadow: 0 0 10px #aaa; z-index: 101; }