티스토리 오디세이 Odyssey 스킨 사이드바 좌측으로 변경

티스토리 오디세이 Odyssey 스킨 사이드바 좌측으로 변경

 

안녕하세요 사람사물상황입니다.

 

1. 기본스킨을 오디세이로

티스토리의 기본스킨을 오디세이로 정하기로 했습니다. 그래서 이제 제 입맛대로 수정을 해볼꺼고요, 그리고 나서 이제부터 이어질 포스팅들은 오디세이 스킨을 수정하면서 뭘 수정했는지 올릴려고 합니다. 애시당초 염두한점이 최대한 골격이 갖춰진 스킨이였고, 최소한만 만지고 싶었습니다. 오디세이는 사이드바만 만지면 거의 갖춰진 스킨이였습니다.

 

2. 사이드바 좌측으로 옮기기

먼저 원래는 1단과, 우측 고정인 오디세이의 사이드바를 좌측으로 변경해 보겠습니다.

위치 조정으로 되는듯 하나, 코드를 짜준분이 있어서 깔끔히 왼쪽으로 옮길수 있게 됐습니다. 

그 코드를 만들어 주신분의 해당글 링크입니다. alikong.tistory.com/62

 

다음은 원래 기본 우측 고정 사이드바의 모습입니다.

 

 

 

3. 코드 넣기 

다음의 코드를 스킨편집-html-body 끝나기 전에 넣어주면 됩니다. 저는 맨밑에 넣었습니다.

 

<style>
  @media screen and (min-width: 1061px) {
    .wrap-right .area-aside {
      margin: 32px 80px 0 0;
    }
  }
</style>
<script>
  var _main = document.querySelector('.main');
  var areaMain = document.querySelector('.area-main');
  var areaAside = document.querySelector('.area-aside');
  _main.insertBefore(areaAside, areaMain);
</script>

 

 

 

그러면 이렇게 바뀝니다.

 

그런데 수정하면서 보니 제목과 본문 미리보기등이 본문을 뚫고 나오네요. 그것에 대한 수정은 다음글에 하겠습니다.

 

끝.