티스토리 스킨 적용 [배포용,반응형]

티스토리를 하다 보면 사용자의 편의에 맞게 스킨변경 및 HTML 수정이 가능하다는 큰 장점이 있는데요,  스킨같은 경우에도 기본 보다는 모바일에서도 글자가 자유롭게 변형되는 반응형 스킨을 많이 사용하게 되는데 이걸 티스토리에서 만들어 주진 않는것 같네요~ 그래도 무료로 배포해 주시는 그래서인지 많은 배포용 스킨들이 있습니다.

오늘은 이렇게 무료로 배포된 반응형 스킨을 내 블로그에 적용시키고 어떻게 활성화 시키는 지에 대해서 포스팅하겠습니다. 무료 스킨들을 받긴 했지만 어떻게 적용할지 궁금하거나 티스토리 스킨 적용에 대해서 아직 아리송한 분들이 참고하시면 좋을 듯 하네요.

우선 먼저 알아두셔야할 점은 이렇게 기존에 사용하던 배경이 아닌 다른 스킨을 사용하시게 되면 이전에 수정해 두었던 HTML 코드들이 초기화 되니 만약 애드센스 광고를 달아두시거나 사이드,중간에 광고를 개제해 두신 분들은 코드를 다시 입력해야한다는 불편한 점이 있습니다. 하지만 시간 대비 블로그의 분위기를 바꾼다는 것은 참 항상 재밌는 작업인 것 같네요~ 이제 배포용 스킨을 적용하는 법에 대해서 알아보도록 하겠습니다.

맨 처음 관리자 페이지->꾸미기(스킨)->스킨등록+ 를 눌러주시면 되는데요.

여기서 잠깐의 팁! 보통 스킨과 반응형 스킨 과의 차이점에 대해 좀 더 자세히 알아보도록 하겠습니다. 기본 스킨이라 함은 Tistory에서 무료로 배포되어 있는 것들이 있습니다. 1단형,2단형과 같이 온라임게임에서 캐릭터를 선택하는 것과 같이 마음에 드는 배경을 골라주시면 되겠는데 왜 굳이 반응형 스킨을 쓰는 이유는 바로 수익형 블로그 일때의 방문자가 글을 읽기 편하게 하기 위해서 글이 사용하자 보는 크기에 따라 저절로 늘어났다,줄어났다 하는 것이 가능하기 때문입니다. 또 요새는 스마트폰과 같이 모바일에서도 많이 블로그를 활용하기 때문에 특히나 모바일용 블로거들은 반응형이 아니면 읽는 분들이 많이 불편해 하기 때문에라도 반응형을 쓴다는점~ 더 장점이 있지만 가장 큰 이유는 이것이라고 생각하시면 됩니다!

이제 스킨 등록으로 들어 왔다면 밑에 보이시는 추가 버튼을 눌러서 내가 다운 받은 배포용 스킨을 추가해 주시면 됩니다. 추가할때에도 주의사항이 있으니 자세한건 밑에 사진에서 설명해 드리도록 하겠습니다.

일단 여러 블로그에서 받으신 티스토리 배포용 스킨 혹은 반응형 스킨을 다운 받으신 후 압축을 풀어주시면 images,index,preview,skin 등 이렇게 파일들이 있습니다. 여기서 이 파일 전체를 방금전 추가를 누르신후 이 다운받으신 폴더에 모든 것들을 열어주시면 되겠습니다. 

생각보다 쉽다고 생각하실 지도 모르지만 처음에는 조금 모르겠거나 어정쩡한 부분이 있으실 텐데요 시험을 볼때에도 문제지를 자세히 보면 답이 있듯이 이 위에 친절하게 index,skin,style 파일이 추가 되었는지 확인하라는 문구가 있습니다. 아까 폴더에서 미리 선택해 주셔도 되지만 저는 편하게 한번에 가지고 오는게 낳은지라 이렇게 폴더 전체에 내용을 끌어 왔으니 [preview]라는 항목을 삭제하면 나머지 남는 3개가 이제 스킨으로 적용되는 것을 보실 수 있습니다.

이제 다시 관리자->스킨->보관함 에 가시면 새롭게 방금 추가한 스킨이 밑에 나오실 겁니다. 바로 적용을 누르면 스킨이 적용이 되는데요, 간혹 프로그램이 만료되거나 코드가 잘못입력된 경우에는 자신의 블로그에 들어가더라도 화면이 뜨지 않는 오류가 있습니다. 이 점은 스킨을 적용해보시고 안되면 다른 프로그램으로 바꿔 주셔야하니 너무 당황하지 않으셔도 되겠습니다.

마지막으로 티스토리 반응형 스킨이 적용된 모습입니다. 스킨이 바로 적용되고 난 후라 아까 처음에 말씀 드렸던 바와 같이 애드센스 광고들은 다시 코드입력을 해줘야 하는 번거러움이 있습니다. 제 블로그에 애드센스 광고를 삽입하는 포스팅이 있으니 필요하신 분은 참고하시기 바랍니다.

http://studybug.tistory.com/40 <-티스토리에 애드센스 광고 넣기

http://studybug.tistory.com/92 <-티스토리 사이드바 광고 넣기

http://studybug.tistory.com/93 <- 글 중간에 애드센스 광고 삽입

http://studybug.tistory.com/94 <- 티스토리 사이드바 메뉴 펼쳐 놓는 법