본문 바로가기

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

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



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

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


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

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



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 두 파일은 스킨편집기 에디터를 이용한 복사 붙여넣기를 통해 스킨을 적용하는 것을 추천합니다. 



  • 이전 댓글 더보기
  • html/css 어디부터 배워야돼요??

  • 방명록부터 꾸미고싶어서 ㅜㅜ

  • 비밀댓글입니다

    • skin.html 과 index.xml 파일을 혼동하신거 같습니다.

      스킨 편집기 화면 html에 붙여넣기 하는 것은 skin.html 내용입니다.
      보기네는 index.xml 파일의 내용을 붙여넣기 하신거 같습니다.
      index.xml 파일은 script.js 파일과 같이 파일 그대로 업로드를 해야 합니다.
      편집기 탭중에 "파일업로드" 탭에서 업로드를 하시면 됩니다.

  • 비밀댓글입니다

    • 1.
      스킨 원본기준 style.css
      372행
      또는 클래스를
      #sidebar .blogger-title a
      로 찾아서
      속성중에
      font-size: 1.1em;
      이 있습니다.
      이걸 조금 작게 조정하면 됩니다.
      0.7em 정도면 눈에 띄게 작아집니다.

      글자가 작아지면 위에 여백이 좀 더 남게 되는데

      #sidebar .blogger-title
      클래스를 찾아서(스킨원본 기준 style.css 3367행)
      padding: 0 0 10px;
      속성을 추가해주면 적당히 맞게 됩니다.

      2.
      티스토리에서 글보기에서 뿌리는 이미지 가로 크기는 최대가 1280px 입니다.
      현재 적용하신 스킨은 최대값으로 뿌려지고 있습니다.(스킨 css에는 이미지 너비에 대한 별도 제한이 없습니다.)

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 어떤 스킨을 적용하신 건가요?
      일단 스킨에 포함된 xml 파일을 업로드하지 않으신걸로 보입니다.

      스킨에 index.xml 파일이 있습니다.
      이걸 업로드하시면 스킨 레이아웃이 맞춰져서 기본 설정 정보들이 적용되어 보일겁니다.
      반드시 업로드해야하는 필수 파일입니다.
      업로드하지 않으면 레이아웃이 정상적으로 보이지 않고 깨져보이게 됩니다.

  • 비밀댓글입니다

  • 안녕하세요!
    지난번 알려 주신대로 수정해서 잘 사용하고 있습니다.
    한가지만 더 질문 드릴께요.
    SNS를 클릭하면 새로운 창에서 열리게 하고 싶은데
    방법이 있을런지요?

    • 링크하신 인스타 기준으로
      index.html 에서 instagram으로 검색하면

      <s_if_var_sns-instagram><a href="[샵샵_var_sns-instagram_샵샵]" class="instagram"><div>Instagram</div></a></s_if_var_sns-instagram>

      이행이 검색됩니다.

      class="instagram"
      부분 앞이나 뒤쪽에 공백으로 띄워서
      target="_blank"
      를 추가해주시면 새창에 뜹니다.

      아래처럼...

      <s_if_var_sns-instagram><a href="[샵샵_var_sns-instagram_샵샵]" class="instagram" target="_blank"><div>Instagram</div></a></s_if_var_sns-instagram>

  • 빠르고 친절하신 답글 감사드립니다.
    즐거운 주말 되세요!

  • 비밀댓글입니다

    • 스킨 변경할 때 기존 스킨 백업은 기본입니다.
      https://apost.kr/333

      보시고 스킨 백업 먼저 해놓으시고

      새스킨 적용해서 본인한테 잘맞는지 확인해보시고..
      잘 맞는거 같으면
      추가로 설정할 내용들- 검색 최적화, 애드센스 등등 백업한 기존 스킨 소스 보고 복사해서 붙여넣어 설정하는 식으로 하셔야 합니다.

      검색최적화나 기타 여러가지 추가 설정 작업은 스킨 바꿀때는 어쩔 수 없이 해야 합니다.

    • 2019.11.08 20:09 댓글주소 수정/삭제

      비밀댓글입니다

  • 스킨 편집 - HTML편집에서 메모장을 통해 불러온 '다운 받은 파일'의 정보를 붙여 넣을 때,

    기존에 입력되어 있는 HTML내용은 전부 삭제하고 붙여넣어야 하는 것이죠?

  • index.xml 업로드하면 엄청난 로딩이 시작되고 끝나지를 않는데 어떻게 하면 좋을까요?

    • 업로드는 2-3초 안에 끝납니다.
      티스토리 업데이트 후 버그로 인해 모래시계가 풀리지 않는 것일 뿐입니다.
      F5 눌러서 화면 갱신하면 돌아옵니다.
      물론 XML 파일도 정상 적용되어 있으므로, 스킨 설정들어가시면 옵션 항목들이 새롭게 갱신되어 보일겁니다.

  • 비밀댓글입니다

  • html하고 css 복붙하는 거 기존에있던 것을 없애고 하는 건가요? 아니면 그냥 기존에 있던 것 아래칸부터 하면 되나요?

    • 기존에 있던것을 대체하는 것입니다. 그리고 포함된 xml 파일과 images폴더안의 파일들도 업로드를 해줘야 합니다.

    • 이게 왜인지 정상적으로 적용이 안되고 이상한 명령어들만 나오는데 왜 이러는 걸까요ㅠㅠ

    • 스킨을 잘못 적용하신거 같습니다.
      포함된 파일들중 업로드해야 하는 파일들을 모두 업로드 하셨나요?
      압축풀면 나오는 index.xml
      그리고 images 폴더안에 있는 파일들 모두를 업로드 해야 합니다.

    • 늦은 밤에 계속 여쭤봐서 죄송해요ㅠㅠxml 파일이 안 올라가서요ㅠㅠ 로딩시간이 길어 보이는 부분은 다른 댓글 보고 확인해서 새로고침 했는데도 계속 아까랑 같더라구요ㅠㅠ

    • 사이트 상태로 봐서는 skin.html 의 내용을 다 붙여넣지 않은게 아닌가 싶습니다.
      skin.html 내용 자체가 일부만 뿌려지고 있습니다.
      skin.html 파일을 메모장에서 연 후 전체 선택을 해서 복사하고 스킨 편집기의 html 편집기 탭의 편집기에 있는 내용을 모두 삭제하고 새로 붙여넣어 보시기 바랍니다.

    • 늦은 시간 답변 주셔서 감사합니다ㅠㅠㅠ 다음 날 좋은 하루 보내세요ㅎㅎ

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 업로드한 것만으로 스킨잉 정상 반영되어 보이면 별도로 복붙은 안해도 됩니다만, 웹브라우저 캐시를 한번 소거해보시기 바랍니다.
      적용된 것처럼 보이는 것일 수 있습니다.
      업로드한 후 티스토리 스킨편집기 화면에서 skin.html과 style.css 가 반영되어 보이는지 확인은 꼭 하셔야 합니다.
      티스토리 시스템 문제로 skin.html과 style.css을 업로드해서 스킨을 적용하는 경우 반영이 안되는 현상이 있습니다.
      문제의 소지를 아얘 없애기 위해 복붙으로 스킨을 붙이는 것으로 안내를 하고 있는 것입니다.
      skin.html, style.css 파일은 복붙으로 붙이는 것을 권장합니다.

  • 순서대로..따라해보았는데..잘안되네요 ..ㅜㅜ흑흑 어려워용 ㅜㅜ

    • 커스텀 스킨 적용이 어려우면 일단 티스토리에서 배포하는 레퍼런스 스킨을 적용해보세요.
      레퍼런스 스킨 적용해서 이거저거 만져가면서 수정하다보면 대충 어떤 식으로 수정해야하는지 알게됩니다.

  • 받아서 적용했는데.. 이 상태가 되어있는데 한번 봐주세요 ㅠㅠ

    • style.css 파일을 잘못 붙이셔서 style.css 안의 한글이 깨지면서 style.css 의 CSS가 거의 적용이 안되서 깨져보이는 것입니다.

      윈도우 메모장에서 다운로드 받은 스킨 파일중 style.css를 연 후
      전체선택 -> 복사
      티스토리 스킨 편집기의 css 탭 소스 보기 창에서 전체 선택을 한 후(Ctrl + A) 붙여넣기를 해보세요.

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

      하면 정상적으로 블로그가 보일겁니다.

    • 감사합니다. ㅠㅠ 해볼께요

  • 안녕하세요~ 구독했습니다 ㅎㅎ
    스킨이 예뻐서 사용하려고 하는데 업로드는 어떻게 하는 건가요? 또 그냥 사용하고 있던 제 블로그에 적용하면 되는 건가요? 따른 백업이나 이런 작업은 필요없는 거죠??

    • 이전에 사용하던 스킨 백업은 필수입니다.
      적용한 디자인이 마음에 안들거나 하면 원복할 수 있어야 합니다.

      https://apost.kr/333

      이거 보시면 되구요..

      파일 업로드는
      블로그 관리자 메뉴에서 "스킨편집"기 들어가면 오른쪽에 파일업로드 탭이 있습니다.
      위에 6번 내용 보시고 업로드하면 됩니다.

    • 스킨 적용을 했는데 제 프로필 사진 밑에 이상한 글자는 뭔가요? ㅠㅠ

    • skin.html 파일을 잘못 붙여넣으셨습니다.
      인코딩이 깨지면서 skin.html 안에 있는 한글이 모두 깨져서 레이아웃에서도 보이는 것입니다.

      스킨 편집기 html 탭에서도 한글이 깨진게 보일겁니다.

      skin.html 파일을 메모장에서 연 후 전체 선택을 해서 복사한 후
      스킨편집기 html탭의 내용을 모두 지우고 복사한 내용을 붙여넣은 후 저장해보세요.
      스킨편집기 상에 한글이 깨지지 않고 표시가 되면 정상적으로 붙여넣기가 된 것입니다.

    • 파일을 열면 스킨편집기 창에서 복붙하기 전에 이미 파일 내에서 깨진 한글이 보이네요 ㅠㅠ
      번거로우시겠지만 어떻게 하면 될까요? ㅜㅜ

    • 스킨에는 이상이 없어 보입니다.
      업로드된 압축파일을 다운받아 적용해봤는데 별 이상 없습니다.

      메모장에서 열었을 때 메모장 우측 하단 상태바에 UTF-8로 표시되어야 합니다.

      기존 다운로드 받은 파일들을 지우시고 새로 다운로드를 받아 압축을 푼 후 메모장에서 새 skin.html 파일을 열어보시기 바랍니다.

      한글이 정상적으로 보여야 합니다.

    • 완성했습니다~! 감사합니다 ㅎㅎ
      그런데 왼쪽 사이드바 크기를 조금 더 오른쪽으로 확장하고 싶은데 방법이 있을까요?

    • 2군데 수정해야 합니다.
      스킨 기본 설정은 사이드바 290px
      그리고 본문 영역과 30px 여백을 주었습니다.

      스킨 원본 기준 style.css 에서

      778행
      또는 ".sidebar{"
      검색해서 속성으로
      width: 290px;
      를 넓힐 픽셀 수만큼 증가

      763행
      또는 .container{
      검색해서 속성으로
      padding: 40px 30px 0 320px;

      오른쪽 끝 320px(290+30여백)를 위에 사이드바 넓힌 것만큼 추가
      여백(padding)값 은 순서대로 상우하좌 값입니다.

      해주면 됩니다.

      사이드바를 오른쪽에 두는걸로 옵션 설정을 했으면
      .sidebar-right .container
      의 320px 값을 맞춰서 수정하면 됩니다.

      사이드바 내부 컨텐츠는 외부 너비에 맞춰 늘어나기 때문에 별도로 손댈 필요는 없습니다.

  • 안녕하세요 좋은 정보 감사합니다.
    HTML과CSS파일은 복붙하고 파일 첨부에 이미지 폴더 파일들을 업로드 하고
    마지막에 xml파일을 업로드 하면 편집 창에 빙글빙글 아이콘이 무한으로 나타납니다
    좀 더 기다리면 적용이 될까 하고 기다려 봤는데 적용이 되질 않습니다.
    xml파일을 파일 업로드 하는 부분에 업로드 하는게 맞나요?

    • 모래시계가 계속 도는건 티스토리 시스템 버그입니다.
      몇달째 방치중...
      보통 xml 업로드하면 1-2초 안에 바로 적용됩니다. 모래시계만 돌 뿐입니다.
      모래시계 도는거는 무시하시고, 업로드 후에 스킨 편집기 화면 들어가보시면 스킨 옵셜 설정값들이 새롭게 바뀌어 보일겁니다.


닫기