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

2020. 10. 5. 09:12 | 댓글 4

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

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

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

 

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

10년 이상 전에는 웹사이트에 사이드바가 대부분의 왼쪽에 위치해있었습니다. 하지만 요즘에는 많은 사이트의 사이드바가 오른쪽에 위치해있습니다. 그렇다면 왼쪽 사이드바와 오른쪽 사이드�

avada.tistory.com

사이드바를 오른쪽에 배치하는 것이 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 탭의 하단에 추가하도록 합니다.

참고

 

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

이 블로그에서 티스토리의 소제목 스타일을 변경하는 방법에 대해 설명한 적이 있어 중복이라서 굳이 다루지 않았지만 고래 스킨에서 소제목 스타일을 지정하는 방법에 대한 문의가 간혹 있어

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    푸우시로

    안녕하세요.
    오랫만입니다. 잘지내시죠?

    오랫동안 블로그 관리를 못하고 있다가..
    갑자기 생각나서 놀러왔습니다. ^^

    감기조심하시구요~

  2. thumbnail
    베리남

    안녕하세요 수정을 해보았는데, 왼쪽 저 아래 하단에 달리는데요. 위로 어떻게 올릴수 있을까요;