스킨 다운로드
파일을 다운로드하고 압축을 푼다. 가장 최신 업데이트가 적용된 파일은 github에서 다운로드할 수 있다.
스킨 등록
티스토리 블로그에서 관리자 페이지로 이동한다. 관리자 화면을 찾지 못한다면 블로그 주소 뒤에 /manage를 적어 이동할 수 있다. 왼쪽 목록에서 꾸미기 > 스킨 변경을 클릭한다.
스킨 등록으로 이동한다.
상단 추가를 누르고 다운로드한 파일을 모두 등록한다. images에 있는 파일까지 모두 추가한다.
모두 추가했다면 파일 목록에 총 10개가 있어야 한다. 캥거루 스킨을 사용하기 위해 필수로 추가해야 하는 파일은 다음과 같다.
- index.xml
- skin.html
- style.css
- code-dark.css
- code-light.css
- highlight.js
- line_number.js
모두 등록되었다면 저장을 눌러 파일을 등록해준다. 스킨 이름은 마음대로 설정하면 된다. 완료되면 꾸미기 > 스킨 변경에서 스킨 목록으로 이동한다. 그리고 방금 등록한 스킨을 적용해 준다.
이제 블로그로 이동하면 스킨이 적용된 것을 볼 수 있다.
스킨 기본 설정
꾸미기 > 스킨 편집에서 스킨을 커스텀할 수 있다.
@warning
캥거루 스킨을 사용한다면 목록 구성 요소는 목록+내용으로 둔다. 그 외 요소는 블로그 특성에 맞게 선택할 수 있다. 불필요한 기능은 성능을 저하시킬 수 있으므로 필요한 기능만 선택하도록 한다.
설정 내용은 아래와 같다.
- 본문 목차 생성: 본문 제목 아래에 목차를 자동 생성한다.
- 브랜드 컬러 선택: 블로그 전반에 사용되는 주요 색상을 정한다.
- 댓글창 숨김: 본문 하단 댓글 영역을 숨긴다.
- 캥거루 스킨 스타일 적용: 캥거루 스킨 특유의 편집 방식을 활성화한다. 자세한 내용은 캥거루 스킨 사용법 참고.
- 코드 블록 테마: 본문 코드 블록 테마를 정한다. (highlight.js)
- 수식 표기: 본문 내 $로 감싸진 표현을 수식으로 변환한다. (mathjax3)
- Github 링크: 우측 드랍다운 영역의 프로필에 Github 링크를 표시한다. 생략하고 싶다면 비워두면 된다.
- 애드센스 설정: 블로그 내 광고 관련 정보를 입력한다.
설정을 완료했다면 우측 상단 적용을 클릭해 설정을 저장한다.
다시 관리자 페이지로 돌아와 꾸미기 > 모바일에서 "티스토리 모바일웹 자동 연결을 [사용하지 않습니다]"로 설정한다.
다음은 플러그인으로 이동해 필요하지 않은 플러그인을 제거한다. 플러그인은 성능을 저하시킬 수 있기 때문에 반드시 필요한 항목만 사용한다. 추천하는 플러그인은 다음과 같다.
- 반응형 웹스킨 이미지 최적화
- 구글 서치콘솔 (선택)
- 메타 태그 등록 (선택)
마지막으로 관리 > 블로그 > 블로그 설정에서 프로필 이미지와 아이콘, 파비콘을 등록한다. 파비콘은 브라우저 탭에 표시되는 이미지로 .ico 형식을 사용한다.
이미지를 파비콘으로 변환하는 무료 사이트를 이용해 파비콘을 만들 수 있다.
여기까지가 기본 세팅이다. 그 외에도 카테고리, 사이드바, 메뉴 등 다양한 설정이 가능하다.
추가 설정
메뉴
꾸미기 > 메뉴는 상단 GNB 영역에 링크를 삽입한다.
사이드바
꾸미기 > 사이드바는 우측 사이드바에 코너를 추가하거나 제거할 수 있다.
