관리 메뉴


Kinesis´s Open Document

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

Tip & Tech/일반 : 블로그 꾸미기

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

꿈을 그리는 Kinesis 2016.06.11 13:41



본 스킨은 티스토리 반응형 #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)" 게시물을 참조해주세요.


기타 문의사항


신고


151 Comments
  • 이전 댓글 더보기
  • 프로필사진 Mandeuk 2017.04.02 23:39 신고 Kinesis님 안녕하세요! 스킨 정말 잘 사용하고 있습니다 ^ㅡ^
    스킨의 버튼을 추가해보고싶어서 이것저것 만져보다 발견한 문제가 있어서 연락드리게 되었습니다.
    인터넷 브라우저의 좌우 너비를 줄였을 때 블로그 상단의 홈버튼 우측에있는 dropdown-toggle 형식의 목록에 링크해놓은 버튼이 작동하지 않는 문제가 있네요 ㅠ
    인터넷 브라우저의 너비를 넓혀 좌측에 카테고리 화면이 위치해 있을때는 상단의 dropdown-toggle 형식의 목록 버튼들이 잘 작동하네요;; 혹시 이건 따로 해결할 방법이 없을까요?
  • 프로필사진 꿈을 그리는 Kinesis 2017.04.10 20:30 신고 정확히 어떠한 조건에서 어떻게 증상이 일어나는지 확인을 해봐야할 것 같은데, 제가 당분간 여유시간이 많지 않아 다소 어려움이 있을 것 같습니다. 빠른 조치가 필요하시면 내용을 조금 더 보충하셔서 메일로 보내주시고 댓글남겨주시면 확인해보도록 하겠습니다. 감사합니다.
  • 프로필사진 이그★ 2017.04.03 17:25 신고 스킨 잘 사용하고 있습니다! 감사합니다.
    태블릿 이하로 크기 줄일 시 상단 네비 작은 드롭다운 메뉴가 헤더 뒤로 밀려서 버튼 클릭이 안되는 문제가 있습니다.
    네비값을 헤더보다 1 더 줘서 1001로 조정해봤는데 괜찮을까요.. 기존값은 100 입니다.
  • 프로필사진 꿈을 그리는 Kinesis 2017.04.10 20:31 신고 배포한 스킨을 개인이 사용하실때 필요에 따라 일부 수정하는 것은 별도로 제약을 두고 있지는 않습니다. 일부 필요에 의해 수정하실 필요가 있으면 하셔도 됩니다. 다만 수정한 것을 해당 블로그나 다른 사이트 등에서 재배포만 하지 않도록 부탁드리겠습니다. 감사합니다.
  • 프로필사진 kangterior 2017.04.16 22:45 신고 방금 다운받아 설치했습니다. 너무 감사하네요~ 감사합니다!
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.08 10:33 신고 관심 주시고 사용해주셔서 감사합니다 ^^
  • 프로필사진 Joo 2017.05.02 17:30 신고 안녕하세요, 스킨을 보다보니 궁금한 것이 있는데요. ace editor로 syntax highlight 하는 코드가 굉장히 복잡하게 암호화되어 있던데요. 어떻게 하신건가요? 신기하고 궁금해서 ^^;;

    --- 이거요.
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('w c=["\\n\\f\\d\\j\\p","\\j\\o\\f\\e\\e","\\f\\d\\d\\h","\\M\\f\\x\\f\\e\\j\\h\\g\\t\\d","\\h\\b\\t\\o\\f\\j\\b","\\d\\h\\g\\n","\\b\\q\\g\\d","\\e\\b\\d\\B\\t\\d\\g\\k\\l\\e","\\f\\j\\b\\s\\d\\p\\b\\n\\b\\s\\n\\k\\l\\k\\P\\f\\g","\\e\\b\\d\\F\\p\\b\\n\\b","\\f\\j\\b\\s\\n\\k\\q\\b\\s","\\e\\b\\d\\z\\k\\q\\b","\\A\\b\\d\\u\\b\\e\\e\\g\\k\\l","\\e\\b\\d\\u\\p\\k\\v\\H\\l\\x\\g\\e\\g\\I\\o\\b\\e","\\e\\b\\d\\E\\b\\f\\q\\B\\l\\o\\T","\\e\\b\\d\\u\\p\\k\\v\\1a\\h\\g\\l\\d\\z\\f\\h\\A\\g\\l","\\g\\l\\U\\k","\\b\\f\\j\\p","\\Y\\n\\Q\\h\\d\\g\\j\\o\\b\\y\\L\\f\\h\\b\\f\\K\\x\\g\\b\\v\\y\\t\\h\\b\\G\\j\\o\\f\\e\\e\\1e"];$(c[18])[c[17]](1b(){1c{w r=1d($(D)[c[2]](c[1]))[c[0]](/S\\:([ a-R-Z]*)\\;?/)[1];r=r[c[5]]()[c[4]](/^V$/i,c[3]);w m=W[c[6]](D);m[c[7]]({X:19});m[c[9]](c[8]);m[c[12]]()[c[11]](c[10]+r);m[c[13]](C);m[c[14]](C);m[c[15]](J)}O(a){N[c[16]](a)}})',62,77,'|||||||||||x65|_0|x74|x73|x61|x69|x72||x63|x6F|x6E|_1|x6D|x6C|x68|x64|_2|x2F|x70|x53|x77|var|x76|x20|x4D|x67|x4F|true|this|x52|x54|x5B|x49|x62|false|x5F|x2E|x6A|console|catch|x6B|x41|zA|brush|x79|x66|js|ace|maxLines|x23|||||||||||Infinity|x50|function|try|String|x5D'.split('|')))

    --- 풀어보니 요렇던데..
    $("#mArticle .area_view pre[class]").each(function() {
    try{
    var className = String($(this).attr("class")).match(/brush\:([ a-zA-Z]*)\;?/)[1];
    className = className.trim().replace(/^js$/i , "javascript");

    var aceEditor = ace.edit(this);
    aceEditor.setOptions({ maxLines:Infinity });
    aceEditor.setTheme("ace/theme/monokai");
    aceEditor.getSession().setMode("ace/mode/" + className);
    aceEditor.setShowInvisibles(true);
    aceEditor.setReadOnly(true);
    aceEditor.setShowPrintMargin(false)
    } catch(a) {
    console["info"](a)
    }
    })
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.08 10:35 신고 난독화 라고합니다. 애써 풀어보시기 까지 하셨네요. 아무튼, 자바스크립트를 난독화 한 것인데 구글에 검색해보시면 난독화를 제공하는 도구들도 많이 있습니다 :) 저도 그 도구들 중 임의로 선택하여 난독화 처리를 하였습니다. 참고가 되셨길 ^^
  • 프로필사진 Joo 2017.05.08 13:51 신고 그렇군요. 어떤 거 쓰셨나 궁금해서 여쭤봤어요. uglify-js 같은거만 쓰다가보니 ㅎㅎ
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.11 18:11 신고 좀 시간이 지나서 저도 어느걸썻는지 기억을 못하다보니 ^^;; 말씀해주신것을 한 번 저도 써봐야겠네요 ㅎㅎ
    감사합니다~
  • 프로필사진 Hunhee 2017.05.08 14:07 신고 안녕하세요 백만년만에 블로그를 다시 해보려고 좋은 스킨을 찾아다 정말 멋진 스킨을 받아갑니다 감사합니다!! 다름이 아니라, 혹시 하단 메뉴인 방문자 화면설정 메뉴들 중 오른쪽 메뉴 (앤 위로, 카테고리 보기.. 등) 만 빼고 왼쪽 메뉴들을 없앨 수 있을까요? 모바일로 보면 메뉴들이 많아 밀려서 하단메뉴가 한 줄이 아닌 두 줄로 보이더라구요.. 제가 잘 못해서 그런지 ㅎㅎ 혹시 확인이 필요하시면 제 주소는 hunheecho.tistory.com 입니다. 미리 감사드려요!!
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.11 18:12 신고 HTML/CSS 수정에 가셔서 body 태그의 class 안의 supportUserConf 를 지워주시면 됩니다 ^^
  • 프로필사진 쿠노 2017.05.16 16:47 신고 다른 스킨들은 뭔가 하나씩 맘에 안드는구석들이 있어서 계속 이거저거 바꿔보다가 드디어 찾았네요 ^-^
    깔끔한 레이아웃에 시원하게 본문과 사진이 나오는 스킨이 참 없더라구요.
    그전에도 이 스킨이 그나마 제일 좋았는데 따로 개조(?)할 능력은 없어서 그냥저냥 쓰고있었는데 이렇게 커스텀으로 만들어주셔서 100% 만족하고 있네요
    감사합니다. ^-^
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.17 15:00 신고 좋게봐주시고 댓글남겨주셔서 감사합니다.
    슬슬 업데이트를 해야할 때인데 (원래 업데이트 예정일보다는 확실히 늦어졌습니다만) 짬을 내서 작업한다는게 쉽지 않네요. 방문해주셔서 감사드리구요. 좋은하루되세요~
  • 프로필사진 nkseok 2017.06.04 17:36 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 icollect 2017.06.04 22:04 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 icollect 2017.06.04 22:04 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 2017.06.22 17:11 비밀댓글입니다
  • 프로필사진 Syl 2017.06.23 11:53 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 2017.07.09 16:10 비밀댓글입니다
  • 프로필사진 2017.07.20 09:40 비밀댓글입니다
  • 프로필사진 2017.07.26 19:21 비밀댓글입니다
  • 프로필사진 꿈을 그리는 Kinesis 2017.08.06 22:24 신고 위쪽의 일부 댓글들은 댓글을 달아드리지 못하였습니다. 죄송합니다.
    본론적을 말씀드려, 현재 천천히 업데이트 작업을 수행 하기 시작하였습니다. 배포 일정은 아직 미정입니다.

    현재까지 진행된 사항
    # The header image has been changed to a free image provided by Unsplash.com.
    - 헤더 배경 이미지를 Unsplash.com 에서 제공하는 무료 이미지로 변경하였습니다.
    # Change the "spoqa han sans" font from the external CDN to its own import.
    - spoqa han sans 폰트를 기존 외부 CDN을 이용하는 방법에서 자체 보유 폰트 파일을 Import 하는 방식으로 변경하였습니다.
    기존의 CDN이 끊어지고 향후의 CDN도 어떻게 될 지 확신할 수 없는 부분이 있어 부득이 조치하였으며, 이로 인해 배포파일의 용량이 다소 증가하였습니다.
    # The Vegas jQuery Plugin has been updated from version 2.2.1 to version 2.4.
    - Vegas jQuery Plugin 을 2.2.1 에서 2.4 버전으로 업데이트 하였습니다.
    # Fixed the problem that the thumbnail of "Related Articles" is pushed to the next line.
    - Related Articles 부분의 섬네일이 다음 줄로 밀리는 현상을 수정하였습니다.
    # The support tool at the bottom left of the screen does not appear if the screen width is less than 738px.
    - 화면 좌측하단의 서포트 툴은 화면 너비가 738px 보다 작으면 나타나지 않습니다.

    작업 예정 사항
    - 관리자일 경우 하단에서 설정한 화면구성을 별도로 설정 페이지에 가지 않고도 적용할 수 있는 기능을 베타 버전으로 추가할 예정입니다. 이 내용은 진행일정이나 난이도 기타 요소등에 의해 변경될 수 있습니다.
    - 일부 본문에서 리사이즈가 안되는 이미지도 너비에 맞춰 리사이즈가 될 수 있도록 하기 위해 검토중입니다.
    - 기타 화면 구성상의 문제 들을 수정하기 위해 확인 중에 있습니다.
  • 프로필사진 옹아 2017.08.14 19:39 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 2017.08.16 00:16 비밀댓글입니다
  • 프로필사진 꿈을 그리는 Kinesis 2017.08.19 15:15 신고 어떤문제인지 확인이 어려워 스크린샷을 포함시켜서 증상설명과 포함하여 메일(support@kinesis.kr)로 보내주시길 부탁드려봅니다.
  • 프로필사진 Uta_Leehan 2017.08.19 20:00 신고 어찌된 영문인지 하루가 지난뒤 확인해 봤더니 오류가 고쳐저 있었습니다. 일시적인 오류인 듯 합니다. 염려 끼쳐드려서 죄송합니다 (꾸벅)
  • 프로필사진 uncle0330 2017.08.27 16:46 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 Mandeuk 2017.08.30 15:37 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 꽃댕댕 2017.09.17 22:51 관리자의 승인을 기다리고 있는 댓글입니다
댓글쓰기 폼