티스토리 사이드바 고정하기로 광고 상시 노출

728x90

≣ 목차

안녕하세요.

이번 포스팅은 사이드바를 화면에 고정 시키는 방법을 써보려고 합니다.

고정시키는 이유도 광고를 항상 노출 시켜서 광고 수익을 더 올려보려고 하는

목적이 큽니다.

우선 티스토리 스킨마다 CSS 구문이 틀린데요.

저는 Odyssey 스킨이어서, Odyssey 위주로 작성하고 Book Club 도 CSS 스크립트

첨부해 놓겠습니다.

그럼 시작해볼게요~!!

1. 스킨 보관 하기

티스토리 관리자 화면 > 꾸미기 > 스킨 변경 > 사용중인 스킨 > 보관 '클릭'

대충 아무거나 적어주고 '확인' 눌러주세요.

2. CSS 스크립트 편집

다음은 사이드바 고정을 위해 스킨 편집 메뉴로 진입해서 CSS 수정해보겠습니다.

html 편집 화면 들어간 다음 'CSS' 탭을 클릭해줍니다.

여기서 아래 있는 스크립트를 CSS 스크립트의 맨 아래로 내려가서

/* 사이드바 고정 */
@media screen and (min-width: 1061px) {
  .wrap-right .area-aside {
    align-self: flex-start; /* 사이드바 시작 위치 */
    position: sticky;      /* 스크롤에도 고정되게 만듦 */
    top: 32px;             /* 화면 위에서 32px 떨어진 위치 */
    height: 100%;          /* 사이드바 높이 설정 */
  }

  #wrap {
    overflow: auto;        /* 세로 스크롤 가능 */
    overflow-x: hidden;    /* 가로 스크롤 방지 */
    height: 100%;          /* 콘텐츠 높이 조정 */
  }
}
/* 사이드바 고정 끝 */

아래 스크립트는는 Book Club 용 입니다.(Odyssey 에 사용하시면 안되요!!)

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

이렇게 붙여넣기 해주시면 됩니다.

그리고 '적용'을 눌러주세요.

3. 확인하기

참고로 모바일 환경은 레이아웃이 틀려서 PC용만 고정된다고 생각하면 됩니다.

보시면 스크롤을 내려도 광고는 고정되어 있죠? ㅋ

다음에도 유익한 정보 포스팅 해보도록 하겠습니다.

정말 공부 할게 많네요ㅠ!!