티스토리 외부 스킨 바꾸기

이번 포스팅은 티스토리의 외부 스킨으로 바꾸는 법에 대해서 이야기 해 볼까 합니다..^^;;

솔직히 직접 만드는 것은 아직은 역부족이고..

타이틀이나 로고 같은 것만 바꿔서 자신이 마음에 드는 스킨에 적용하는 것 정도..^^;;

여튼.. 티스토리의 장점이라고 할 수 있는 것이 스킨이 참 자유롭다는 겁니다. 저는 십여전 전에 홈페이지에 관심을 갖고 이것 저것 건드려 본 적이 있는데요.. 마치 외계어 같은 html 언어 때문에 골치를 썩다가.. 결국 나모 웹 에디터라는걸 사용했었습니다.

군대에 가기 전까지.. 이것도 해보고 저것도 해보고.. 호기심이 많은지라 이것 저것 해보긴 해봤지만.. 제대로 해 본 것은 없었어요. 그래도 경험이라고 티스토리 스킨을 바꾸는 것에 대한 개념은 쉽게 잡을 수 있었습니다.

물론 저도 초보지만.. 저처럼 티스토리를 처음 사용하기에 어쩔 수 없이 기본 제공 스킨으로 사용하게 계셨던 분들을 위해..

이번에 티스토리 스킨을 간단하게 바꾸면서 함께 티스토리 스킨 바꾸는 방법을 포스팅 해야겠다 생각을 했습죠..^^;;

사설이 너무 길죠? ^^;; 원래 말이 좀 많아서;;

그럼 티스토리 스킨을 바꾸는 방법에 대해서 이야기를 좀 해보겠습니다.

1. 마음에 드는 티스토리 스킨을 찾는다.

우선 마음에 드는 티스토리 스킨을 찾는 것이 좋습니다. 티스토리 스킨은 검색을 해 보시면 공유해 놓으신 천사같은 블로거님들이 많이 계십니다. 여기 저기 둘러보다가 마음에 드는 티스토리 스킨을 찾아 보세요..^^;;

텍스트큐브 홈페이지를 방문하시면 역시 공유해 놓은 스킨이 많이 있는데요, 다만 여기서 공유되는 스킨은 텍스트큐브용과 티스토리용이 따로 있으니 확인하시고 받으셔야 합니다.

저는 두잇 공식 블로그에서 배포하는 스킨을 다운받아 활용했습니다. 배포 / 수정 자유라고 하셨기에 함께 올려보긴 합니다.

깔끔한 스킨이 좋으시다면 활용해 보시는 것도 좋은 방법일 듯 합니다..^^;;

이렇게 스킨을 다운 받으시고, 압축을 풀어 놓습니다.

2. 로고 및 skin.html 수정을 한다.

스킨을 적용할 때 저는 타이틀 로고와 기타 여러 가지 내용들을 조금 수정하거나 빼버렸습니다. 다운 받아 보시면 리서치 애드라는 광고가 포함이 되어 있었기에 이를 구글 애드센스로 교체하거나 빼버렸고, 우측 사이드에 트위터가 나와 있는 부분을 저는 트위터를 잘 안쓰기 때문에 빼버렸습니다.

또한 QR 코드 교체 및 SNS 아이디를 제것으로 바꾸는 등의 간단한 작업을 거친 후 그대로 활용했습니다..^^;;

기타 이런 것들이 없는 스킨이시라면 넘어가셔도 무방하구요..^^;;

<타이틀 교체 하는 법>

보통 타이틀은 logo.gif파일로 제작됩니다. 저장은 다운 받은 파일 폴더 안의 image 폴더에 저장이 되어 있구요. 이 부분을 자신이 원하는 이미지로 바꿔주는 거죠. logo.gif가 아니라면 타이틀의 이미지를 찾아서 이 파일을 교체해 주면 됩니다.

이 사진이 원본 로고입니다. 그리고 제 로고로 교체한 그림이 다음과 같습니다.

거의 비슷하죠? ^^;; 이거 표절이라고 하면 어쩔 수 없지만.. 제가 디자인 실력이 형편 없어서;; 그리고 이런 분위기를 원한 것이기에.. 어쩔 수 없이;;

여튼 이런 방식으로 파일을 바꾸고, 바꾼 파일들을 덮어 씌워 교체를 해 줍니다.

그리고 티스토리 관리자페이지 -> 스킨 -> HTML/CSS편집으로 갑니다.

이 화면이 처음 html/css편집 화면인데요.. 표시된 바와 같이 파일 업로드로 화면을 옮깁니다.

아!! 그 전에 백업을 해 두시면 좋아요..^^;;

백업은 스킨 선택에 가셔서 스킨 저장을 누르시면 됩니다..^^;;

업로드 화면으로 가셔서 업로드 버튼을 누릅니다.

파일 업로드 버튼을 누르면 파일들을 찾을 수 있습니다. 여기서 다운받아 압축을 풀어 놓고 필요한 이미지 파일을 교체한 곳으로 찾아 들어가 업로드 하는 겁니다.

업로드 버튼을 눌러 자신이 스킨을 저장한 곳으로 들어 갑니다.

그냥 바로 올리는 것이 아니라 image 폴더 안의 이미지부터 업로드 하는 것이 좋습니다. 왜냐하면, 다운 받은 파일을 해제한 폴더 속에 있는 skin.html 파일과 style.css 파일은 업로드가 되지 않기 때문입니다.

이렇게 이미지 폴더 안의 이미지들을 전체 선택 하고 열기를 누르면 바로 업로드가 시작이 됩니다.

업로드가 끝이 나면 다시 업로드 버튼을 누르고 상위 폴더로 넘어가 skin.html과 style.css 파일을 제외한 나머지 파일을 업로드합니다.

지금 이 스킨에서는 인덱스 외에는 없으므로 인덱스 파일을 업로드 합니다.

모든 파일이 업로드되고 나면 다시 html/css편집 창을 누릅니다.

이렇게 누르면 html과 css를 편집하는 화면이 나옵니다. 그후에 다운받은 스킨을 압축 해제한 폴더로 가서 skin.html 파일을 메모장으로 엽니다.

이렇게 메모장으로 파일을 연 후 전체 선택후 복사를 합니다.

다시 티스토리의 html/css 편집 창으로 넘어가 html 부분을 전체 선택하고 붙여 넣기를 합니다.

style.css 파일 역시 같은 방법으로 메모장으로 열어서 전체 복사를 한 후 웹페이지에 붙여 넣기로 덮어 쓰고 저장을 누릅니다.

이제 블로그로 가서 바뀐 스킨을 확인해 보시면 됩니다..^^;;

간단한 내용을 너무 복잡하게 설명한 것은 아닌지 모르겠습니다.

혹시라도 이해되지 않는 부분이 있으시다면 말씀해 주시면 다시 설명 드릴 수 있도록 하겠습니다..^^;;;