티스토리에서 고래스킨을 쓰시는 분들이라면 사이드바를 왼쪽으로 이동하고 싶으실 수 있습니다.
일반적인 북클럽에서는 사이드바 이동 기능을 지원하지만, 고래스킨에서는 4.1 버전 까지도 사이드바를 옮기는 기능은 지원하지 않고 있습니다.
이 글에서는 고래 스킨 4.1에서 어떻게 해야 사이드바를 왼쪽으로 이동시킬 수 있는지 그 방법을 소개하도록 하겠습니다.
고래스킨에서 사이드바를 왼쪽으로 이동하는 방법
단순하게 코드만 붙여 넣는다면 편하지만, 만약 각 코드의 뜻을 알고 있다면 나중에 응용해서 적용도 가능합니다.
또한 무언가 잘못 적용되었을 때 문제점을 찾아낼 수도 있습니다.
그러므로 고래 스킨에서 사이드바를 왼쪽으로 이동하려면 우선 CSS 코드에서 다음에 설명할 정보들을 알고 있는 것이 좋습니다.
@media only screen and (min-width: 930px)
{
#main {
flex-direction: row-reverse;
}
#container #main #sidebar {
margin-left: 0;
}
#container #main #content {
margin-left: 15px;
}
}
1. @media only screen and (min-width : 000px) : 스크린의 크기 조건을 설정하는 함수입니다. 이 코드는 이미 위쪽의 CSS에 존재하지만, flex-direction을 추가하게 되므로 코드가 위에서 아래로 읽어지며 갱신되어 추가적인 기능을 넣는 것과 마찬가지가 됩니다.
2. flex-direction :row-reverse : 해당 코드가 사이드바를 왼쪽으로 이동시켜 주는 역할을 합니다. 만약 위쪽 코드에 붙여도 똑같이 작용합니다.
3.#container #main #siderbar와 #container #main #content : 각각 사이드바의 위치와 사이드바 안에 존재하는 콘텐츠의 위치를 결정하는 코드들입니다.
여기서는 왼쪽으로 거울처럼 이동시켜 주었으므로 #sidebar에서는 원래 15px이던 margin left를 0으로, #content에서는 원래 0px이던 margin-left를 15px로 변경해 주어서 반대쪽으로 보냅니다.
사이드바 왼쪽 이동 코드를 붙여 넣는 위치
블로그 설정으로 들어가셔서 왼쪽에 위치한 스킨 편집을 찾으시고 html 편집으로 들어갑니다.
그런 다음 CSS에서 맨 아래로 내려서 해당 코드를 붙여 넣으시면 됩니다.
맨 아래에 코드를 붙여 넣어야 갱신이 가능합니다. 혹은 위에서 각각의 요소들을 찾아서 코드의 첫 번째 대괄호 안에 있는 것들을 추가해 주면 됩니다.
이것은 모든 CSS에서 통용되는 것으로, 위에서 존재하는 코드들을 같은 양식으로 아래에 쓰고 기능을 추가하면 아래에 존재하는 코드가 로딩 때 추가됩니다.
완전히 같은 코드일 경우에는 아래에 존재하는 것이 우선 되어 갱신됩니다.
SEO적인 측면에서 사이드바
신규형 블로그인 워드프레스가 나타나면서 사이드바를 오른쪽에 놓는 것이 SEO적인 측면에서 약간 더 좋다는 결과가 있습니다.
하지만 링크에서 실험 결과를 보시면 그 차이는 정말 미미합니다. 개인적으로는 오른손잡이 왼손잡이 차이라고 생각되니 안심하시고 그냥 원하시는 걸로 쓰셔도 될 것 같습니다.
마치며
이렇게 해서 티스토리에서 고래스킨 사이드바를 왼쪽으로 옮기는 방법을 알아보았습니다.
고래스킨을 추가적으로 바꾸고 싶다면 아래의 글들도 참고하시길 바랍니다.
