다운로드 받은 티스토리 스킨 내 블로그에 적용하기
새 스킨을 내 블로그에 적용하기 전 기존 사용하던 스킨이 있을 경우 반드시 백업을 하시기 바랍니다.
아니면 스킨 변경 > 스킨보관함에 현재 사용중인 스킨을 보관해둔 후 새 스킨을 적용하시기 바랍니다.
티스토리에서 기본 제공하는 스킨을 제외한 나머지 개인이 만들어서 배포하는 스킨들은
사용자가 직접 설치, 또는 설정을 해야 사용할 수 있습니다.
티스토리 스킨 구조 자체가 아주 간단하기 때문에 아래 순서에 따라 적용을 하면 바로 스킨을 적용해 사용할 수 있습니다.
티스토리에서 기본 제공하는 스킨을 커스터마이징 했거나, 개인이 배포한 스킨을 다운받아 수정해서 다시 적용하는 경우에도 동일합니다.
1. 스킨을 다운받아 압축을 풉니다.
보통은 ZIP 압축 파일로 배포를 하므로 다운로드 받아 압축을 풉니다.
대부분의 스킨은 다음과 같은 구조를 가집니다.(제가 배포하는 모든 스킨을 동일하게 아래와 같이 구성되어 있습니다.)
index.xml
skin.html
style.css
images폴더 - script.js
- *.jpg, *.gif. *.png
일부 파일은 없거나 더 있을 수도 있습니다.
index.xml 파일은 스킨에 대한 설정 정보 및 커버 설정 환경값을 담고 있는 파일이기 때문에 반드시 같이 업로드해야 합니다.
실제 사용하는 파일은 index.xml, skin.html, style.css, 그리고 images 폴더에 있는 *.js 자바스크립트 파일, 이미지 파일, 폰트파일 정도입니다.
티스토리 루트 폴더에는 몇몇가지 정해진 파일 이름이나 확장자 외에는 업로드가 불가능합니다.
개인 웹호스팅 공간처럼 사용자가 임의의 파일을 업로드 하거나 수정하는 식의 자유도는 없습니다.
정해진 규칙에 따라 스킨 파일들을 적용해야 한다는 뜻입니다.
보통 스킨 제작자들은 스킨 html 파일과 css 파일을 제외한 나머지 업로드가 필요한 모든 파일들을 images 폴더에 넣어서 배포를 합니다.
또 티스토리 스킨 적용시 몇몇 규칙이 정해진 파일명을 제외하고 나머지 모든 파일들은 images 폴더에 업로드가 됩니다.
따라서 개인이 만들어 배포하는 모든 스킨의 구성 파일중 자바스크립트 파일, 이미지 파일(jpg, gif, png만 가능), 그리고 폰트 파일 등은 모두 images 폴더에 들어있을거고, 또 모두 images 폴더로 업로드 됩니다.
임의의 폴더를 생성하거나 루트에 강제로 업로드를 하는 것은 불가능합니다.
2. 티스토리 스킨편집기 열기
이제 스킨을 적용해보겠습니다.
새로 만든 티스토리 본인 블로그 관리 화면으로 들어갑니다.
http://블로그아이디.tistory.com/manage
가 기본 관리자 화면 입니다.
왼쪽 메뉴의 꾸미기 > 스킨편집을 클릭합니다.
스킨폅집기가 뜹니다.
이 화면에서 스킨 미리 보기 및 스킨 목록에 표시할 미리보기 갯수(홈 화면 글수, 글 목록 수) 등의 환경설정을 우측 패널에서 할 수 있습니다.
오른쪽 "html편집" 버튼을 클릭합니다.
오른쪽 패널이 스킨을 적용할 수 있는 편집기 화면으로 전환됩니다.
상단탭을 보면 HTML | CSS | 파일업로드 이렇게 3개의 탭이 있습니다.
각각의 탭은 스킨 HTML 파일, 스킨 CSS파일, 그리고 스킨 구성에 필요한 이미지와 스크립트, 폰트 파일 등을 업로드 하는 파일업로드 기능을 하게 됩니다.
3. HTML 적용
다운받아 압축을 푼 스킨에서
html 파일을 텍스트 편집기에서 엽니다.(메모장이나 기타 아무거나 무관)
보통 skin.html 파일을 스킨 html 파일명으로 사용합니다.
제작자의 취향에 따라 이름을 다르게 하기도 하는데 압축 푼 스킨 루트에서 html 확장자 파일이 보통은 하나만 있기 때문에 이 파일이라고 보면 됩니다.
전체 선택 후 복사를 합니다.
티스토리 편집기 화면의 "HTML" 탭을 클릭합니다.( 탭이 주황색으로 변합니다.)
밑의 HTML 내용을 입력하는 창을 클릭해 입력 커서가 깜박거리게 한 후
붙여넣기를 합니다.(Ctrl+V)
4. CSS 적용
압축 푼 스킨에서 style.css 파일을 마찬가지로 텍스트 편집기에서 엽니다.
역시 마찬가지로 파일 이름은 다를 수 있는데, 보통은 확장자가 css 인 파일이 1개만 있습니다.
마찬가지로 전체 선택 후 복사하고
티스토리 폅집기 화면의 CSS 탭을 클릭해 CSS 입력기가 표시되게 합니다.
CSS 입력기 입력 영역을 클릭해 입력 커서가 깜박거리게 한 후
붙여넣기를 합니다.(Ctrl+V)
* 주의할 점이 있는데 css 파일은 반드시 이렇게 CSS 편집기에서 붙여넣어야 합니다.
파일업로드 기능으로 css 파일을 업로드한다고 해서 이 파일을 html 파일에서 링크를 걸어 불러올 수 없습니다.
5. HTML/CSS 저장
상단 탭 오른쪽의 "저장" 버튼을 클릭해 스킨편집기에 붙여넣은 HTML 과 CSS 내용을 저장합니다.
6. 기타 파일(들) 업로드
이제 압축푼 파일들 중 images 폴더 안에 있는 모든 파일들을 업로드 하면 됩니다.
"파일업로드" 탭을 선택한 후 밑 맽의 "+추가" 버튼을 클릭합니다.
파일 선택 대화상자가 나타나는데, 압축 푼 스킨 폴더 밑의 "images" 폴더로 이동 후
파일 전체를 선택합니다.(드래그로 선택하거나, Shift, Ctrl 키와 함께 멀티 파일 선택 가능)
압축 푼 파일들중 index.xml 파일도 반드시 함께 업로드 해야 하며,
파일 확장자나 파일 이름에 따라 자동으로 적당한 위치로 업로드 되므로 업로드 되는 최종 위치는 신경쓰지 않아도 됩니다.
파일 업로드가 완료되면 좌측 미리보기창에서 확인하거나
별도의 브라우저 창에서 http://블로그아이디.tistory.com/
을 열어 스킨이 적용되었는지 확인합니다.
7. 주의사항
skin.html 파일과 style.css 파일을 스킨편집기 에디터 화면을 이용해 복사 붙여넣기 방식으로 스킨 적용을 하지 않고
두 파일을 스킨편집기의 파일 업로드 기능으로 업로드 할 경우 skin.html 파일은 적용이 되지만, style.css 파일은 적용이 되지 않습니다.
이 두 파일은 티스토리 스킨에서 인식하는 일종의 사전 예약된 파일명이기 때문에 업로드 후 화면 갱신을 하면 파일이 표시되지 않습니다.(정상입니다.)
적용이 된다는 것은 복사 붙여넣기로 skin.html 파일을 적용한 것과 동일하게, skin.html 파일을 업로드 하면 업로드한 skin.html 파일 내용이 스킨편집기에 표시가 된다는 뜻입니다.
티스토리 시스템의 문제인지 원래 의도인지는 알 수가 없지만 style.css 파일은 스킨편집기 에디터에 복사 붙여넣기로 반드시 적용해야 합니다.
또한, 파일 업로드 방식으로 skin.html과 style.css 을 업로드한 경우 스킨이 적용된 것처럼 보이는 경우가 있는데, 이 경우 웹브라우저 캐시 소거를 한번 한 후 블로그 화면을 갱신해 실제로 스킨이 잘 적용되었는지 반드시 확인해야 합니다.
티스토리 패치로 기능이 개선되지 않는 한 skin.html 과 style.css 두 파일은 스킨편집기 에디터를 이용한 복사 붙여넣기를 통해 스킨을 적용하는 것을 추천합니다.
8. 스킨 적용 후 스킨에 이상한 특수문자(외계어)가 보이고 레이아웃이 깨져보일 경우
skin.html, style.css 파일을 잘못 붙여넣어서 skin.html, style.css 안의 한글이 깨지면서 스킨 적용이 올바르게 안되서 깨져보이는 것입니다.
utf-8 한글 한글 인코딩을 제대로 인식하지 못하는 편집기에서 스킨 구성 파일들(skin.html, style.css)을 열어서 복사 붙여넣기를 해서 발생하는 현상입니다.
윈도우 메모장에서 다운로드 받은 스킨의 skin.html, style.css를 각각 연 후
풀다운 메뉴 편집 > 전체선택(Ctrl+A)
편집 > 복사
합니다.
다른 운영체제의 경우 운영체제 기본 제공 텍스트 편집기를 사용하면 됩니다.
티스토리 스킨 편집기의 소스 보기 창에서 기존 스킨 내용을 전체 선택을 한 후(Ctrl + A) 메모장에서 복사한 내용을 붙여넣기 합니다.
(또는 스킨 편집기의 기존 내용을 전체 삭제한 후)
붙여넣은 내용 중간에 한글이 정상적으로 표시되는지 확인한 후
스킨을 저장하면 됩니다.