Tistory '#2' 스킨 수정 및 기능추가

Tistory '#2' 스킨 수정 및 기능추가.

티스토리에서 멋진 디자인과 반응형까지 포함한 새로운 스킨을 개발하여 사용자들에게 무료로 배포하고있다.

사람마다 각자 선호하는 모습이 다를수있지만 내가 사용함으로써 수정하고 싶은 몇가지 부분만 수정하였고, 수정된 내용과 적용방법 등 본문에서 확인할 수 있다.

## 수정사항

1. 사이드바 오픈 시 가로 스크롤 삭제.

2. 사이드바 온/오프시 애니메이션 삭제.

3. 사이드바의 스크롤바 수정(jQuery Plugin 사용)

4. PC화면 우측상단의 티스토리 전용 메뉴 감춤

## 수정된 내용

• 수정시 삭제된 부분은 핑크색, 새로 추가된 부분은 보라색으로 표시하였음.

• skin.html 문서의 경우 기본적으로 포함되어 있는 내용은 파랑색, 새로 추가된 부분은 보라색으로 표시하였음.

__

style.css 문서

11번째 줄 - 가로 스크롤바 삭제

- 기본___

body {background:#fff;-webkit-text-size-adjust:none}

- 수정___

body {background:#fff;-webkit-text-size-adjust:none;overflow-x:hidden;}

20번째 줄 - PC화면 우측상단의 티스토리 전용 메뉴 감춤

- 기본___

코드 없음

- 수정___

#tistorytoolbarid {display:none;}

39번째 줄 - 사이드바의 온/오프시 페이지(본문) 애니메이션 삭제

- 기본___

.wrap_skin{position:relative;min-width:884px;min-height:100%;padding-left:23%;transition:padding-left ease-in-out 0.2s}

- 수정___

.wrap_skin{position:relative;min-width:884px;min-height:100%;padding-left:23%;}

61번째 줄 - 사이드바의 온/오프 애니메이션 삭제

- 기본___

.wrap_sub{display:block;position:fixed;left:0;top:0;z-index:10;width:23%;min-width:320px;height:100%;min-height:100%;background-repeat:no-repeat;background-position:50% 0;background-size:cover;transition:width ease-in-out 0.2s}

- 수정___

.wrap_sub{display:block;position:fixed;left:0;top:0;z-index:10;width:23%;min-width:320px;height:100%;min-height:100%;background-repeat:no-repeat;background-position:50% 0;background-size:cover;}

__

skin.html 문서 : 603번째 줄부터 아래 내용을 삽입.

## 수정 전

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

</body>

</html>

## 수정 후

<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>

</body>

</html>

대표적으로 가장 눈에 거슬렸던 스크롤바를 변경한 스크린샷

기본 사이드바 스크롤(위) / #수정된 사이드바 스크롤(아래)

## 수정방법

본문의 첨부파일은 티스토리 기본스킨인 #2 스킨의 수정본입니다.

1. http://brackets.io 사이트에 접속 후 코딩전문툴을 다운받아 설치한다.(Windows, Mac 호환 / 무료 소프트웨어)

2. 본문의 하단에 첨부된 Tistory_Skin_#2.7z 파일을 다운로드 후 압축을 해제한다.

3. 압축해제한 Tistory_Skin_#2.7z 파일안에 있는 style.css문서와 skin.html문서를 01.에서 설치한 Brackets을 이용하여 열도록 한다.(Brackets 실행 후 style.css와 skin.html문서를 Brackets에 드래그하여 넣으시면 됩니다.)

4. 자신의 티스토리에 로그인 후 관리 페이지에 들어간다. (http://설정한주소.tistory.com/admin/center)

5. 좌측메뉴 중 HTML/CSS 편집을 클릭하도록 한다.

6. 새로운 창(또는 새로운 탭)에 열리고 우측의 코드적는 박스의 상단이 HTML인 것을 확인 후 Brackets프로그램의 skin.html 문서에 있는 모든 내용을 복사 > 붙여넣기를 한 뒤 저장한다.

7. 박스의 상단에 CSS를 클릭하고 Brackets프로그램의 style.css 문서에 있는 모든 내용을 복사 > 붙여넣기를 한 뒤 저장한다.

** 만약 위에 삽입된 코드로 인해 스킨이 제대로 동작하지 않을 경우, 티스토리 관리 페이지의 스킨메뉴를 클릭한 뒤 우측창에 있는 #2 스킨을 적용하면 기본 코드로 복구된다. **

Tistory_Skin_#2.7z