네이버, 다음, 구글과 같은 주요 검색 플랫폼에서 자신의 블로그를 상단에 노출시키기 위한 중요한 요소중 하나로 체류시간과 이탈률을 생각해 볼 수 있습니다.
따라서 방문자가 웹페이지에 머무는 체류시간은 높아야 하고, 여러 페이지를 조회하여 이탈률을 낮출수록 블로그지수를 높이는데 영향을 받는다고 하겠습니다.
이렇게 블로그 지수를 높이기 위한 요소로 체류시간은 늘리고, 이탈률을 낮추는 방법으로 상단 메뉴를 고정하여 스크롤를 이동하더라고 상단의 메뉴가 따라다니게 하여 체류시간은 높이고 이탈률을 낮추는데 기여할 수 있습니다.
티스토리 BookClub (북클럽) 스킨 상단 메뉴 고정 방법.
블로그 상단 메뉴를 고정 하여 기대할 수 있는것으로는 체류시간을 높이고 이탈률을 낮추어 블로그 지수를 높이는데 그 목적이 있다는것을 위에서 말씀 드렸습니다.
이제 BookClub (북클럽) 스킨에서 상단 메뉴를 고정하는 방법을 알아보도록 하겠습니다.
#header CSS 코드 수정.
#header 클래스를 수정해 주는것으로 스크롤바를 이동하더라도 상단 메뉴가 항상 고정되어 있도록 할 수 있습니다.
- 티스토리 관리자 로그인.
- 스킨편집 → Html편집 → CSS
- 118번째줄 #header 기본 적용 코드를 수정 적용 코드로 수정.
| 기본 적용 코드 | 수정 적용 코드. |
| #header {
border-bottom: 1px solid #eee; } |
#header {
z-index:1010; background-color:#fff; box-sizing:border-box; position:sticky; position:-webkit-sticky; top:0; } |
#aside 속성값 수정.
#aside 클래스 속성값을 수정해 주게 되면 #header 클래스 코드에서 수정했을때 발생하게 되는 스마트폰에서 사이드바를 열었을때 사이드바가 헤더 밑에 깔리는 문제를 해결해 줄 수 있습니다.
- 티스토리 관리자 로그인.
- 스킨편집 → Html편집 → CSS
- 2484번째줄 #aside 클래스 속성값 z-index 설정값 변경.
| 기본 적용 설정값 | 수정 적용 설정값 |
| 400px | 1030px |
#dimmed 속성값 수정.
마지막으로 #dimmed 클래스 속성값을 수정해 주는것으로 상단 메뉴를 고정할 수 있습니다.
- 티스토리 관리자 로그인.
- 스킨편집 → Html편집 → CSS
- 2126번째줄 #dimmed 클래스 속성값 z-index 설정값 변경.
| 기본 적용 설정값 | 수정 적용 설정값 |
| 300 | 1020 |
