티스토리 북클럽 스킨 사이드바 고정 마우스 스크롤 안 움직이게 CSS 편집

티스토리 북클럽 스킨 사이드바 고정 마우스 스크롤 안 움직이게 CSS 편집

티스토리 블로그를 운영하다 보면 스킨을 수정하여 더 나은 사용자 경험을 제공하고 싶은 욕구가 생기곤 합니다. 이 중에서도 사이드바를 화면 위에 고정시키는 방법은 독자들이 더 편리하게 컨텐츠를 읽을 수 있게 도와주는 중요한 요소 중 하나입니다. 이번 포스팅에서는 티스토리 북클럽 스킨의 사이드바를 고정하는 방법에 대해 알아보겠습니다. 간단한 CSS 코드 몇 줄만으로도 손쉽게 구현할 수 있습니다.

티스토리 북클럽 스킨 사이드바 고정 마우스 스크롤 안 움직이게 CSS 편집

티스토리 사이드바를 화면 상단에 고정시키는 것은 독자들이 블로그 컨텐츠를 스크롤할 때 언제든지 중요한 정보에 접근할 수 있도록 도와줍니다. 아래의 CSS 코드를 사용하여 티스토리 북클럽 스킨에서 사이드바를 고정시킬 수 있습니다.

티스토리 북클럽 스킨 HTML 편집

티스토리 홈페이지에 접속 후 로그인합니다.

스킨편집에서 HTML 편집 -> CSS 탭으로 이동 후 아래 CSS 태그를 가장 하단에 붙여넣기합니다.

/* 사이드바 고정 시작 */
#aside {
  position: sticky;
  position: -webkit-sticky;
  top: -60px;
}

위 코드는 사이드바의 위치를 화면 상단으로 고정시키는 역할을 합니다. `position: sticky;` 속성은 요소를 스크롤 가능한 영역 내에서 고정시키며, `top: -60px;`는 사이드바를 약간 위로 이동시켜 겹치는 부분을 조정하는 역할을 합니다.

이 코드를 티스토리 블로그의 스킨 수정 옵션에서 추가하면, 독자들이 블로그를 스크롤해도 사이드바가 상단에 고정되어 편리하게 활용할 수 있습니다. 필요에 따라 `top` 값 등을 조정하여 더 적합한 모습으로 디자인할 수도 있으며 구글 애드센스 광고를 삽입한 뒤에도 애드센스 광고가 고정되어 마우스 스크롤을 내리더라도 광고가 계속 고정되어 나오기 때문에 광고노출 및 클릭률이 올라가 수익을 늘릴 수 있습니다.

이렇게 간단한 CSS 코드 몇 줄만으로도 티스토리 북클럽 스킨의 사이드바를 고정시킬 수 있습니다. 독자들의 편의성을 고려하여 스킨을 수정하는 노력은 블로그 운영의 질을 높이는데 큰 도움이 될 것입니다.

티스토리 사이드바 고정해제 맟 마우스 스크롤 고정 - 사이즈 조절 CSS

 

워드프레스 사이드바 위젯 모바일 숨기기 설정