티스토리(Tistory) : 반응형 #2 스킨 커스터마이즈 버전 배포

본 스킨은 티스토리 반응형 #2을 바탕으로 기능을 추가 및 개선한 테마로, 티스토리의 반응형 #2 과는 다른 별도의 라이센스 정책을 사용합니다. 따라서 본 스킨은 개인블로그 운용 목적외에 상업적목적이나 기업등에서는 사용할 수 없습니다(2016.06.18을 포함한 이후 버전 대상).

※ 본 스킨에 대해 공식적으로 낮은 버전의 IE 는 지원하지 않습니다. 지원 계획도 없습니다.

※ 낮은 버전의 IE를 쓰는 것은 악성코드 감염 및 해킹의 대상이 되기 쉬우므로 사용하지 않는것이 좋습니다.

※ 원칙적으로 링크를 퍼가시거나 공개하는 것은 허용하나 자료의 재배포는 허용하지 않습니다.

미리보기 : 바로가기

설치방법 : 설치방법 보기

최근 버전 다운로드 : Latest

KLabStyle Shake v0.22b 20160731.zip

설문조사 참여 : 바로가기

문의페이지 : 바로가기

예전 버전 다운로드 : 

KLabStyle Shake v0.2b 20160703.zip

KLabStyle Shake v0.1b 20160618.zip

＃2 스킨 커스터마이즈 20160611.zip

히스토리 : 

※ 피드백은 댓글 또는 support@kinesis.kr 로 메일 남겨주시면 감사드리겠습니다.

# 20160731(0.22 beta)일자 요약

1. 하단의 미리보기 기능과 연계한 옵션 설정방법 도움 버튼 추가

# 20160731(0.21 beta)일자 요약

1. 본문 이미지 효과가 정상적으로 표기되지 않던 문제 수정
2. 본문 이미지 가로 폭에 맞도록 조정(리사이즈) 기능 옵션으로 추가 (body class 내 imgResize 추가)
3. 애니메이션 효과 추가 (줌인 + 기울이기 및 줌아웃 + 기울이기)

# 20160703(beta)일자 요약

1. 게시물 목록에서 갤러리타입 기능 추가 - 일반목록, 갤러리형목록 지원
2. 어두운색의 배경 지원 추가 - 밝은배경, 어두운배경 지원
3. 컬러셋 지원 추가 - 그레이, 기본(파란색), 레드, 오렌지, 그린, 딥블루 5가지 색상 지원 
4. 이미지 둥글게, 그림자, 외각선 기능 활성화/비활성화로 개선
5. 애니메이션 옵션 추가 - 회전, 줌인, 줌아웃, 끌어오기 등 7개 옵션
6. 각 옵션에 대해 사용자별 커스터마이즈 기능 추가 (관리자에 의해 제공/미제공 설정 가능)
   ※ 이 옵션을 사용할 경우 방문자는 재방문시 방문자가 설정한 화면이 제공됩니다. 
   ※ 방문자가 관리자가 정한 화면으로만 보여지게 하는 경우나, 업데이트 필요시 비활성화가 필요합니다.
7. 커스터마이즈용 상단 헤더 추가
   ※ 블로그 관리자가 직접 HTML 을 일부 수정해주셔야 합니다.
8. 기타 자잘한 버그나 문제점 등 수정
   - 관리자 버튼 또는 본문보기, 코멘트작성 등 메뉴 상황에 따라 보이도록 변경 등

※ 추가된 기능의 사용 방법은 미리보기 블로그의 게시물을 참고해주세요.

# 20160618(beta)일자 요약

1. 스킨명 변경 예정 (임시 : KLabStyle)
2. 라이센스 방식 1차 변경(개인블로그 이용가능, 블로그 광고개제 수익 허용 외 금지항목 등 기타)
3. Bootstrap 3.3.2 ver 적용
4. 헤더메뉴 측 툴팁(Tooltip) 적용
5. 헤더배경 애니메이션 속도 변경
6. 인용구쪽 스타일 변경 ( 글씨크기 축소, 간격 및 여백 조정 )
7. 하단의 네비게이션바 추가
   - 홈 바로가기 추가
   - 맨위로, 본문보기, 댓글달기 자동스크롤 기능 추가
   - 카테고리 보기 단축버튼 추가
   - 관리자용 메뉴 버튼 추가

# 20160611일자 요약

