블로그 본문 글의 길이가 사이드바보다 긴 경우, 방문자가 콘텐츠를 읽으면서 화면을 내리면 사이드바 자리는 비어있게 된다. 글이 길어질수록 사이드바의 빈자리가 계속 눈에 띄어서 허전하다는 생각이 들기 마련이다.
그래서 비교적 긴 글을 발행하는 운영자라면 화면을 내려도 사이드바가 계속 보이게 하는 스티키 기능 적용을 생각해 볼 수 있다.
화면에 사이드바가 있는 상태에서 개발자도구 등을 통해 클래스 이름을 확인 후 코드를 추가하면 된다.
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
* 외모 – customize – additional CSS 공간 빈 곳에 간격을 넓히고 아무 곳에 추가
위는 제너레이트 프레스 테마 기준인데 테마 종류마다 사이드바 클래스 이름에는 차이가 있을 것이다. 클래스 이름은 다르더라도 position과 top 속성만 제대로 넣으면 스티키 기능은 문제 없이 구현할 수 있다.
* 위 클래스 이름에서 #right-sidebar 문자 대신 div를 넣거나(뒤는 동일) #right-sidebar를 지우고 .inside-right-sidebar로 해도 적용됨
코드를 넣고 화면을 아래로 움직여 보면 사이드바가 화면에 붙어서 따라오는 것을 볼 수 있다.
참고로 top 속성은 임의로 30px를 줬는데 원하는 대로 설정하면 되고 상황에 따라 bottom 값을 추가해도 된다.
top 속성
– 스티키 값만큼 화면 위에서 떨어져 고정됨
– 숫자 단위는 픽셀(px), 퍼센트(%), em 등으로 설정
– 양수 설정 : 설정 값만큼 사이드바가 화면 위로부터 떨어져 고정
– 음수 설정 : 설정 값만큼 사이드바가 화면 위로 올라가서 고정
bottom 속성
– 스티키 값만큼 화면 아래서 떨어진 위치에 고정됨
– 숫자 설정 단위는 top 속성과 동일함
– 양수 설정 : 설정 값만큼 사이드바가 화면 아래에서 떨어져 고정
– 음수 설정 : 설정 값만큼 사이드바가 화면 아래로 내려가서 고정
* top과 bottom 값 모두 화면 스크롤 범위를 벗어나지 않는 범위에서 유효함
* 스티키 기능은 Internet Explorer 같은 브라우저에서는 작동하지 않을 수 있음
* 스티키 기능은 pc나 태블릿 pc 등에서 적용되며 모바일은 제외됨 (화면 폭이 작아서 사이드바가 안 보임)
예시를 위해 top을 200px로 설정했는데 그만큼 사이드바 위에 여백이 생긴 것을 알 수 있다. 여기서 화면을 내리면 사이드바도 위 상태 그대로 여백이 고정되어 스크롤을 따라 내려온다.
이번에는 반대로 top을 -200px로 음수 설정을 한 모습인데, 화면을 내리면 사이드바 위쪽에서부터 200px 아래 고정된 위 모습으로 스크롤을 따라온다.
이것으로 스티키 기능 설정 방법을 알아보았는데 잘 활용하면 블로그 방문자에게 특정 사이드바 메뉴를 계속 노출할 수 있다. 특히 사이드바에 애드센스를 적용한 경우 광고 수익이 높아지는 데 도움 되는 만큼, 전략적으로 활용할 수 있겠다.
관련 글
워드프레스 사이드바 글 제목 줄 바꿈 스타일 조절 방법
워드프레스 사이드바 카테고리 설정 방법 안내
GeneratePress 마케터 테마 선택 이유와 설치 방법
GP 마케터 테마 사이드바 카테고리 목록 추가하는 방법
GP 마케터 테마 글 본문 사이드바 링크 글자 색깔 바꾸는 방법
