1. 상기 첨부된 Light_and_space_1.0.0.zip 파일을 다운로드한 후, 아무 곳에나 압축을 풀어 줍니다. (압축을 푼 결과물이 다른 파일들과 섞이지 않아야 업로드할 때 편하겠지요.)

2. 티스토리의 블로그 관리자 메뉴로 들어간 후, 꾸미기-스킨 항목에서 스킨등록을 클릭하세요.

3. 스킨 저장명은 편하신대로 아무 이름이나 입력하시고, 추가 버튼을 눌러서 스킨 파일들을 업로드하시면 됩니다.

Light_and_space.1.0.0.zip 파일을 압축을 풀어서 나왔던 skin.html, preview.gif, index.xml, style.css과 images 폴더 안에 있는 모든 파일을 추가해 주세요.

4. 파일을 모두 추가하셨다면 약 3.66MB의 용량이 업로드됩니다. 업로드가 끝났다면 저장 버튼을 누르세요.

5. 이제 새로운 스킨이 티스토리 스킨 보관함에 등록되었습니다! 스킨 보관함에서 방금 업로드한 스킨을 적용하시면 됩니다.

6. 이제 새 스킨이 적용되었습니다! 하지만 아직 초기 설정이 되지 않았기 때문에, 내 블로그에 어울리게 멋진 모습으로 바꾸어 주려면 사용하지 않는 사이드바 같은 것들을 비활성화해야겠죠. 이제 다음 항목에 있는 [스킨 초기 설정]을 계속해 읽어 주세요!

* 이 스킨은 반응형 스킨이므로 먼저 관리-꾸미기-모바일웹 스킨에서 모바일웹 스킨을 OFF로 설정하셔야 합니다.

1. 처음 스킨을 적용하고 나면, 모든 사이드바 요소들이 활성화되어 있습니다. 사용하지 않는 사이드바 요소는 비활성화해 주세요.

설치 직후에는 모든 사이드바 요소들이 활성화되어 있습니다.

2. 사이드바를 설정하실 때, 1-1. 블로그 정보(좌측) 처럼 숫자 형식의 목록과 (좌측)이라고 표시된 것은 모두 반드시 사이드바 1에 있어야만 하며, 순서를 씌어진 것처럼 지켜 주어야 합니다.

3. 필요없는 요소들을 - 버튼을 눌러서 비활성화해주세요. 마찬가지로, 숫자와 (좌측) 표시가 없는 항목은 반드시 사이드바 2에서만 사용하셔야 합니다.

4. 좌측 사이드바 1에 속하는 몇몇 사이드바 요소는 실제로 사이드바에 해당 항목이 출력되는 것이 아니라, 다른 사이드바 항목에 나타날 내용을 변경하기 위한 옵션의 기능을 수행합니다.

블로거 필명 보이기 - 이 옵션이 활성화되면 블로그 정보 란에 블로거의 필명이 표시됩니다. (비활성화한다면 필명이 따로 표시되지 않고, 블로그 제목과 인사말만이 나타납니다.)

데스크톱에서 카테고리에 항목 보이기 - 이 옵션이 활성화되면 메뉴에 카테고리-분류 전체보기 버튼이 있을 경우, 그 아래에 카테고리 항목들이 함께 표시됩니다. 단, 카테고리 안의 카테고리들은 여기에서는 표시되지 않습니다. 하위 카테고리들까지 표시한다면 좌측메뉴가 지나치게 길어질 수 있기 때문입니다.

5. 사이드바 설정과 더불어, 메뉴 설정 역시 빠트릴 수 없을 것입니다. 꾸미기-화면 설정-메뉴 탭에서, 아래의 예시처럼 블로그 메뉴를 편집하실 수 있습니다. (이 스킨의 디자인 의도는 메뉴명을 영어 대문자로만 쓰는 것을 권장합니다.)

6. 사이드바와 메뉴를 모두 원하시는대로 설정하시고 저장 버튼을 클릭하셨다면, 이제 초기 설정이 끝났습니다.

그리고 혹시 블로그 아이콘 표시 플러그인을 사용하지 않으신다면, 이걸 사용해 주세요! 댓글, 방명록 표시가 좀 더 깔끔해 집니다.

블로그 아이콘을 64x64px로 표시하게끔 플러그인을 설정해 주시고, 기본 정보에서 아이콘을 설정하시면 됩니다.

이제 스킨 적용 및 설정이 끝났습니다. 즐거운 티스토리 블로깅 되세요!

스킨위자드를 사용하시면 됩니다. 직접 편집하시려면, 관리자 모드-꾸미기-스킨-HTML/CSS 편집에서, style.css의 내용을 수정함으로써 배경사진을 없애거나 변경할 수 있습니다.  

사진을 변경하시려면, 먼저 원하시는 사진을 스킨을 업로드할 때와 마찬가지로 파일업로드-추가를 통해 업로드해 주세요.

그리고 style.css에서, 가장 위쪽에 있는 body 항목에서 background-image: url('images/back.jpg'); 를 찾으셨나요? 거기서 back.jpg 대신 방금 업로드하신 사진의 파일명을 적어 주시고 저장을 누르시면 됩니다.

배경사진을 없애고 싶으시다면, background-image: none; 로 위 내용을 바꿔 주시고 저장하시면 됩니다.

스킨위자드를 사용하시면 됩니다. 직접 편집하시려면, 관리자 모드-꾸미기-스킨-HTML/CSS 편집에서, style.css의 내용을 수정함으로써 배경사진을 없애고 대신 색상을 넣을 수 있습니다.

