본문 바로가기

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

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



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

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


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

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



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/

을 열어 스킨이 적용되었는지 확인합니다.


  • 비밀댓글입니다

    • 스킨 백업은 언제나 본인의 몫입니다.
      티스토리에 현재 적용한 스킨을 저장하는 기능이 있습니다.
      블로그 관리자 : 스킨변경 - 상단 스킨보관을 클릭하면 현재 스킨을 보관함에 저장해둘 수 있습니다.
      커스터마이징한 스킨은 항상 이 기능으로 보관해 두어야 수정한 내용을 날려먹는 일이 없습니다.

  • 비밀댓글입니다

    • 보통 스킨은 html, css 를 붙여넣고 자바스크립트 파일 업로드까지 제대로 되면 잘 동작합니다.
      자바스크립트 파일이 누락된 경우이거나, 이전 스킨에 사용한 자바스크립트 파일 등이 남아서 그런 것일 수 있습니다.
      웹브라우저 캐시를 소거한 후 화면 갱신을 해보시기 바랍니다.
      제가 작업한 스킨인 경우 적용된 사이트를 알려주시면 확인을 해드리겠습니다.

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 12줄로 보이는건 정상입니다.

      티스토리가 썸네일 내용으로 뿌려주는 텍스트 길이가 있는데, css에서 이걸 강제로 4줄만 나오게 감춰주는 것입니다.

      다 뿌리면 내용이 너무 아래로 길어져서 레이아웃이 그렇게 보기좋지 않기 때문에...

      인터넷익스플로러는 이 css를 지원하지 못해서 내용 그대로는 다 뿌리는 것입니다.

      css 파일을 검색해보시면
      -webkit-line-clamp:4
      부분이 있습니다.

      4줄만 잘라내서 화면에 표시한다는 뜻이고 IE, 파이어폭스를 제외하고 모두 지원됩니다.

      5줄로 변경하려면 5로 변경하면 됩니다.

      일관된걸 원하시면 저 부분을 지우시면 모든 브라우저에서 티스토리가 썸네일 텍스트로 뿌리는 모든 내용이 나옵니다.
      국내는 파이어폭스 사용자가 거의 없다시피해서 IE에만 영향이 있다고 보시면 됩니다.

      티스토리가 뿌려주는 썸네일 텍스트 길이를 임의로 사용자가 선택할 수는 없습니다.
      IE는 최근 4-5년 동안 나온 css 규격들을 전혀 지원하지 못하기 때문에 이런걸 제외하고 호환성 중심으로 맞추면 스킨 모양이 다 거기서 거기가 되게 됩니다.

  • 비밀댓글입니다

  • http://roachsblog.tistory.com/
    이블로그처렴 들어가보세요
    제가 원도우10처렴 스킨 만들고싶는데
    html.css 할줄모르겟습니다
    어디부터 디자인하면 되나용??

    • css 기초를 모르시면

      기초 강의를 보시면 도움이 좀 될겁니다.
      https://apost.kr/90

      유사한 스킨을 찾으시는 거면
      https://apost.kr/393
      스킨같은 것을 쓰거나
      레퍼런스 스킨중

      https://www.tistory.com/skin/pg_Poster
      이스킨을 커버 없이 쓰면 됩니다.

      스킨 수정할 줄 모르면 일단 적당한것을 적용해서 써가면서 조금씩 수정을 해나가면 됩니다.
      블로그 껍데기보다는 컨텐츠의 질과 양에 따라 블로그의 가치가 달라집니다.

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

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