본문으로 바로가기

티스토리 사이드바 위치 변경 방법

category IT Tip/Skin Tip 2016. 9. 22. 13:55


안녕하세요 코딩런입니다.

이번 포스팅에서는 사이드바 위치를 오른쪽에서 왼쪽으로 바꿔보겠습니다.

다른 스킨들은 간단하게 사이드바 위치를 변경할 수 있으나, CCZ-CROSS스킨은 사이드바 영역이 따로 지정되어 있기 때문에 약간 더 수정이 필요합니다. 어렵지 않으니 천천히 따라오시면 손쉽게 사이드바 위치를 변경할 수 있습니다!


1. CSS편집에서 #content를 검색

해당 부분에 오셨으면 #content에서 float: left; 부분과 #sidebar에서 float: right; 부분을 서로 바꿔줍니다.


float: left; 였던 아이를 float: right;로 float: right; 였던 아이를 float: left;로 변경하여 줍니다.


위치는 바뀌었지만 겹쳐지고 깨져서 나오네요.

다른 스킨 같은 경우에는 이렇게하면 대부분 바뀌지만 CCZ-CROSS스킨은 영역 설정을 더 해줘야합니다.


2. CSS 편집에서 main-inner 검색


margin-right: 320px; 였던 부분을 margin-left: 320px;로 변경하여줍니다.


사이드바 배경 영역은 정상적으로 이동을 하였지만 사이드바가 제자리에 위치하지 못하네요!


3. CSS 편집에서 #sidebar를 검색


margin-right: -321px; 이던 부분을 margin-left: -321px;로 변경하여줍니다.


완성된 모습!

딱 알맞게 변경 되었네요 ^^

이 방법을 응용해서 자기만의 사이드바를 만들면 더 좋겠죠? ㅎㅎ


그럼 티스토리 사이드바 위치 변경 방법은 여기서 마치도록 하겠습니다.