지금까지 이런저런 티스토리 유료스킨을 많이 써봤는데, 현재 이 블로그에 적용하여 쓰고 있는 라꼬 스킨이 속도와 SEO가 우수해서 수익형 블로그에는 제격이었다. (티스토리 유료스킨 3대장 속도비교🔗)
주력 블로그에는 라꼬스킨을 사용하고 있는데, 나머지 중의 하나에 JB팩토리 스킨을 적용해놓은 곳이 있다. 그런데 이 스킨에는 사이드바 자동 플로팅 기능이 없다는 것을 발견했다. 라꼬 스킨에는 사이드바 고정이 기본으로 설정되어 있다. 데스크탑에서 지금 이 블로그 스크롤 내려보면 알 수 있다.
사이드바 고정이란?
사이드바 고정이 뭘 말하는거냐면, 위와 같이 마우스 휠 돌려서 화면을 아래로 스크롤 할 때, 본문은 계속 내려가지만 사이드바는 어느 지점에서 화면 상단에 걸린듯이 멈추게 되는 것을 말한다.
특히 광고 부분에서 화면 상단에 걸리게 하면 계속 고정된 형태로 보여줄 수 있어서 클릭율 향상에 도움이 된다. 예전에는 구글 애드센스 정책상 화면에 고정된 광고 형태는 금지되었으나, 현재는 사이드바 플로팅 고정광고가 허용된다. 아예 애드센스 광고단위 중에 사이드레일 이라는 것을 출시하기도 했으니깐.
JB 스킨 사이드바 광고 고정하는 방법
검색해보면 나오는 소스는 다음과 같다.#aside { position: sticky; position: -webkit-sticky; top: -100px; }
이것은 aside라는 이름의 id에 대해서 -100 위치에 (=스크롤 100px 내렸을 지점에) 걸리게 만든다는 것이다. 그러나 이걸 JB 스킨 CSS 편집에 넣으면 사이드바가 고정되지 않는다.
지난번에 워드프레스 사이드바 고정방법에 소개했듯이 ① 미디어 쿼리를 이용해서 화면 너비폭을 지정해주어야 하고, ② aside가 아닌 JB 스킨에서 쓰는 사이드바의 div class 명으로 써주어야 한다.
다음과 같은 소스를 CSS 편집에 들어가서 상단에 적당한 위치에 넣어주면 된다.@media (min-width: 768px){ .jb-column-sidebar { float: right; position: sticky; position: -webkit-sticky; top: -700px; } }
이렇게 미디어 쿼리를 이용해 화면폭 768 이상일 경우에 동작하는 데스크탑 전용 소스로 제한하고, JB 스킨의 사이드바 클래스명인 jb-column-sidebar 로 지정을 해주어야 한다.
내 경우는 top : -700px로 지정했는데 이건 위에 있는 카테고리가 스크롤 너머로 사라진 다음 광고 부분에서 상단에 고정되도록 하는 길이이다. 현재 자신의 사이드바 구성 상태에 따라서 적절한 수치를 넣어주면 된다.
이렇게 하면 JB 스킨 적용 블로그에서 사이드바의 광고가 깔끔하게 상단에 고정되어 본문 스크롤시에도 따라다니게 된다.
