오늘은 티스토리 모든 스킨에 적용 가능한 스크롤 바(scroll bar)를 꾸미는 방법에 대해 알려드리겠습니다.
(참고로 현재 제 스킨은 고래스킨 4.0 입니다.)
이 설정은 매우 간단하게 적용하실 수 있고, 사용자 친화적인 블로그를 만드는데 큰 도움이 됩니다.
요즘 대부분의 사이트들이 스크롤 바 색 변경 등 취향에 맞게 설정하고 있으며,
UX, UI적으로도 좋으니 제 초간단 설명을 따라 설정하시길 추천드립니다.
스크롤 바 초간단 설정
맞춤 설정 가능!
우선 하단 텍스트 파일을 다운로드 받거나, 하단 코드를 복사합니다.
<!--스크롤바 시작-->
<style>
/* width */
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #4C4C4C;
border-radius: 0;
}
</style>
<!--스크롤바 끝-->코드의 숫자값을 변경하셔서 원하는 스타일의 스크롤바를 만드실 수 있습니다.
1) Width
width : 스크롤 바의 너비
2) Track - 스크롤 바가 지나다니는 길.
box-shadow : track의 그림자를 변경 가능
border-radius : track의 위, 아래 끝 부분을 동그랗게 설정.
(0부터 10까지 설정 가능하며, 값이 10에 가까울 수록 동그랗게 변경됩니다. 전 10을 설정했습니다.)
3) Handle - 스크롤 바의 컬러와 모양을 변경.
background : 원하는 컬러를 입력해 스크롤 바의 컬러를 변경.
border-radius : handle의 위, 아래 끝 부분을 동그랗게 설정.
(0부터 10까지 설정 가능하며, 값이 10에 가까울 수록 동그랗게 변경됩니다. 전 0을 설정했습니다.)
올려드린 코드를 복사하신 후,
블로그 관리 - 스킨 편집 - html 편집 - HTML 순으로 들어갑니다.
HTML 탭에서
<head>와 </head>사이에 코드를 붙여넣으시면 됩니다.
<head>
<script>인피드 광고 스크립트 (https://developer-p.tistory.com/104) </script>
스크롤 바 코드 삽입
</head>코드의 전체적인 흐름은 위와 같습니다.
위 코드 중 일부인 티스토리 인피드 광고를 넣는게 궁금하신 분은 하단 링크를 참고하시길 바랍니다.
(티스토리 인피드 광고는 스크롤 바 코드와 무관합니다. 코드 흐름에 나와 말씀드립니다.)
인피드광고 넣기 및 어울리게 수정하기(with 고래스킨4.0 인피드광고 오류 해결하기)
오늘은 고래스킨4.0에 인피드광고를 집어 넣는 방법에 대해 알려드리겠습니다. 저도 처음에 고래스킨으로 바꾸고 난 뒤, 제작자분의 게시글을 따라하면서 인피드 광고를 집어 넣으려 했으나 적
developer-p.tistory.com
포스팅을 마치며
한줄평지금까지 티스토리 티스토리 모든 스킨에 적용 가능한 스크롤 바(scroll bar)를 설정하는 방법에 대해 알려드렸습니다.
스크롤 바 셋팅법을 정말 쉽게 알려드린 것 같습니다.
설정하시는데 어려움이 있으시다면 부담없이 질문 하시고,
설정이 잘 되셨다면 댓글로 알려주시면 감사하겠습니다.
스크롤 바를 입맞에 맞게 꾸미셔서 개성있는 블로그를 꾸미시길 바라며 이 포스팅을 마치도록 하겠습니다.
티스토리 구분선 진하게 변경하기 (with. 고래스킨4.0)
티스토리에는 다양한 무료배포 스킨이 존재합니다. 저는 무료배포 스킨들 중, 유명한 고래스킨(4.0ver)으로 최근에 변경했습니다. 제 입맛에 맞게 여러가지 코드를 바꾸는 과정에서, 여러분에게
developer-p.tistory.com
애드센스 광고 삽입 - PC 상단은 2개, 모바일 상단은 1개 뜨는 방법 (코드 + 방법 공유)
애드센스 광고 설정법을 찾으러 오셨다면, 아마도 애드센스를 통과하신 지 얼마 되지 않으셨으리라 짐작됩니다. 저도 구글 애드센스를 통과한 지 얼마 되지 않았습니다. 애드센스를 통과하기
developer-p.tistory.com
최근댓글