본문 바로가기

티스토리스킨/팁.활용.확장

다운로드 받은 티스토리 스킨 내 블로그에 적용하기

반응형

 

 

새 스킨을 내 블로그에 적용하기 전 기존 사용하던 스킨이 있을 경우 반드시 백업을 하시기 바랍니다.

아니면 스킨 변경 > 스킨보관함에 현재 사용중인 스킨을 보관해둔 후 새 스킨을 적용하시기 바랍니다.

 

티스토리에서 기본 제공하는 스킨을 제외한 나머지 개인이 만들어서 배포하는 스킨들은 

사용자가 직접 설치, 또는 설정을 해야 사용할 수 있습니다.

 

티스토리 스킨 구조 자체가 아주 간단하기 때문에 아래 순서에 따라 적용을 하면 바로 스킨을 적용해 사용할 수 있습니다.

티스토리에서 기본 제공하는 스킨을 커스터마이징 했거나, 개인이 배포한 스킨을 다운받아 수정해서 다시 적용하는 경우에도 동일합니다.

 

 

 

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) 메모장에서 복사한 내용을 붙여넣기 합니다.

(또는 스킨 편집기의 기존 내용을 전체 삭제한 후)

 

붙여넣은 내용 중간에 한글이 정상적으로 표시되는지 확인한 후

스킨을 저장하면 됩니다.

 

 

