티스토리 사이드바 고정 - 고래 스킨

목차

• 티스토리 사이드바 고정 - 고래 스킨
• CSS 수정

티스토리 사이드바 고정 - 고래 스킨

하루일기 블로그는 사이드바가 고정되어 있습니다. 긴 글을 읽다 보면 스크롤이 올라감에 따라 사이드바도 따라 올라가 나중에는 텅 비게 됩니다. 사이드바에 기껏 배치해 놓은 인기글이나 최근글 목록을 보려면 다시 저 위까지 올라가야 하지요. 하지만 사이드바를 고정해 두면 그렇게 왔다 갔다 할 필요가 없습니다. 

 

CSS 수정

그럼 티스토리에서 사이드바를 고정시키려면 어떻게 해야 할까요? CSS 파일을 조금만 수정하면 됩니다. 우선 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집으로 들어가 보세요. 스킨 편집 맨 위에 보이는 HTML/ CSS / 파일 업로드 중에서 CSS를 선택하면 됩니다.

 

전 고래 스킨 4.1을 사용하고 있는데요, command+F, 또는 Ctrl+F키를 눌러 sidebar를 찾아보세요. 여러개가 나올 텐데요, 652번째 줄(조금 다를 수 있습니다)에 있는 sidebar를 보면 아래 그림처럼 되어있을 거예요. 이 부분을 그다음 사진(수정 후 CSS)처럼 고쳐주면 됩니다. (#sidebar대신 #aside로 되어있는 스킨도 있습니다)

 

고래스킨 4.1 기존 CSS

 

수정후 CSS

 

max width :300px; 와 } 사이에 다음 문구를 끼워 넣으면 됩니다.

align-self:flex-start;
top:2rem;
flex:1;
position:sticky;
position:-webkit-sticky;

 

이렇게 하면 사이드바는 꼭대기에 매달려 설정된 위치에 도달하기 전까지는 따라 움직입니다. 하지만 그 수준을 넘어서면 고정된채 움직이지 않게 됩니다. 그걸 해주는 것이 sticky이고, 위에서부터 얼만큼이라고 세부위치를 정해주는 것이 top입니다.

 

---

 

전에는 사이드바에 애드센스 광고를 배치하고 사이드바를 고정시키면 광고정책 위반 행위에 해당했습니다. 하지만 2019년 풀린 이후 현재까지는 괜찮다고 합니다. 정책은 언제든지 변할 수 있습니다. 그때그때 맞춰 대응하면 되겠지요.