* 배경 사진이 적용되지 있지 않습니다. 스킨 적용 후 스킨위자드 등을 이용해 배경 사진/배경색을 설정하실 수 있습니다.
1. 스킨 업로드 및 적용 과정은 일반적인 티스토리 스킨의 설치 과정과 같으므로, 스킨 설치 경험이 있는 분이라면 바로 2. 스킨 초기 설정부터 보시면 됩니다.
1. 상기 첨부된 Simple_Lines_1.0.0.zip 파일을 다운로드한 후, 아무 곳에나 압축을 풀어 줍니다. (압축을 푼 결과물이 다른 파일들과 섞이지 않아야 업로드할 때 편하겠지요.)
2. 티스토리의 블로그 관리자 메뉴로 들어간 후, 꾸미기-스킨 항목에서 스킨등록을 클릭하세요.
3. 스킨 저장명은 편하신대로 아무 이름이나 입력하시고, 추가 버튼을 눌러서 스킨 파일들을 업로드하시면 됩니다.
위 zip 파일을 압축을 풀어서 나왔던 skin.html, preview.gif, index.xml, style.css과 images 폴더 안에 있는 모든 파일을 추가해 주세요.
4. 파일을 모두 추가하셨다면 약 3.66MB의 용량이 업로드됩니다. 업로드가 끝났다면 저장 버튼을 누르세요.
5. 이제 새로운 스킨이 티스토리 스킨 보관함에 등록되었습니다! 스킨 보관함에서 방금 업로드한 스킨을 적용하시면 됩니다.
6. 이제 새 스킨이 적용되었습니다! 하지만 아직 초기 설정이 되지 않았기 때문에, 내 블로그에 어울리게 멋진 모습으로 바꾸어 주려면 사용하지 않는 사이드바 같은 것들을 비활성화해야겠죠. 이제 다음 항목에 있는 [스킨 초기 설정]을 계속해 읽어 주세요!
* 이 스킨은 반응형 스킨이므로 먼저 관리-꾸미기-모바일웹 스킨에서 모바일웹 스킨을 OFF로 설정하셔야 합니다.
1. 처음 스킨을 적용하고 나면, 모든 사이드바 요소들이 활성화되어 있습니다. 사용하지 않는 사이드바 요소는 비활성화해주세요.
2. 필요없는 요소들을 - 버튼을 눌러서 비활성화해주세요.
3. 사이드바 설정과 더불어, 메뉴 설정 역시 빠트릴 수 없을 것입니다. 꾸미기-화면 설정-메뉴 탭에서, 아래의 예시처럼 블로그 메뉴를 편집하실 수 있습니다.
4. 사이드바와 메뉴를 모두 원하시는대로 설정하시고 저장 버튼을 클릭하셨다면, 이제 초기 설정이 끝났습니다.
그리고 혹시 블로그 아이콘 표시 플러그인을 사용하지 않으신다면, 이걸 사용해 주세요! 댓글, 방명록 표시가 좀 더 깔끔해 집니다.
블로그 아이콘을 64x64px로 표시하게끔 플러그인을 설정해 주시고, 기본 정보에서 아이콘을 설정하시면 됩니다.
5. 혹시 화면 상단의 블로그 타이틀이 표시되는 부분을 위 예시 블로그처럼 그림 로고로 바꾸고 싶으신가요?
skin.html에서 <a id="this-blog" href="https://lawlite.tistory.com/">Lawlite's Blog</a></span> 부분을 찾으신 후, Lawlite's Blog를 고치시면 됩니다. 예를 들어, 스킨 파일업로드 기능을 통해 logo.png 라는 파일을 업로드하였다면, Lawlite's Blog를 <img src="./images/logo.png">로 고쳐 주세요! (반드시 앞에 점을 찍으셔야 합니다.)
이제 스킨 적용 및 설정이 끝났습니다. 즐거운 티스토리 블로깅 되세요!
카테고리 출력
메뉴 설정에서 카테고리-분류 전체보기 (모든 글 보기) 메뉴를 설정하여 두었다면, 자동으로 데스크톱 화면에서는 해당 메뉴를 마우스 롤오버-드롭다운 형태로 세부 카테고리를 펼쳐서 보여주고, 모바일 화면에서는 오른쪽 메뉴에서 카테고리를 펼친 채로 메뉴를 보여줍니다.
폰트
이 스킨은 한글 웹폰트로 Google Noto Sans CJK KR을 자체 탑재하고 있으며, KS X 1001 표준 서브셋만을 지원함으로써 기본, 굵게 두 가지 두께를 합쳐서도 400KB가 되지 않게끔 경량화되어 있습니다. (WOFF2 기준) 한글 웹폰트 추출에 관해서는 Coderifleman님의 글에서 도움을 받았습니다. 아이콘은 Font Awesome의 아이콘 몇 개를 fontello를 이용하여 따로 떼어낸 것을 자체 탑재해 사용하고 있습니다. Noto Sans와 Font Awesome은 모두 SIL 오픈 폰트 라이센스 1.1을 따릅니다.
블로그 아이콘 등
댓글, 방명록에서는 블로그 아이콘을 보여줍니다. (기본 아이콘이 아닌 사용자들의 아이콘을 나타내기 위해서는 먼저 플러그인 설정에서 블로그 아이콘을 활성화하셔야 합니다.)
이 스킨은 댓글/방명록 블로그 아이콘 플러그인 외에도 카테고리 다른 글 보기 플러그인을 지원합니다. 카테고리 다른 글 보기 플러그인을 사용하실 경우에는 회색 설정을 권장합니다. 그리고 페이스북, 트위터, 구글플러스로의 공유하기 버튼이 게시글 하단에 있습니다.
스킨을 공개하며
ghost를 비롯한 해외의 블로깅 툴을 보면, 가독성이 훌륭하면서도 오늘날의 웹 트렌드에 부응하는 미려한 반응형 디자인들이 많이 있습니다. 기본적인 형태의 1단 스킨으로 간결함과 더불어 전형적인 모습의 반응형 디자인을 만들어 보고자 했던 것인데, 이번 티스토리 반응형 스킨 공모전이 열린 기회에 배포하게 되었습니다. 간결하고 가벼우면서도 기능은 강력한 스킨을 만들고자 해서 jQuery나 Bootstrap 등은 사용하지 않았으며, 웹폰트나 아이콘 역시 모두 최적화를 따로 했고 무엇보다도 직관적인 가독성을 중시했습니다.
그러고보니 티스토리를 2007년 초부터 계속 사용해 왔으니 꽤 오랜 기간을 쓰고 있습니다. 그러다보니 5년 전에도 티스토리 스킨을 만든 적이 있는데, 이번의 새 스킨도 일전에 공개했던 스킨과 더불어 앞으로 티스토리를 사용하시는 분들에게 도움이 되었으면 합니다.
예상되는 질문과 답변
스킨위자드를 이용해 편리하게 바꾸실 수 있습니다. 스킨위자드를 사용하지 않으신다면,
관리자 모드-꾸미기-스킨-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 수식을 추가해 주시면 됩니다.
트랙백 기능을 사용하지 않으신다면, 굳이 글 하단에 댓글 몇 개, 트랙백 몇 개를 모두 표시해 줄 필요가 없겠죠.
skin.html에서 <div class="article-comments">을 찾으신 후, 그 아랫줄에서 </span>, 을 찾으세요. ,에서부터 그 줄 끝까지를 모두 지우시면 됩니다. (2 Comments, 0 Trackbacks에서 , 0 Trackbacks 부분을 삭제하는 것입니다.)
현재 몇몇 티스토리 스킨에서 사용하고 있는 목록에서 사진 미리보기 기능은 티스토리에서 자체적으로 사진 파일의 주소를 제공하고 있지 않아서, 자바스크립트를 이용하여 사용자의 웹 브라우저가 일일이 보이지 않게 각 게시물 본문을 불러온 다음, 거기서 사진 주소를 추출하여 불러오는 방식입니다. 예를 들어, 목록 한 페이지에 게시물 10개가 있다면 웹 브라우저가 게시물 10개 페이지를 다 접속해서 그걸 다 불러오고, 거기서 다시 사진 파일 주소를 또 다 따와서 불러오는 식입니다.
흔히들 접하시는 XE 기반 게시판 스킨의 경우에는 XE에서 자체적으로 사진 미리보기를 추출할 수 있어서, 바로 리사이즈된 썸네일 주소를 목록 스킨에서 보여줄 수 있습니다만, 티스토리의 경우에는 그런 기능이 없기 때문에 부득이하게 상술한 것처럼 자바스크립트를 이용해 사용자 웹 브라우저에게 그 몫을 넘기고 있습니다.
기능을 구현한다는 측면에서는 어쩔 수 없이 자바스크립트로 만들면 되는 것이긴 한데- jQuery 같은 것을 쓰지 않아도 순수 자바스크립트만으로도 당연히 가능합니다- 개인적으로는 이렇게까지 (티스토리 자체 기능도 아니고, 클라이언트 쪽에 부담을 많이 떠넘기는 것이 아닌지) 이 기능을 만들어야 할 필요가 있을런지는 모르겠기에 굳이 구현하지는 않았습니다. 티스토리에서 자체적으로 스킨 치환자로 게시물 썸네일을 목록 단계에서 지원해주면 좋겠습니다: 사실 이건 스킨 단계에서 할 일이 아니라 서버 단계에서 해 줘야 할 일이라고 생각해서 억지로 만들 생각은 없습니다.
변경내역
1.0.0, 2015-07-28.
- 첫 배포
1.0.1, 2015-08-08.
- Noto Sans WOFF2 리패키지, 모바일 우측 메뉴 padding 수정
라이센스
CC BY-NC-SA, 저작자표시-비영리-동일조건변경허락. 원작자 표기를 유지하고 2차적 저작물에도 동일한 라이센스를 적용하는 한에서 비상업적 목적의 변경, 재가공을 허락합니다.
감사합니다. 이 스킨에 관한 문의사항이나 오류 제보 등 남기실 말씀이 있으시다면 댓글을 남겨 주세요. 단, 기본적인 HTML/CSS 수정이나 스킨에서 제공하는 기능을 넘어서는 수정 등에 관한 질문에 대해서는 답변을 드리지 않을 수 있습니다.
Simple_Lines.1.0.1.zip
