티스토리 사이드바 고정 - 고래 스킨
하루일기 블로그는 사이드바가 고정되어 있습니다. 긴 글을 읽다 보면 스크롤이 올라감에 따라 사이드바도 따라 올라가 나중에는 텅 비게 됩니다. 사이드바에 기껏 배치해 놓은 인기글이나 최근글 목록을 보려면 다시 저 위까지 올라가야 하지요. 하지만 사이드바를 고정해 두면 그렇게 왔다 갔다 할 필요가 없습니다.
CSS 수정
그럼 티스토리에서 사이드바를 고정시키려면 어떻게 해야 할까요? CSS 파일을 조금만 수정하면 됩니다. 우선 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집으로 들어가 보세요. 스킨 편집 맨 위에 보이는 HTML/ CSS / 파일 업로드 중에서 CSS를 선택하면 됩니다.
전 고래 스킨 4.1을 사용하고 있는데요, command+F, 또는 Ctrl+F키를 눌러 sidebar를 찾아보세요. 여러개가 나올 텐데요, 652번째 줄(조금 다를 수 있습니다)에 있는 sidebar를 보면 아래 그림처럼 되어있을 거예요. 이 부분을 그다음 사진(수정 후 CSS)처럼 고쳐주면 됩니다. (#sidebar대신 #aside로 되어있는 스킨도 있습니다)
max width :300px; 와 } 사이에 다음 문구를 끼워 넣으면 됩니다.
align-self:flex-start;
top:2rem;
flex:1;
position:sticky;
position:-webkit-sticky;
이렇게 하면 사이드바는 꼭대기에 매달려 설정된 위치에 도달하기 전까지는 따라 움직입니다. 하지만 그 수준을 넘어서면 고정된채 움직이지 않게 됩니다. 그걸 해주는 것이 sticky이고, 위에서부터 얼만큼이라고 세부위치를 정해주는 것이 top입니다.
전에는 사이드바에 애드센스 광고를 배치하고 사이드바를 고정시키면 광고정책 위반 행위에 해당했습니다. 하지만 2019년 풀린 이후 현재까지는 괜찮다고 합니다. 정책은 언제든지 변할 수 있습니다. 그때그때 맞춰 대응하면 되겠지요.
