본문 바로가기

DAILY/Blog

[팁] 티스토리 #2 스킨 사이드바 스크롤바 디자인 변경하기

check / 사용하던 스킨 백업 해 놓기.






티스토리 #2 스킨 사이드바 스크롤바 디자인 변경하기





티스토리 #2 스킨 사이드바의 기본 스크롤바.

카테고리가 많으면 이렇게 우측에 스크롤바가 생기는데

디자인을 살짝 바꿔서 사이드바와 통일성을 높여보았다.



코드 수정을 위해 "블로그 관리" - "HTML / CSS 편집"에 들어간다.





<script src="./images/script.js"></script>



HTML에 들어가 600줄 부근 <script src="./images/script.js"></script> 를 찾는다.

이 구문의 위와 아래에 코드를 추가해줘야 한다.





<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax
/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
<script src="./images/script.js"></script>
<script>
    jQuery(".area_sub").niceScroll({
        zindex: 1001,
        cursorcolor: "orange",
        cursoropacitymin: 0,
        cursoropacitymax: 1,
        cursorwidth: "3px",
        cursorborder: "2px solid transparent",
        cursorborderradius: "7px",
        scrollspeed: 100,
        hidecursordelay: 3000
    });
</script>



이렇게 <script src="./images/script.js"></script> 구문의 위, 아래로

코드를 추가해주면 끝이다.







오렌지 색상으로 변한 스크롤바.

훨씬 통일감있고 깔끔해졌다.






tip / 구문을 응용하면 색상과 두께 등 여러 설정 변경이 가능하다.



  • "KID" 2018.06.10 16:21 신고

    좋은 글이네요.
    궁금한 점이 하나 있는데요.
    #2스킨에서 왼쪽 제목 부분에 "ㅡ" 이 줄은 지우질 못하나요?
    HiworlL's note 윗 부분에 있는 저 줄이요.
    저도 이 스킨을 적용하고 싶은데 저 줄만 없었으면 딱 좋겠어서요.