반응형
  • 이전 댓글 더보기
  • 도전 해보겠습니다.

  • image 파일에 javascript 파일만 있어요 ...

  • 심플하고 이쁜거 같아서 적용해 보았습니다. 감사합니다.

  • 감사합니다.

  • 비밀댓글입니다

  • 초이지 2020.10.20 11:12 댓글주소 수정/삭제 댓글쓰기

    윈도우 메모장으로해서 전체선택 후 붙여넣기를 해도 계속 외계어가 나옵니다 ㅠㅠ
    https://imchoijh.tistory.com/ 이렇게요..

    • 다운로드 받은 스킨에 보면 index.xml 파일이 있습니다. 스킨 설정 옵션을 생성하는 파일이고 반드시 업로드 해야 합니다.
      이 파일이 누락된 것으로 보입니다.
      업로드 하고 모래시계가 돌면 업로드 완료된 것입니다.

      https://imchoijh.tistory.com/manage/design/skin/edit#/

      에서 스킨 옵션 설정을 한 후 사용하시면 됩니다.

  • porong 2020.11.09 21:56 댓글주소 수정/삭제 댓글쓰기

    지금 시도해보고 있습니다!! ㅎㅎ 예쁜 스킨 감사해요.
    그런데, 마지막에 저장 누르고 원래 로딩이 오래 걸리는 것인가요?
    아니면 오류가 난 건지.. 답변 달아주시면 감사하겠습니다!

  • 포로롱 2020.12.16 09:56 댓글주소 수정/삭제 댓글쓰기

    스킨편집에서 기존 있는 글들 싹 지우고 메모장에서 붙여넣는거 맞죠?
    html과 css 모두 기존 내용 싹 지우고 메모장으로 붙여넣고
    파일업로드에서 index랑 나머지 파일 업로드 하고 나면 스킨 적용이 안되네요...
    블로그 하단에 designed by apost.kr 요 문구만 나오고 백지상태에요
    캐시 삭제도 해봤는데 변함이 없습니다
    도와주세요~

    • 블로그 주소를 알려주세요.
      어떤 스킨을 적용했는지도 알려주시기 바랍니다.
      배포하는 스킨들은 이미 장기간 검증된 스킨들이기 때문에 제대로 적용하면 문제없이 사용 가능합니다.

    • 원페이지 반응형 스킨이고요
      seeuseeme.tistory.com
      블로그 주소 입니다

    • 해당스킨은 블로그용이 아니라 티스토리를 홈페이지처럼 쓸 수 있도록 만들어진 스킨입니다.

      1. 맵을 사용하려는 경우
      기본 설정이 카카오 맵을 사용하도록 설정되어있으며
      카카오맵 이용을 위해 개발자 사이트 가입 및 키값을 반드시 skin.html 에 적용해야만 정상적으로 스킨이 동작합니다.

      스킨 설명 하단에 카카오 개발자 사이트 등록 및 키값을 복사해서 적용하는 방법이 상세 설명되어있습니다.

      카카오 맵을 스킨 설정에서 끄면 맵 없는 스킨이 동작합니다.



      2. 맵 없이 사용하려는 경우

      블로그주소/manage/design/skin/edit#/
      들어가서
      홈설정 > 커버 버튼을 눌러 커버 페이지 사용을 켜고

      하단의
      추가설정 > 카카오맵 사용 옵션을 끄면 카카오맵 없이 스킨이 정상 동작합니다.

  • 감사합니다! 잘 쓰겠습니다

  • 잘적용됐습니다.
    감사합니다.

  • 감사합니다 ~ 잘사용하겠습니다!!

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 구조 개선이 안되고 있어서 해당 기능 사용법이 더 복잡합니다. 직관적이지도 않고...
      스킨 커스터마이징을 본인이 한 경우 백업하고 관리하는 용도 외에는 거의 사용되지 않는 기능입니다.
      스킨 변경 기능으로 등록해보시면 아실겁니다.
      초보자들은 스킨 변경 기능으로 스킨 등록하고 등록한 스킨이 어디 있는지도 못찾는 경우가 있습니다.
      사용자 등록 스킨은 스킨 보관함으로 들어가야만 보이는데 대부분 못찾습니다.
      그리고 가장 중요한 것은 스킨 등록하는데 어떤 파일을 등록해야 하는지 조차 모릅니다.
      그게 현실입니다.
      차라리 에디터에 복붙하는 방식이 더 직관적이고 이해하기 쉽고 단순합니다.

  • 감사합니다. 이쁘게 잘 사용하겠습니다!!

  • 우왓~! 어포스트님 반응형 그리드 블랙&화이트 티스토리 스킨 너무 멋집니다~ 제가 찾던 겁니다 ㅜㅜ 근데 081 - 반응형 1단 스카이라인 스킨처럼 세부 설정이 옵션에 없는 게 좀 아쉽기는 합니다 ㅜㅜ 제가 추가할 줄 할 면 추가를 해볼 텐데 꿈도 못 꾸네요 ㅎㅎㅎ 제가 시도해 볼 수는 없겠죠? ㅜㅜ 그래도 너무 좋아서 잠시 실신해 있다가 일어나서 감사 댓글 답니다 ㅎㅎㅎ 늘 건강하세요 ^^ b

  • 안녕하세요 우선 좋은 스킨주셔서 감사합니다. 근데 파일업로드에서 index.xml 파일 업로드가 되지 않아 아직 스킨을 못봤네요.. 어떻게 해야할까요 ㅜ

    • 스킨편집기 탭에 "파일업로드" 탭으로 들어가서 업로드 해야 합니다.
      상단 HTML, CSS, 파일업로드 이렇게 3개의 탭이 있습니다.
      파일업로드 탭 화면 하단에 "추가" 버튼을 누른 후 index.xml 파일을 선택하면 됩니다.

  • 정말 좋은 스킨을 공유해주셔서 감사합니다.

    설명따라서 그대로 적용했는데, 이상하게 레이아웃이 깨지네요.
    왜 그런지 도저히 모르겠습니다.

    블로그 주소가 아래와 같은데요..

    https://onemantour.tistory.com/

    어떻게 해야 할지 알려주시면 정말 감사하겠습니다.

    • 옵션 설정 들어가서 카카오맵 옵션을 꺼보시기 바랍니다.

      카카오맵은 api key를 직접 발급 받아서 skin.html 의 302행에 있는 카카오맵 api 호출 url에 적용을 해야 합니다.
      인증키가 제 블로그 주소용 인증키여서 카카오맵을 로딩하다 차단당하고, 해당 위치에서 자바스크립트 오류가 나면서 그 뒤에 실행되어야 하는 페이지 레이아웃 구성 코드들이 실행되지 않아 레이아웃이 깨져보이는 것입니다.

      카카오맵을 사용안하실 거면 스킨옵션설정에서 카카오맵 옵션을 끄고 skin.html의 302행에 있는 카카오맵 실행 링크를 삭제하셔도 됩니다.

      카카오 앱 api key를 발급 받는 방법과 스킨 설정하는 방법은 스킨 페이지에 자세히 설명되어 있습니다.

      스킨 설명을 다시 확인해보시기 바랍니다.

  • 말씀해주신대로 적용해서 맵 설정 했습니다.
    감사합니다.

    그런데 티스토리 링크로 모바일에서 접속하면 웹과 다르게 나옵니다.
    모바일에서도 웹과 같은 이미지가 나오게 하려면 설정을 어떻게 해야하나요?

    다시 한번 감사드립니다.

  • 스킨 편집에서 카테고리 이미지를 변경하면 미리보기에서는 적용됩니다.
    그런데, 화면 새로고침하면 저장된 이미지가 없어지고 기존 이미지가 나와요.

    그래서 편집기에서 기존 이미지를 지웠더니 삭제는 됩니다.

    새로운 이미지를 스킨 편집화면에서 변경가능한가요?

    • 카테고리 이미지라는게 뭘 말하는 건가요?
      상단 커버 슬라이드 배너를 말하는게 아닌가 싶은데...
      테스트 해봤는데 변경은 잘 됩니다.
      이미지 선택해서 업로드하고
      저장
      그리고 "적용" 버튼까지 눌러야 합니다.

  • 새로적용하기 전의 상태로 되돌리려면 어떻게 해야하나요?

    • 이전 사용 스킨으로 돌아가려면 이전에 사용하던 스킨을 백업해두었거나 보관해두었어야 합니다.

      보관해둔 스킨은 스킨보관함에서 재적용하면 보관해둔 스킨 상태로 돌아가고, 백업해둔 스킨은 새 스킨 적용하는 방법으로 적용하면 됩니다.

      다음글을 참고하시면 됩니다.

      https://blogpack.tistory.com/333
      https://blogpack.tistory.com/929


닫기