style.css에서, 가장 위쪽에 있는 body 항목을 찾으셨나요? background-image: url('images/파일명'); 을 background-image: none; 로 고쳐 주시고, background-color: #fff; 를 background-color: 원하시는 색상 코드로 고쳐 주시고 저장을 누르시면 됩니다.

예를 들어 background-color: #ba2d2d; 로 고쳐 주시면, 배경이 진한 붉은 색으로 변하겠죠.

애드센스도 당연히 설치하실 수 있습니다. 이 스킨 디자인에서라면, 글 제목 아래쪽과 댓글 위쪽이 적절하지 않을까요?

이런 위치에 애드센스를 설치하실 거라면, 미리 이 스킨에서 .article-adsense 클래스를 정의해 놓고 있어서, 바로 구글 애드센스 코드만 가져오시면 됩니다.

<div class="article-adsense">

<script async~~(이하생략. 구글 애드센스에서 바로 반응형 광고 코드를 만들어 주므로 별도로 손댈 것이 없습니다.)

</script>

</div>

를 skin.html에서 원하시는 위치에 넣으시면 됩니다. 저라면 <div class="article txt-justify">의 바로 앞과, </s_tag_label>의 바로 아래에 넣어 보겠습니다.

티스토리 에디터를 크롬 브라우저를 통해 이용할 경우 발생할 수 있는 버그 때문에 일어나는 문제로 알고 있습니다. HTML 모드로 에디터를 바꿔서 보시면, span style 9pt 어쩌고 하는 것들이 보입니다. <span (이하생략)>, </span> 부분을 직접 지워주시면 해결됩니다. 익스플로러에서는 이 문제가 없는 것으로 알고 있고요. 제기된 지 꽤나 오래된 버그인데, 아직 고쳐지지 않고 있는 것으로 보입니다. 참고로 이 스킨은 반응형 스킨으로 글자 크기 단위로 rem을 사용하며, 본문은 1.25rem을 사용하고 있습니다. rem을 사용하신다면 모바일 화면에 대응하여 글자 크기가 함께 줄어들게 됩니다.

인용구가 가운데에 나타나지 않고 브라우저 기본 여백만 가지고 나타나는 것은 의도된 것입니다. 가운데에 나타나는 것보다 적당한 여백을 갖고 통상의 글처럼 왼쪽에서 나타나는 것이 가독성이 더 높다고 생각해서 그렇게 처리했습니다. 가운데에 나타나게 하시려면 직접 text-align: center; CSS 수식을 추가해 주시면 됩니다.

위 스킨 설치-사이드바 설정 과정에서 설명한 것처럼, 사이드바 설정을 바꾸어 주시면 됩니다. 사이드바 항목 중, 

데스크톱에서 카테고리에 항목 보이기 - 이 옵션이 활성화되면 카테고리(좌측)에 카테고리 항목들이 표시됩니다. 비활성화된 경우라면 ARCHIVE(분류 전체보기를 대체)만 나타나고, 활성화된 경우라면 ARCHIVE 밑에 하위 카테고리들이 나타납니다. 단, 카테고리 안의 카테고리들은 여기에서는 표시되지 않습니다. 하위 카테고리들까지 표시한다면 좌측메뉴가 지나치게 길어질 수 있기 때문입니다.

따라서 카테고리가 너무 길게 나온다면 이 항목을 비활성화하시면 됩니다.

트랙백 기능을 사용하지 않으신다면, 굳이 글 하단에 댓글 몇 개, 트랙백 몇 개를 모두 표시해 줄 필요가 없겠죠.

skin.html에서 <div class="article-comments">을 찾으신 후, 그 아랫줄에서 </span>, 을 찾으세요. ,에서부터 그 줄 끝까지를 모두 지우시면 됩니다. (2 Comments, 0 Trackbacks에서 , 0 Trackbacks 부분을 삭제하는 것입니다.)

현재 몇몇 티스토리 스킨에서 사용하고 있는 목록에서 사진 미리보기 기능은 티스토리에서 자체적으로 사진 파일의 주소를 제공하고 있지 않아서, 자바스크립트를 이용하여 사용자의 웹 브라우저가 일일이 보이지 않게 각 게시물 본문을 불러온 다음, 거기서 사진 주소를 추출하여 불러오는 방식입니다. 예를 들어, 목록 한 페이지에 게시물 10개가 있다면 웹 브라우저가 게시물 10개 페이지를 다 접속해서 그걸 다 불러오고, 거기서 다시 사진 파일 주소를 또 다 따와서 불러오는 식입니다.

흔히들 접하시는 XE 기반 게시판 스킨의 경우에는 XE에서 자체적으로 사진 미리보기를 추출할 수 있어서, 바로 리사이즈된 썸네일 주소를 목록 스킨에서 보여줄 수 있습니다만, 티스토리의 경우에는 그런 기능이 없기 때문에 부득이하게 상술한 것처럼 자바스크립트를 이용해 사용자 웹 브라우저에게 그 몫을 넘기고 있습니다.

기능을 구현한다는 측면에서는 어쩔 수 없이 자바스크립트로 만들면 되는 것이긴 한데- jQuery 같은 것을 쓰지 않아도 순수 자바스크립트만으로도 당연히 가능합니다- 개인적으로는 이렇게까지 (티스토리 자체 기능도 아니고, 클라이언트 쪽에 부담을 많이 떠넘기는 것이 아닌지) 이 기능을 만들어야 할 필요가 있을런지는 모르겠기에 굳이 구현하지는 않았습니다. 티스토리에서 자체적으로 스킨 치환자로 게시물 썸네일을 목록 단계에서 지원해주면 좋겠습니다: 사실 이건 스킨 단계에서 할 일이 아니라 서버 단계에서 해 줘야 할 일이라고 생각해서 억지로 만들 생각은 없습니다.