과거에는 애드센스 광고가 고정되어, 화면 스크롤을 따라다니는 '플로팅 광고'가 정책 위반이었던 시절이 있었습니다. 하지만, 2019년도 즈음부터 콘텐츠 화면(사진, 글자 등)을 가리지 않는 선에서는 플로팅 광고를 사용하는 것이 허용되자, 사이드바 광고를 고정해서 많이들 사용하는데요. 이를 위해선 사이드바 고정 방법을 알아야 합니다.
이번 글에서는 티스토리에서 사이드바를 고정하는 방법을 정리해 드립니다.
티스토리 사이드바 고정 방법
사이드바를 특정 위치에 고정하기 위해서는 CSS를 수정해야 합니다. 그리고 사이드바에 해당하는 선택자를 찾아서 코드를 수정하면 되는데요. 우선, 티스토리의 CSS 코드 수정 화면부터 접속합니다.
티스토리 CSS 코드 편집 방법
우선 티스토리의 CSS 편집 페이지부터 접속합니다. 블로그 페이지(통계, 글 관리 등을 할 수 있는 페이지)에서 "꾸미기 → 스킨 편집"에 접속하십시오.
그럼 왼쪽에는 블로그 미리보기 화면과 오른쪽에는 스킨 편집에 대한 항목이 나오죠? 여기서 오른쪽 상단에 있는 'html 편집' 버튼을 클릭합니다. 그리고 3가지의 상단 탭에서 'CSS'를 선택합니다. 그리고 CSS 코드 중, 사이드바 선택자를 찾아 고정 코드를 입력하면 됩니다.
사이드바 고정 코드 입력하기
CSS에서 사이드바 선택자를 찾아, 아래의 코드로 수정하면 됩니다. 선택자(#)는 스킨마다 다를 수 있으나, 볼드체(굵게 표시된 글자)는 그대로 사용해도 무방합니다. 또한, 코드의 숫자 등을 수정함으로써 사이드바가 고정되는 위치를 바꾸는 것도 가능합니다.
#container #main #sidebar { margin-left: 15px;
max-width: 300px;
align-self: flex-start;
top: 2rem;
flex:1;
position: sticky;
position: -webkit-sticky;
}
위의 선택자는 고래 스킨이 기준이며, 티스토리에서 가장 많이 사용하는 스킨인 북클럽의 사이드바 선택자는 #aside이니 참고하십시오.
사이드바 선택자 찾는 방법
만약 고래 스킨도 북클럽 스킨도 사용하지 않아, 사이드바 선택자를 찾는 것이 어렵다면, 크롬의 개발자 도구를 사용하여 선택자를 찾을 수 있습니다. 크롬의 개발자 모드는 크롬 브라우저를 켜 둔 상태에서 키보드의 F12 버튼을 클릭하면, 오른쪽이나 아래쪽에서 활용할 수 있습니다.
또는 마우스 오른쪽 버튼을 클릭하고 '검사'를 클릭하면, 인터넷 브라우저 화면의 해당 요소를 개발자 모드로 살펴볼 수 있습니다.
위의 사진이 티스토리 블로그의 사이드바를 개발자 모드로 확인하는 모습인데요. 개발자 코드에 마우스를 갖다 대면, 이 코드가 인터넷 화면에서 어떤 것을 의미하는지 보여주기 때문에, 이를 통해 사이드바 코드의 위치를 찾을 수 있습니다. 그리고 사이드바의 선택자를 찾아, 이를 활용하면 됩니다.
말이 조금 어렵지만, 급한 마음을 조금만 차분하게 하고 사이드바 구성 요소의 앞뒤를 찾다 보면, 사이드바 코드의 시작 위치를 찾을 수 있습니다. 그럼에도 불구하고 어렵다면, 댓글을 통해 도움을 요청해 주십시오.
지금까지 티스토리 사이드바 고정 방법(왼쪽, 오른쪽)에 대해 자세히 정리하였습니다. 애드센스 세로 광고를 사이드바에 고정하여 사용하는 것은 수익 상승에 꽤 많은 도움이 되는데요. 제 자료가 수익 상승에 있어서 도움이 되길 바랍니다.
"쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다. "
