티스토리 블로그 사이드바 왼쪽으로 이동 방법 (고래 스킨)

요즘에는 사이드바가 오른쪽에 배치되는 경우가 많습니다. 경우에 따라 사이드바를 왼쪽으로 이동하고 싶을 수 있습니다. 그런 경우 간단한 CSS로 가능합니다. 이 글에서는 고래 스킨의 사이드바를 오른쪽에서 왼쪽으로 이동하는 방법에 대해 살펴보겠습니다.

티스토리 블로그 사이드바 왼쪽으로 이동 방법 (고래 스킨)

제가 처음 홈페이지 접했을 당시에만 해도 대부분의 사이트의 사이드바가 왼쪽에 배치되어 있었습니다. 당시에는 그런 것이 당연하게 느껴졌고 그것에 대해 별로 눈여겨보지 않았습니다. 하지만 워드프레스가 등장하면서 사이드바가 오른쪽에 배치되기 시작했고 구글에 잘 노출되는 결과가 나타났습니다.

왼쪽 사이드바와 오른쪽 사이드바: 어느 것을 선택해야 할까?

사이드바를 오른쪽에 배치하는 것이 SEO 측면에서 더 유리하다고 합니다.

사이드바를 왼쪽으로 이동하고 싶은 경우 보통 간단한 CSS 코드로 가능합니다. 이 블로그에 적용 중인 고래 스킨을 기준으로 방법을 설명해보겠습니다.

고래 스킨 4.0을 적용하면 사이드바가 오른쪽에 표시됩니다.

오른쪽에 있는 사이드바를 왼쪽으로 이동시키려면 다음 CSS 코드를 추가하도록 합니다.

/* 티스토리 고래 스킨 4.0에서 사이드바 위치를 오른쪽에서 왼쪽으로 이동하기 */
@media only screen and (min-width: 930px)
{
#main {
    flex-direction: row-reverse;
}
	
	#container #main #sidebar {
    margin-left: 0;
}
	
	#container #main #content {
    margin-left: 15px;
}
}

위의 코드에서 flex-direction: row-reverse; 라인이 사이드바의 위치를 오른쪽에서 왼쪽으로 변경하는 기능을 합니다. flex-diretion 속성에 대해서는 w3schools 문서를 참고해보세요.

그 외 스타일은 CSS를 사용하여 적절히 조정하시기 바랍니다. 위의 CSS 코드 스니펫을 추가하는 방법은 아래의 CSS 코드 추가하기 섹션을 참고해보세요. 위의 코드를 적용하면 다음과 같이 사이드바 위치가 변경됩니다.

Flatinum 티스토리 스킨에서 사이드바 위치 변경하기

flex model을 이용하지 않고 변경하고 싶은 경우에도 비교적 간단한 CSS 코드를 사용하여 사이드바 위치를 변경할 수 있습니다. 예를 들어, Flatinum이라는 티스토리 테마에서는 다음과 같은 CSS 코드를 사용하여 사이드바를 왼쪽으로 이동시킬 수 있습니다.

/* 티스토리 Flatinum 스킨에서 사이드바 위치 변경하기 */
@media only screen and (min-width: 992px) {
.col-md-9 {
    float: right !important;
}
}

CSS 코드 추가하기

티스토리 블로그에서 CSS 코드를 추가하고 싶은 경우 꾸미기 > 스킨 편집 > html 편집 > CSS 탭의 하단에 추가하도록 합니다.

참고

티스토리 고래 스킨 소제목 스타일 변경하기