개요
티스토리가 제공하는 기본 스킨이 아닌 손수 제작한 스킨을 사용해 보고자 시작하게 되었습니다. 웹 개발자 및 디자이너는 아닌 관계로 직접적으로 빈 문서에서부터 HTML과 CSS 를 작성하여 그럴듯한 모양새의 스킨을 만든다는 것은 감히 꿈도 못꾸는 관계로 다음과 같이 작업을 하였습니다.
- 스킨을 구성하는 CSS는 부트스트랩1을 이용합니다.
- HTML은 공개되어 있는 티스토리 스킨을 기반으로 합니다.
그래서 이를 바탕으로 몇 가지 간략한 수정만으로 현재 사용하고 있는 티스토리 스킨을 얻을 수 있었습니다.
수정 결과는 보고계시는 페이지의 현재(18/6/18) 모습과 같습니다.
참고 문서
작업기록
수정을 위해 갖추면 좋은 도구들은 다음과 같습니다. 실제로는 마지막 JavaScript 를 수정하여 업로드를 하지 않았다면 VS Code 와 같은 에디터는 사용하지 않았을 것입니다.
작업환경 및 도구
- Windows 10
- VS Code
- Chrome Browser
설치과정에 대한 설명은 생략합니다.
기본 Template 준비
구글에 tistory bootstrap skin 으로 검색한 결과 tistory-essence-skin 라는 이름의 스킨이 MIT 라이센스로 공개되어 있어 이를 바탕으로 수정하였습니다.
tistory-essence-skin ← 를 클릭하여 스킨배포 페이지로 이동합니다.
오른쪽의 녹색 버튼을 눌러 스킨의 소스코드를 다운로드 받습니다.
블로그 적용
다운로드 받은 tistory-essence-skin-master.zip 파일을 압축해제하여 준비합니다.
자신의 블로그의 관리 페이지에 접속합니다. 접속주소는 https://[아이디].tistory.com/manage 입니다.
왼쪽의 사이드메뉴에서 꾸미기 → 스킨변경 을 누릅니다.
사용중인 스킨 정보 및 스킨 목록이 표시됩니다. 찾아 이동합니다. 스킨 등록 단추를 누릅니다.
혹은 http://[아이디].tistory.com/manage/design/skin/add 를 웹브라우저에 입력하여 직접 이동합니다.
오른쪽 상단의 추가 버튼을 이용하여 미리 준비한 파일의 src 폴더의 내용을 업로드 합니다. 업로드할 대상 파일은 index.xml, skin.html, stle.css 와 images 폴더 내부에 있는 script.js와 theme.css 파일 입니다.
업로드 후, 저장 을 클릭합니다. 나타난 팝업창에 나중에 기억할 수 있는 스킨 이름을 입력하고 확인 버튼을 누릅니다.
등록한 스킨을 적용하려면 꾸미기 → 스킨변경 에서 _스킨보관함_을 선택합니다. 이전 단계에서 저장한 스킨의 이름을 확인하여 선택한 후, 적용 버튼을 누르면 최종적으로 스킨이 블로그에 적용됩니다.
자신의 블로그에 접속해보면 다음과 그림과 유사한 형태로 블로그가 표시됨을 확인 할 수 있습니다.
여기까지 기본 블로그 템플릿을 현재 블로그에 적용하는 방법이었습니다. 이후, 이를 바탕으로 수정을 시작하도록 하겠습니다.
front-end component library ↩︎
'티스토리 > 스킨제작' 카테고리의 다른 글
| 티스토리 스킨 제작기 - 기타 (0) | 2018.06.30 |
|---|---|
| 티스토리 스킨 제작기 - 본문 (0) | 2018.06.29 |
| 티스토리 스킨 제작기 - 사이드바 (0) | 2018.06.25 |
| 티스토리 스킨 제작기 - Footer 수정 (0) | 2018.06.24 |
| 티스토리 스킨 제작기 - Navbar 수정 (0) | 2018.06.22 |
