본문으로 바로가기

CCZ-CROSS 스킨 배포

category 티스토리/스킨배포 2015.12.26 10:33
티스토리의 관리자 페이지 업데이트 이후로 로그인/로그아웃이 정상작동하지 않는 경우에는 환경설정(블로그관리) > 꾸미기 - 설정에서 블로그 메뉴바를 표시합니다.로 설정을 변경해 주시길 바랍니다.

CCZ-CROSS 스킨 소개

기존에 사용하고 있던 스킨에 대한 공유 요청이 있어 배포 가능한 형태로 재작업하여 배포하게 되었습니다. 개인적으로 구형 브라우저 및 기기들을 지원하는 마지막 작업 결과물인 동시에, 여러가지 쓸만한 아이디어를 조합한 시험작입니다.


특징

  • 클래식한 테마
  • 다양한 기기 및 브라우저를 지원하는 반응형 디자인
  • 옵션 값의 변경으로 일부 기능 ON/OFF 가능
  • 글 작성시 도움이 될만한 서식 스타일 추가

브라우저 지원

  • Windows XP 운영체제의 Internet Explorer 7/8
  • Windows 7 운영체제의 Internet Explorer 9/11
  • Windows 8.1 운영체제의 Internet Explorer 11
  • Windows 10 운영체제의 Internet Explorer 11/Edge
  • Firefox 최신버전
  • Chrome 최신버전
  • Opera 최신버전
  • iOS Safari
  • Android 2.3.x 이상 내장브라우저
  • Android Chrome
테스트의 진행은 위의 브라우저들에서 진행되었지만 웹 표준을 준수하는 브라우저라면 그 밖의 브라우저에서도 이상없이 작동됩니다. 블로그 주소를 도메인을 연결하여 사용하시거나 개별글 주소를 문자형태로 사용하신다면 테스트가 필요합니다.

라이센스

  • CCZ-CROSS 스킨은 무료로 배포되며, 자유로이 수정하셔서 사용하셔도 됩니다.
  • 판매의 목적으로 사용될 수 없습니다.
  • 썸네일 추출과 관련된 소스는 ishaiin 님이 판매중인 스킨의 썸네일 추출 소스를 참고하였습니다. 공개 라이센스가 아니기에 이의 재사용을 금합니다.

스킨 참고 및 참조

스킨을 배포판으로 재작업하면서 스킨 공모전에 출품된 많은 작품들을 참고하였습니다.

스킨 다운로드 및 설치

아래의 스킨 파일을 다운로드하고 압축을 해제합니다.

CCZ-CROSSV1.2.1.fix.zip

스킨등록

  1. 티스토리 관리 페이지에 접속합니다.
  2. 꾸미기 스킨 → 스킨등록 버튼을 클릭합니다.
  3. 스킨저장명에 적당한 이름(ex. ccz-cross)을 입력하고 추가버튼을 통해 index.xml, skin.html, style.css, preview.gif 및 images 폴더의 모든 파일을 업로드하고 저장합니다.
  4. 보관함 탭의 등록된 스킨을 적용합니다.

스킨설정

  • 꾸미기의 모바일웹 스킨 OFF로 설정합니다.
  • 꾸미기의 사이드바에서 원하는 모듈을 등록하고 저장합니다.
  • 꾸미기의 화면설정에서 메뉴 탭에 원하는 메뉴를 설정합니다.
  • 꾸미기의 화면설정에서 화면출력탭
    • 기본화면(홈화면)의 출력할 글 갯수를 설정합니다.
    • 선택화면(카테고리)의 글 갯수를 설정하고 목록+내용으로 설정합니다.
    • 태그화면을 인기순으로 설정합니다.
    • 펼침 설정의 댓글펼침을 활성화합니다.
    • 사이드바 태그를 인기순으로 설정합니다.
    • 블로그 메뉴바를 표시합니다.
  • 플러그인의 플러그인 설정에서 블로그 아이콘 표시 플러그인을 활성화(64x64) 합니다.
  • 환경설정의 기본 정보에서 블로그 정보탭의 블로그 화면 이미지와 아이콘을 등록합니다(개인이 준비).

스킨 옵션설정

images 폴더내의 main.js에는 몇가지 옵션을 설정할 수 있는 트리거가 준비되어 있습니다. main.js 파일을 메모장이나 기타 편집기로 열어보면 문서의 초입에 아래의 구문을 발견할 수 있습니다.