1. 헤더 이미지 자동 변환
2. 게시글 목록 우측의 이미지, 본문의 이미지에 모서리 둥글게 효과 추가
3. 게시글 목록 우측의 이미지, 본문의 이미지에 그림자효과 추가
4. 게시글 목록에 마우스 오버(마우스 커서를 올려놓는 행위)시 이미지 각도 변경 애니메이션 추가
5. 본문에 포함된 단일 이미지가 항상 본문의 100% 너비로 조정 (일부 예외가 발생할 수 있음)
6. 본문에 "수정(새창으로)", "관련글(트랙백)" 버튼 추가
7. 소스코드 구문보기 기능추가 (Ace Editor기반 SyntaxHighlight 적용, monokai 테마 적용)

헤더 이미지 자동 변환

일정한 시간을 기준으로 좌측 또는 상단에 배치되는 헤더 배경이미지가 변경되는 효과를 줄 수 있습니다.

Latest

위의 이미지는 화면 좌측 또는 상단에 출력되는 헤더를 타이머에 의해 변경될때마다 찍은 이미지 입니다.

기본적으로 5개 이미지가 일정시간마다 변환되어 나타나도록 해두었는데, 5개의 이미지는 Images에 있는 headbg01.jpg ~  headbg05.jpg 이미지를 변경시켜주시거나 html 안의 자바스크립트를 수정해주시면 됩니다.

헤더 이미지가 변경되도록 하는 소스코드는 다음과 같습니다.

$(".wrap_bg .cont_bg").vegas({
    timer: false, /* true 로 바꾸면 이미지 하단에 얇은 타이머 바가 보여집니다. */
    delay: 5000,  /* 화면 변화까지 대기 시간입니다. 1초=1000 입니다. */
    transitionDuration: 1000, /* 다음 화면으로 변경되기까지 화면 변화 효과 시간입니다. */
    transition: 'blur', /* 화면 변환 효과입니다. fade 나 blur 가 제일 무난합니다. */
    slides: [ /* 여기가 중요! 여러분이 바꾸고자 하는 배경 이미지를 업로드하고 개수에 맞춰 조절하세요. */
        { src: "./images/headbg01.png" },
        { src: "./images/headbg02.png" },
        { src: "./images/headbg03.png" }
    ],
    preload: true, /* 화면 변화 효과가 발생하기 전에 미리 로그할 것인지 설정합니다. */
    preloadImage: true, /* 위와 동일 */
    preloadVideo: true, /* 위와 동일 */
    shuffle: true, /* 이미지 순서를 섞을 것인지 여부를 설정합니다. true, false */
    overlay: './images/07.png' /* overlay 이미지 입니다. 01.png 부터 09.png 까지 사용가능합니다. */
});

갤러리형 목록 보기 (2016.07.03 버전부터 지원)

초기 화면에 나오는 게시물을 갤러리형태로 볼 수 있는 옵션을 제공합니다.

어두운 배경색 및 컬러셋 지원 (2016.07.03 버전부터 지원)

어두운 배경색상 및 강조글자 컬러셋 지원

방문자 화면설정 지원 (2016.07.03 버전부터 지원)

방문자 선호도에 따라 화면 구성을 변경할 수 있도록 기능 제공. ( 블로그 스킨이 포함하고 있는 기능의 Preview 기능으로서도 활용가능 )

게시글 목록 이미지 효과 변경

목록에 마우스를 올리면 우측의 이미지가 살짝 회전하여 현태 마우스로 선택한 게시물을 강조하는 효과를 줍니다.

본문 이미지 효과 변경 및 버튼 추가

이미지 가로폭이 단일로 사용했을 때, 100% 에 맞춰지도록 조절합니다.

또한 #2 반응형에서 빠져있던 "수정(창으로)", "발행", "관련글(트랙백)" 버튼을 되살렸습니다.

Ace Editor 기반 SyntaxHighlight 기능 적용

개발자 분들이 소스코드를 나타낼때나 또는 특정 목적에 의해 소스코드를 올릴 경우 SyntaxHighlight 기능을 이요하면 가독성 좋은 구문보기 형태로 나타낼 수 있습니다. 이를 위해 Ace Editor 를 이용해 SyntaxHighlight 효과를 나타내도록 포함하고 있습니다.

Syntaxhighlight 기능을 사용하여 소스코드를 나타내고 싶은 경우 게시글 작성 중 HTML 을 체크하여 태그 입력모드로 바꾸신 후 "<pre class="brush: 언어코드">소스코드 내용</pre>" 구문을 이용해 작성해주시면 됩니다. 좀 더 자세히 확인하고 싶으시면 "티스토리(Tistory)에 소스코드를 표현하기(Ace - SyntaxHighlighter)" 게시물을 참조해주세요.

기타 문의사항