후술할 내용 중, html / css의 편집은 티스토리 스킨 편집에서의 html / css 편집을 의미합니다.
js의 수정은 summer-nights.js의 수정을 의미합니다.
사용 중이신 텍스트 에디터를 이용하셔도 되고, 에디터가 없으신 경우엔 메모장으로도 가능합니다.
js의 추가는 summer-nights.js에 추가를 하셔도 되고, html의 </body> 앞에 <script>와 함께 이용하셔도 됩니다.
초기 설정
스킨을 등록하신 후에 블로그 관리 탭으로 가주세요.
본인 블로그에서 q를 누르시면 관리 탭으로 이동합니다.
플러그 인
블로그 아이콘 표시, 홈페이지 아이콘 표시, 카테고리 글 더 보기
이 셋은 꺼주시는 게 좋습니다.
html에서 #edit을 검색하셔서 본인의 소셜 미디어 등의 링크로 변경해주세요.
만약 우측 상단의 메뉴가 제대로 동작하지 않는다면 꾸미기 - 설정에서 '블로그 메뉴바를 표시합니다' 로 변경해주세요.
폰트 제거
첨부 파일에 포함된 InterGTM으로 시작하는 모든 파일을 지웁니다.
css 탭에서 @font-face로 시작하는 부분을 지우시고, InterGTM을 검색하셔서 fontfamily:InterGTM 이라는 부분을 제거합니다. 총 2개가 있습니다.
1.3 버전 이상에선 제주 고딕 폰트가 들어가 있습니다. InterGTM 대신 JejuGothic을 제거해주세요.
1단형/2단형 변경
html의 class가 col-1이면 1단형, col-2이면 2단형입니다.
어두운 모드 설정
html에 dark란 class를 추가하시면 어두운 테마가 사용 가능합니다.
요소들의 배경을 어둡게 해주고, 글자의 색을 흰색으로 변경해줍니다.
각종 색상
css탭에서 /* color */를 검색하신 후, 그 아래에 있는 요소들을 수정하시면 블로그 테마에 맞게 각종 색상을 변경할 수 있습니다.
여러 그래디언트를 손봐야 하는 만큼 수정이 그리 만만하지만은 않아서, 제가 종종 이런저런 테마들을 올릴 예정입니다.
--main-theme-color : 말 그대로 블로그의 메인 색상입니다.
--main-theme-opacity-color : 메인 색상에 투명도를 추가한 색상입니다. 이곳에서 간단하게 색상을 RGB 색상으로 변경할 수 있습니다.
--sub-theme-color: 인덱스 페이지나, a 태그 등에 사용된 색상입니다.
--comment-theme-color: 댓글, 방명록에 사용되는 색상입니다. 아래 사진의 푸른 빛을 띠는 색상이 이 색상입니다.
--comment-theme-color-2: 마찬가지로 댓글, 방명록에 사용되는 색상입니다. 아래 사진의 보랏빛을 띠는 색상이 이 색상입니다.
--selection-color: 텍스트 등을 드래그하면 드래그 영역을 표시해주는 색상입니다.
인덱스 페이지를 제외한 화면에 나오는 그래디언트입니다. body의 그래디언트는 위에서 아래로 내려가는 그래디언트, body:before은 우측 하단에 고정되어있는 그래디언트입니다.
글 영역, 카테고리 글 목록, 푸터 등의 배경색입니다.
헤더와 글 제목 아래에 들어가는 짧은 바의 그래디언트입니다.
헤더의 스크롤 인디케이터의 그래디언트입니다.
좌측 사이드바를 열었을 때 나오는 프로필 영역의 그래디언트입니다.
배너가 표시되는 영역에서 배너가 표시될 때 헤더 부분의 글자색입니다. 배너의 배경색과 겹치지 않도록 잘 보이는 색으로 변경해주세요.
어두운 모드에서 체크박스와 글을 써넣는 영역의 색을 조절하기 위한 css입니다.
배너
영상 대신 대표 이미지를 사용하고, 제목을 배너 위로 올리고 싶으시다면 html에 banner-alt란 class를 추가해주세요.
그 뒤, #banner의 src를 제거해주세요.
<div id="banner"></div>로 변경하셔도 됩니다.
인덱스 페이지
이 부분이 인덱스 페이지입니다.
PC 배경사진, PC 로고, 모바일 배경사진, 모바일 로고 총 4가지의 이미지로 구성됩니다.
로고 부분을 삭제하시려면
html 탭에서 logo_main을 검색하셔서 나오는 div를 삭제하시면 됩니다.
html 탭에서 지우셨다면 굳이 css탭에선 관련 내용을 지우시지 않아도 되지만, css탭에서 logo_main을 검색하셔서 나오는 결과들도 지워주시면 조금 더 깔끔하긴 합니다.
PC 배경사진과 모바일 배경사진을 동일하게 사용하시고 싶으시다면, -720을 검색하셔서 해당 항목을 둘러싼 @media 부분을 삭제하시면 됩니다.
하지만, PC와 모바일의 화면 비율 차이는 정말 어마어마하기에, 굳이 추천해 드리는 방식은 아닙니다.
About
인기 글
이 인기 글은 티스토리에서 기본으로 제공해주는 기능이 아니고, 모바일에서 가져오는 기능입니다.
저는 /m/2, 즉 블로그에 쓴 2번째 글의 모바일에 페이지에서 가져오도록 했습니다.
만약 2번째로 쓰신 글이 삭제됐다면 해당 기능이 정상적으로 작동하지 않을 수 있습니다.
js파일에서 /m/2를 검색하신 후에 본인의 가장 안 지워질 것 같은 글의 숫자로 바꿔주세요.
카테고리 목록에서 글을 선택하면 주소창에 블로그-주소/숫자?category=숫자
이렇게 나올 건데 /m/2에서 2를 ?category 이전의 숫자로 대체하시면 됩니다.
헤더 블로그 이름
블로그의 이름이 너무 길다면 css탭에서 .logo_blog를 검색하셔서 font-size를 30px에서 조금 더 작게 줄여주세요.
블로그 이름에 다른 폰트를 사용하시고 싶으시면 이 포스트를 참고해주세요.
아이콘 폰트
selection.jsonicomoon에서 위 파일을 불러온 후에, 항목들을 편집하고, 우측 하단 Generate Font를 클릭해 폰트를 다운로드합니다.
style.css의 내용을 모두 선택하여 css 압축을 해주신 뒤, fonts/ 라는 문구를 ./images/로 편집하여 스킨의 css에서 /* Custom Fonts */ 아래의 내용을 삭제하고 붙여 넣습니다.
fonts 파일 안에 있는 파일들을 업로드합니다.
404 페이지 수정하기
제가 기본적으로 설정해둔 404페이지의 모습입니다.
이미지를 수정하고 싶으신 경우, js에서 https://i.imgur.com/lgAB1Hp.jpg 를 검색하신 후에 원하시는 이미지 경로로 대체하시면 됩니다.
네이버 이웃 추가 버튼
1 2 3 4 5 6 7 | <span class="contact-dropdown"> <i class="icon-user-plus"></i> <div class="contact-dropdown-content"> <a onclick="javascript:window.open('toolbar/popup/link', 'tistory_add_link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=174,width=600,top=200,left=50');return false;" target="_blank"><i class="icon-tistory-logo"></i> 티스토리</a> <a onclick="javascript:window.open('https://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?blogId=본인의 네이버 ID', 'tistory_add_link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=280,width=450,top=200,left=50');return false;" target="_blank"><i class="icon-naver-logo"></i> 네이버</a> </div> </span> | cs |
'본인의 네이버 ID'를 수정하신 후에, icon-tistory-logo가 있는 span을 통째로 교체하시면 됩니다.
여기서 위젯을 사용할 주소를 설정해주신 후 설정하신 id를 저 위치에 집어넣으시면 됩니다.
아코디언 메뉴
스킨을 받으시면 기본적으로 아코디언 메뉴가 활성화되어 있습니다.
사이드바에서 하위 카테고리를 접었다 폈다 하는 게 싫으시다면, html에서 ac-nav이란 class를 제거해주세요.
검색 결과 표시
글 목록을 깔끔하게 표시하기 위하여 헤더에서 Category를 클릭하면 가는 경로인 /category 경로에선 위 사진과 같은 결과를 표시하지 않습니다.
html에서 .result의 class를 변경해주시고, css에서도 .result에 적용되었던 것들을 변경된 class로 일괄 변경해주세요.
자동으로 다음 페이지 불러오기
스킨을 적용하시면 기본적으로 다음 페이지의 글 목록을 자동으로 불러오도록 해뒀습니다.
html의 data-autoload의 값을 0으로 변경하시면 수동으로 불러오도록 변경하실 수 있습니다.
헤더 카테고리
스킨을 받으시면 기본적으로 헤더 카테고리가 활성화되어 있습니다.
원하지 않으시면 html에 부여된 header-cat이란 class를 제거해주세요.
