2011. 8. 9. 00:56ㆍIT/Tistory Tips
지금 사용하고 있는 블로그 스킨입니다. 알록달록 동글동글 콘셉트라서 Rainbow Bubbles이라고 이름지었는데, IE8에선 동글동글 효과를 지원하지 않아서 좀 딱딱하네요. Chrome, ChromePlus 등에서 원래 제가 의도한 것과 가장 비슷하게 보입니다. 위 그림이 ChromePlus에서 보이는 화면입니다. Firefox 4, Opera 11, Safari 5(?)에서도 웬만큼 괜찮습니다. IE8에선 동글동글이 안되지만, 나머지 기능적인 부분은 괜찮습니다. IE6 사용자는 전혀 고려하지 않아서 아마 제대로 표시도 안 될 겁니다.^^;;
1. 스킨 대강 설명 ▷ 스킨 내려받기 / 적용 방법 확인으로 바로 이동!!
위에 보이는 것처럼 h3 요소엔 테두리가 있고 p 요소는 맨 앞 들여쓰기, 문단 끝난 후 한 줄 띄우기가 자동으로 됩니다. 인용구 쓸 땐 blockquote 안에 p 요소를 쓰고 p 요소 안에 인용할 내용을 적으면 인용구 앞 뒤에 큰 따옴표가 자동으로 추가됩니다.
스킨을 적용하기 전에 사용자가 수정해야 할 부분이 몇 가지 있습니다. 일단 내려받은 압축 파일에서 skin.html 파일을 메모장이나 Notepad2 등으로 엽니다. 맨 위를 보면 다음과 같은 부분이 있습니다.
<meta name="author" content="저자(글쓴이)" />
<meta name="keywords" content="키워드" />
<meta name="description" content="블로그 설명" />
메타 정보를 입력하는 부분입니다. content에 자신의 블로그에 맞게 정보를 입력하세요.
다음은 좀 복잡한 카테고리 부분입니다. 무지개 메뉴에서 카테고리를 사용하려면 꼭 입력하셔야 할 부분입니다. 티스토리 카테고리는 2단까지 사용할 수 있습니다. 예를 들어 1단 메뉴가 '일상'이고 2단 메뉴가 '습작', '문화생활', '주절주절'이면 먼저 '일상'을 입력하고 하위 분류로 '습작', '문화생활', '주절주절'을 입력해야 합니다. 직접 파일에 입력된 내용을 보면 감이 올 겁니다. skin.html 파일 안에 주석으로 표시된 카테고리 부분을 찾아 원래 입력된 내용을 지우고 블로그에 맞게 분류 이름을 수정합니다. 해당 주소는 1차 분류는 href="/category/1차분류", 2차 분류는 href="/category/1차분류/2차분류"와 같이 수정합니다. 만약 카테고리 이름에 빈 칸이 있으면 주소를 입력할 때 빈 칸 대신 %20을 입력합니다. 예를 들어 href="/category/1차%20분류"와 같은 식으로 입력하면 됩니다.
<a href="http://www.printwhatyoulike.com/print?url=http://티스토리주소.tistory.com/642" title="웹페이지를 인쇄하거나 PDF/HTML로 저장합니다." target="_blank">Print/Save</a>
이제 skin.html 파일에서 [티스토리주소]를 검색합니다. 위와 같은 부분이 나오면 티스토리주소.tistory.com 대신 자신의 티스토리 주소를 입력합니다. 그러면 방문객이 블로그 글을 보다가 [Print/Save]를 눌렀을 때 바로 PrintWhatYouLike 홈페이지로 연결되어 보고 있는 글을 인쇄하거나 파일로 저장할 수 있습니다.
화면 오른쪽에 보이는 빨강색 Sidebar 단추에 마우스를 올리면 사이드바가 나타납니다. 보통 사이드바처럼 구성하면 됩니다. 맨 위에 블로그 소개 부분에 자신의 블로그 소개 문구를 입력하세요. 기본값은 '블로그 소개글, 좌우명이나 뭐 기타 등등 입력하세요.' 입니다.
태그, 엮인글, 댓글 등입니다. 글을 읽다가 어느 선 이상 아래로 내려가면 화면 오른쪽 아래에 주황색 화살표가 생깁니다. 이 녀석을 클릭하면 화면 맨 위로 올라갑니다.
댓글, 방명록 입력 칸입니다. 개고양이 그림을 다른 걸로 바꾸려면 catdog.png라는 이름으로 스킨에 업로드하면 됩니다.
참고로 strong 요소는 빨강으로 표시됩니다. 검정으로 바꾸려면 style.css에서 .article strong{color:crimson} 부분을 찾아서 삭제하세요.
아, HTML에서 주석은 <!-- 주석 내용 --> 입니다. 사이드바 부분에 카테고리, 달력은 주석 처리되어 표시되지 않습니다. 사이드바에서 사용하지 않을 항목은 <div 라고 시작하는 부분을 <!--div 로 바꾸고 해당 항목 맨 마지막 </div> 부분을 </div-->로 바꾸면 표시되지 않습니다. 반대로 주석 처리된 항목을 표시하려면 <!-- 와 -->를 삭제합니다. 사이드바 만들 때 치환자를 안써서 티스토리 센터에서 사이드바 추가 및 제거할 수 없습니다;;;;
HTML이랑 CSS를 정리하고 주석 붙이고 한다고 했는데 많이 지저분합니다. 특히 CSS는 제가 작성할 때 띄어쓰기나 줄 구분을 안해서 직접 수정하려면 좀 헷갈릴 수 있습니다. 그래도 부분별 주석 및 줄 구분 되어 있으니 괜찮을 겁니다. 필요한 부분을 삭제하지 않게 주의하세요!
HTML5 웹표준을 준수합니다.<참고 1> CSS는 동글동글 효과 때문에 border-radius, box-shadow, transform, transition 등을 남발해서 아마 표준 맞추려면 스타일시트를 거의 처음부터 새로 작성해야 할 겁니다.
Rainbow Bubble 테마는 CCL(저작자 표시-비영리-동일조건변경허락)을 따릅니다. 저작자를 밝히고 팔지만 않으면 자유롭게 수정하고 사용할 수 있습니다.
설명은 대강 된 것 같은데, 혹시 궁금한 점 있으면 댓글로 질문 남겨주세요.
2. 스킨 내려받고 적용하기
일단 혹시 모를 사태에 대비해서 티스토리 센터의 [스킨]으로 이동합니다. 지금 사용하고 있는 스킨 이름과 설명이 나오는데 그 아래의 [스킨 다운로드] 단추를 눌러 지금 사용하는 스킨을 내려받습니다. 또 [스킨 저장]을 눌러 스킨을 저장합니다. 스킨을 저장해두면 나중에 손쉽게 지금 스킨으로 복구할 수 있습니다.
Rainbow_Bubbles.zip일단 위 파일을 내려받아 압축을 풉니다. 그럼 images란 폴더가 있고 index.xml, preview.gif, skin.html, style.css란 파일이 있습니다. 일단 티스토리 로그인합니다.
티스토리 로그인 후 센터에서 [스킨] - [HTML/CSS 편집]으로 이동합니다. skin.html과 style.css란 칸이 있을 겁니다. 여기에 앞의 내용대로 수정한 skin.html 파일 내용과 style.css 파일 내용을 붙여넣습니다.
이제 images 폴더에 있는 모든 파일(이미지 6개, 자바스크립트 4개)과 index.xml, preview.gif 파일을 [파일 올리기]로 올립니다.
다시 [스킨]으로 이동한 다음 [스킨 저장]을 누릅니다. 그리고 [저장한 스킨] 탭으로 이동해서 방금 저장한 스킨 옆에 있는 [적용]을 누릅니다. 이제 새 스킨이 적용됩니다.
질문이나 오류 신고는 댓글로 남겨주세요.
* IE6, 7, 9 카테고리 메뉴 z-index 수정한 스타일시트
IE6, 7, 9는 겹친 항목의 상하(우선순위?)를 조정하는 z-index 속성을 적용할 때 오류가 있습니다. (position:relative 항목에 position:absolute 항목이 가림.) 상위 relative 항목 z-index 값을 조정해서 제대로 표시하는 꼼수가 있는데, 이 경우는 포함관계가 아니라 적용이 안되네요;;) 제목 오른쪽 귀퉁이에 종이 접힌 듯한 부분만 빠지고 나머지는 똑같습니다. 필요하시면 아래에 첨부된 CSS로 바꿔서 적용하세요. 카테고리 메뉴에 필요없는 스타일도 약간 정리했습니다.
style.css