var setting = {

	activeCate: true,    //현재카테고리위치 표기 
	autoLink: true,      //댓글,방명록 자동링크
	extendThumb: false,  //썸네일 확장
	newIcon: true,    	 //new 아이콘 변경여부
	preloader: false,    //프리로드 활성화
	searchTag: true,  	 //검색시에 우선순위태그를 보여줌
	searchTagCount: 8,   //보여줄 우선순위태그 갯수
	tbHide: true,        //트랙백숨기기
	timeChange: true    //포스트,댓글,방명록 날짜표기 변경 
	
}

각각의 옵션은 truefalse 값으로, 활성/비활성화 됩니다.

activeCate

티스토리에서 제공하는 카테고리의 현재 위치 표기가 불량이라 이를 지원하기 위해 새로 만든 옵션입니다. 이후에 티스토리측에서 정상적인 형태로 제공하게 된다면 비활성화 하시면 됩니다.

autoLink

댓글과 방명록에 링크형식(ex. http://www.tistory.com)의 문자들을 실제 클릭 가능한 링크로 변환하는 옵션입니다. 댓글이 많이 달리는 블로그라면 성능에 영향을 미칠수 있으며, 악의적인 링크연결을 방지하고 싶다면 비활성화 하세요.

extendThumb

홈화면 또는 카테고리 목록에서 유투브, 비메오, 다음tv팟, 사운드클라우드, 데일리모션과 같은 멀티미어 서비스들의 썸네일을 추가하는 옵션입니다. 관련 서비스들을 이용한 글을 주로 작성한다면 이를 활성화하세요.

newIcon

새 글을 알리는 NEW 아이콘을 변경하는 옵션입니다. 기존의 이미지형 아이콘은 세로 정렬에 한계가 있어 준비했지만 원치 않는다면 비활성화 하세요.

preloader

해당 스킨은 스크립트로 변경되는 부분이 존재하며, 이를 콘텐츠가 노출된 상태에서 변경되는 과정을 감추기 위해서 FOUC 처리가 기본으로 적용되어 있습니다. 다만, 로딩이 길어질 경우 빈 화면을 노출하고 있기에 기호에 따라 로딩 이미지로 대체할 수 있도록 이 옵션을 제공합니다. 활성화하면 페이지 로딩시에 아래와 같은 이미지가 제공됩니다.

searchTag

검색시에 보여줄 추천 검색어를 인기태그를 활용해 제공합니다. 해당 스킨이 기본적으로 태그를 인기태그로 변경하나 변경되지 않는다면 직접 관리 페이지의 화면설정 → 화면출력에서 사이드바 태그를 인기순으로 변경하시길 바랍니다.

searchTagCount

위의 searchTag 옵션 활성화시에 보여줄 추천 검색어의 갯수를 설정합니다.

tbHide

엮인글(트랙백)과 관련된 내용을 숨깁니다. 엮인글을 사용하시는 경우 비활성화 하세요.

  • 본문 하단의 엮인글 영역
  • 사이드바의 엮인글 영역

timeChange

날짜표기 방식을 2015.09.07 과 같은 방식에서 3개월전, 몇시간전과 같이 현재를 기준으로 지난 시간을 표기합니다.

기타 궁금하신 내용은 CCZ-CROSS 데모페이지에서 살펴보시기 바랍니다.

패치노트

파일을 수정할때 마다 위의 다운로드 파일을 갱신하고 있습니다. 스킨을 수정해서 사용하시는 분들은 전체를 변경하기 어려우실꺼라 생각되어 패치내역 을 따로 공개하고 있습니다.

스킨을 사용하시면서 발견되는 미흡한 부분에 대해서 많은 제보 부탁드립니다.

알려진 문제점

  • 각종 서식, 디자인의 스타일 및 위치정렬과 관련된 문제 - 2015.12.29/2015.12.31 패치
  • 댓글 및 방명록 작성후, 신규 댓글이나 답글을 작성할 수 없었던 문제 - 2016.01.04 패치
  • MAC 운영체제의 크롬브라우저에서 검색이 작동하지 않는 문제 - 티스토리측에서 확인중
  • 카테고리명에 '/' 문자가 들어있을 경우, 카테고리명 노출이 오작동을 일으킴(ex. C/C++) - ,& 같은 다른 문자 사용추천
  • 카테고리 및 검색결과등의 목록이 보이지 않는 경우 - 스킨을 적용한 후, 관리자 페이지의 꾸미기의 화면설정메뉴로 이동한 후 화면출력의 선택화면 글 목록의 갯수와 표기화면을 목록+내용으로 전환합니다. 이미 표기화면이 목록+내용으로 되어 있어도 다른 방식으로 변경후 저장하고 다시 목록+내용으로 변경해보세요.
  • 티스토리의 신고기능 업데이트로 인해 기존의 날짜표기 변경 기능이 정상적으로 작동하지 않습니다. 관련해서 업데이트 사항을 참고하세요.


신고

'티스토리 > 스킨배포' 카테고리의 다른 글

CCZ-CROSS 패치노트  (6) 2015.12.29
CCZ-CROSS 스킨 배포  (527) 2015.12.26

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. BlogIcon 부들부들맛 2017.06.06 01:03 신고

    정말 잘 쓰겠습니다. 좋은 스킨 배포해주셔서 감사합니다.

  3. 2017.06.14 18:09

    비밀댓글입니다

  4. BlogIcon 작은건담군 2017.06.17 11:02 신고

    제 무지함으로 인해 오늘도 죄송하게 질문을 하게됩니다ㅠ
    현재 CCZ-CROSS 스킨은 반응형으로 제작되어 있어서 스마트폰, 태블릿, PC 등에 맞춰서 레이아웃이 갖춰지는데
    정확하게 언제부터인지는 모르겠으나 스마트폰으로 제 블로그를 봤을때 스마트폰의 레이아웃이 아닌 태블릿 사이즈에 맞춰서 페이지가 보이게 됩니다;; 혹시 원인을 알 수 있을까 싶어서 댓글을 남깁니다
    테스트는 아이폰7, 아이패드 미니2, 갤럭시S5로 진행했습니다

    • BlogIcon 작은건담군 2017.06.17 11:11 신고

      앗 찾아보니ㅠ 제가 <meta> 태그를 하나 날려먹었네요 ㅠ
      애드센스 관련 태그를 넣었다가 실수한듯 합니다. 혹시 이로 인해 시간을 뺏기셨다면 정말 죄송합니다

  5. 2017.06.18 03:41

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.06.18 03:52 신고

      음 일단 서브블로그 주소를 보면 말씀하시는 부분이 어떤부분인지 이해가 좀 더 쉬울것 같습니다.

      일단 필명부분은 블로그 계정당 1개입니다. 필명 수식어라고 필명앞에 글자를 더 붙일 수 있게 되어 있는데 그 부분을 서브블로그에서 필명으로 작성하시어 중복 노출되는게 아닐련지요.
      환경설정 > 기본 정보에 들러보세요.

      카테고리 노출부분은 정확히 이해를 못하겠습니다.

  6. 2017.06.18 03:58

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.06.18 04:06 신고

      위에서 말씀드렸듯이 블로그 계정당 1개의 필명만을 사용할 수 있습니다. 다만, 블로그마다 필명 수식어를 다르게 추가할 수 있을 뿐입니다. 해당 블로그 계정에서 사용하시는 필명이 친절한박팀장이니 같은 계정에 존재하는 모든 서브 블로그들에서 해당 필명이 나타날 것입니다. 서브 블로그들에서는 필명앞에 붙이는 필명수식어만을 변경할 수 있죠.

      이것을 필명을 안나오게 하고 필명수식어만을 나타나게 할 수 있는지는 저도 의문입니다. 티스토리에서는 단순히 글쓴이를 나타내는 치환자만을 제공하니까요.

      카테고리는 티스토리 홈페이지에 노출되는 것을 말씀하신것이군요. 위에서 말씀드렸듯이 필명을 하나만 제공하기에 친절한박팀장으로 노출됩니다.

      원하시는 바로 노출하시고 싶으시면 같은 계정의 다른 블로그가 아닌 다른 계정을 하나 더 만드시고 그곳에 블로그를 만드셔야 할겁니다.

  7. 2017.06.18 04:10

    비밀댓글입니다

  8. 2017.06.24 02:00

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.06.27 17:14 신고

      모바일에서 좌우 여백이 15px 적용됩니다.
      다만 이미지나 동영상의 경우 이 여백을 무시하도록 지정되어 있습니다.

      over-padding이란 클래스명이 붙지요. 물론 모바일의 뷰포인트영역보다 이미지가 작다면 이는 적용되지 못합니다.

      가령, 가로 400px 의 원본 이미지를 320px의 모바일기기로 보게될경우 좌우 여백을 제외한 290px의 크기만큼 이미지가 보여야 하지만 over-padding에 의해 모바일기기의 최대너비인 320px까지 이미지의 크기가 증가됩니다. 이는 원본이미지보다 모바일기기의 너비가 작기 때문에 가능한 것입니다.

    • 2017.06.29 01:34

      비밀댓글입니다

  9. 2017.07.03 01:01

    비밀댓글입니다

  10. BlogIcon MisoFamily- 2017.07.03 11:40 신고

    스킨 감사합니다.

    블로그를 새로 시작하는데 원하는 스킨이없어서 고민하고있었는데, 흉내쟁이님의 스킨이 맘에들더군요.
    스킨 감사히 사용하겠습니다.

  11. BlogIcon 겜담 2017.07.20 01:44 신고

    스킨 감사합니다 !!

  12. BlogIcon K_SH 2017.07.27 12:49 신고

    감사합니다 잘쓰겠습니다!!

  13. BlogIcon Bang Ho~! 2017.07.31 15:35 신고

    깔끔하니 너무 좋은 것 같습니다.
    감사히 잘 사용하겠습니다.

  14. BlogIcon 바람처럼~ 2017.08.01 18:04 신고

    딱 제가 원하는 스타일의 스킨이라 정말 마음에 들어요! 감사합니다. 잘 쓸게요.

  15. BlogIcon 오규환 2017.08.02 14:29 신고

    정말, 감사히 잘 쓰고 있습니다. ^^
    몇가지 궁금한게 있지만 최대한 제 손으로 쪼물딱 거려본 다음에 여쭤보겠습니다!

  16. BlogIcon cybertramp 2017.08.06 11:43 신고

    깔끔한 스킨 감사합니다.

  17. BlogIcon 리제네아 2017.08.25 17:21 신고

    안녕하세요. 스킨 잘 사용하고 있습니다.
    하지만, 스킨을 사용하던 도중 해결하지 못한 부분이 있어 질문을 드립니다.

    prism으로 작성한 소스를 복사하여 붙여넣기 할 경우 엔터채로 복사가 되지 않고 있습니다.
    현재 이 페이지의 소스에서도 발생하고 있습니다.

    혹시라도 해결방법을 아신다면 도움 부탁드립니다.

    • BlogIcon 흉내쟁이 2017.08.25 17:31 신고

      스킨과는 상관이 없는 문제로 보입니다. prism 같은 코드하이라이터들은 <pre></pre> 코드를 사용하는데 이 태그는 공백등을 원하는 데로 만들수 있습니다. 다만 이를 그대로 복사하실 경우 태그는 복사되지 않고 내용물들만 복사되고, 이를 한줄에 뿌려버리는 것이죠.

      코드하이러터들중에 따로 복사가 되는 것들도 있었던 것 같긴한데 기억이 가물가물합니다.

    • BlogIcon 리제네아 2017.08.25 17:37 신고

      답변 감사합니다.
      우선 제가 흉내쟁이님께 글을 작성하기전에 제 나름대로 연구를 해보았습니다.

      첫 번째, 해당 prism를 사용하는 블로그에서 일부 블로그는 복사가 되고 일부 블로그는 복사가 안됩니다.
      ※ 해당 소스는 복사가 안되지만 http://webdir.tistory.com/142 에 있는 소스는 복사가 가능합니다.

      두 번째, 현재 공유되고 있는 소스에서는 제가 여러번 초기화를 해보았으나 소스중 엔터는 복사되지 않습니다.

      세 번째, 아무런 스킨을 사용하지 않고 prism만 사용할 경우 소스 중 엔터도 복사가 가능했습니다.

      혹시라도 방법을 알고 계시나 싶어 여쭤보았습니다.
      나중에 여유가 되신다면 한번 확인 부탁드립니다.
      감사합니다!

    • BlogIcon 리제네아 2017.08.25 17:39 신고

      prism에서 드래그 하고 Ctrl + C 누를때

      Enter 도 복사가 될 경우 드래그 상태가 풀리지 않지만,

      Enter 는 복사가 안 될 경우,
      드래그 상태가 자동으로 풀립니다.

    • BlogIcon 흉내쟁이 2017.08.25 17:46 신고

      말씀드렸듯이, 스킨에서 줄바꿈이나 무엇을 강제로 변경할수 있는 것은 없습니다. 단순히 치환자 한줄로 콘텐츠를 뿌리는게 티스토리 구조라서 손을 댈수가 없는 구조입니다.

      코드하이라이터들 내부에서 따질문제입니다. 의심되는 건 글쓰기모드에서 코드입력시 줄바꿈을 위해 쉬프트 + 엔터, 그냥 엔터등의 차이 혹은, 다른 놓친 부분이 있을지 않을까 싶습니다.

    • BlogIcon 리제네아 2017.08.25 17:49 신고

      넵 답변 감사합니다!
      저도 오늘 퇴근후에 연구해볼 생각입니다.
      혹시라도 결과를 얻어낸다면 공유 드리겠습니다!

  18. BlogIcon s87boyo 2017.09.02 18:58 신고

    안녕하세요. 질문이 있어 댓글을 남깁니다. 스킨을 거의 1년째 사용하고 있는데 아주 좋은 스킨입니다. 이번 8월 31일 티스토리 개편을 하고나서 우측 상단 관리자메뉴를 클릭하면 "로그인"이 나타나지 않고 "로그아웃"만 나타나더군요. 로그아웃 상태에서도 "로그아웃"만 나타납니다. 제가 html을 수정하다가 잘못 수정되었는지 확인해보아도 문제는 없어보입니다. 같은 스킨을 사용하시는 다른 분들의 블로그를 들어가보아도 똑같은 현상이 있습니다. 개편으로 인해 소스코드를 수정해야할 부분이 있을까요?

    • BlogIcon 흉내쟁이 2017.10.13 14:41 신고

      안녕하세요. 오랫동안 자리를 비워 관련 문제 파악을 이제서야 하게되었습니다. 관련해서는 티스토리측에서 메뉴바가 기본적으로 숨김처리되도록 변경되어서 발생한 문제입니다.

      환경설정 > 꾸미기 - 설정으로 이동하셔서 블로그 메뉴바를 표시합니다로 변경하시고 저장하시면 올바르게 작동합니다.

    • BlogIcon s87boyo 2017.10.13 14:43 신고

      답변 감사합니다! 좋은 하루 보내세요^^

  19. BlogIcon 토리랑 2017.09.09 15:09 신고

    안녕하세요.
    ccz-cross-1.2.1 스킨 받아서 너무 잘 쓰고 있는데요.
    저도 처음엔 몰랐는데 티스토리가 업데이트 패치된 이후부터 상단 로그인 메뉴가
    계속 로그인 상태로 출력이 되고 있습니다.
    무조건 로그인 상태가 아니고 로그인을 하지 않은 상태에서는 출력은 로그인이 되어있지만
    관리자 페이지로 들어가려면 로그인 화면이 다시 나와서 로그인을 해야 하고요.
    반대로 로그아웃을 하려고 상단 관리자 메뉴에서 로그아웃을 누른 다음
    관리자 메뉴를 열어보면 여전히 로그인 상태로 제 정보가 나오네요.
    제대로 로그아웃을 하려면 브라우저 전체를 닫은 다음 다시 열어주어야 합니다.
    제가 PC방 같은 곳을 가지 않으니 별 걱정할 일은 없지만 혹시 모르잖아요. ^^;;;

    저는 저만 그런줄 알았는데 같은 증상을 겪으시는 분이 위에도 글을 올리셨네요.
    스킨이 너무 마음에 들어 다른 걸로 바꾸기 싫은데 언제라도 들르시면
    확인 좀 부타드립니다. ^0^

    그럼 즐거운 주말 되세요.

    • BlogIcon 흉내쟁이 2017.10.13 14:41 신고

      안녕하세요. 오랫동안 자리를 비워 관련 문제 파악을 이제서야 하게되었습니다. 관련해서는 티스토리측에서 메뉴바가 기본적으로 숨김처리되도록 변경되어서 발생한 문제입니다.

      환경설정 > 꾸미기 - 설정으로 이동하셔서 블로그 메뉴바를 표시합니다로 변경하시고 저장하시면 올바르게 작동합니다.

    • BlogIcon 토리랑 2017.10.13 21:54 신고

      답변 감사합니다. 그리고 심플하고 예쁜 스킨 늦게나마 감사드려요. ^^

  20. BlogIcon 프리루트 2017.10.03 00:28 신고

    저도 위에 두분이 말씀해주신 의견대로 로그인을 하지 않았는데도 로그아웃 표시가 계속 뜨네요..

    • BlogIcon 흉내쟁이 2017.10.13 14:41 신고

      안녕하세요. 오랫동안 자리를 비워 관련 문제 파악을 이제서야 하게되었습니다. 관련해서는 티스토리측에서 메뉴바가 기본적으로 숨김처리되도록 변경되어서 발생한 문제입니다.

      환경설정 > 꾸미기 - 설정으로 이동하셔서 블로그 메뉴바를 표시합니다로 변경하시고 저장하시면 올바르게 작동합니다.

    • BlogIcon 프리루트 2017.10.13 14:42 신고

      감사합니다 :)

  21. 2017.10.15 23:21

    비밀댓글입니다

티스토리 툴바