본문으로 바로가기

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.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 패치노트  (3) 2015.12.29
CCZ-CROSS 스킨 배포  (373) 2015.12.26

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 2016.10.24 12:57

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.10.24 13:51 신고

      안녕하세요!
      일단, 이번에 애드센스를 신청하신거죠? 애드센스가 자체 심의도 있고 일정량의 콘텐츠양을 요구하는 것으로 알고 있습니다.

      http://ccz-cross.tistory.com/29 에 해당 스킨의 애드센스 삽입과 관련된 내용이 있습니다. 확인해보세요.

  3. BlogIcon 조상철 2016.10.27 10:06 신고

    감사합니다 ! 잘쓰겠습니다^^
    그대 스킨 적용 후 페이지가 많이 느려 졌는데...
    왜 그러죠? 로딩이 빠른게 할 수 있는 방법이 있나요?

  4. BlogIcon WhiteYoon 2016.11.08 14:23 신고

    스킨을 등록하는데 죄송합니다만 갑자기 Index.xml파일 내용이 유효하지 않습니다 라고 해서 스킨등록이 안됩니다
    Index파일을 열어본적은 있는데 아무것도 안거드리고 등록하려니 index파일 때문에 등록이 되지가 않네요. 어떻게 해야 하시는지 아시나요?

  5. BlogIcon startory 2016.11.09 11:44 신고

    좋은 스킨자료 공유 감사합니다^^

  6. 2016.11.15 22:40

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.11.16 08:31 신고

      안녕하세요! 페이지에 오류가 발생하고 계시네요. main.js 파일에서 setting 부분에서 true를 ture 로 잘못 표기하신듯 싶습니다.

      수정해보세요.

    • 2016.11.16 09:29

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.11.16 09:32 신고

      extendThumb: ture, //썸네일 확장

      로 되어 있으신데, 파일을 올리시고 저장하신게 맞나요?

      http://s4ilor.tistory.com/ 에서는 반영이 안되어 있으셔요.

    • 2016.11.16 09:35

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.11.16 09:38 신고

      네 그러한 몇몇 서비스들 썸네일 추가하는 기능 맞아요. 문제는 철자가 ture가 아니가 true가 맞는 거고 위에서는 false로 하신거 같은데 블로그에서는 수정된 사항이 올라가 있지 않고 철자 틀린상태로 되어 있네요.

    • 2016.11.16 10:37

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.11.16 10:40 신고

      현재는 오류없이 정상작동 중인가보네요. 오류문구 사라졌고 말씀하신 화살표 ↘ 도 나오네요.

      스크립트로 처리되는 부분이 앞에서 오류나서 뒤에 처리부분들이 작동하지 않은 탓이에요.

  7. BlogIcon Infoseek 2016.11.24 11:51 신고

    아래 처럼 html 에 티스토리 썸네일 치환자 코드를 입력했는데

    ##article_rep_thumbnail_raw_url##
    이미지를 불러 올 수 없다고 나오고

    글 내용 일부 치환자도 맞게 입력한 것 같은데
    ##article_rep_summary##
    글 내용 일부가 출력되지 않네요..ㅠㅠ

    어떤 오류가 있는 걸까요??

    참고 : http://infoseek.pe.kr/category/Information%20Technology

    블로그 새로 시작했는데 답답하네요..ㅠㅠ
    답변 좀 꼭 부탁드립니다.

    전체 코드는 네이버 지식인 질문 참조해 주세요^^
    이미지를 올릴 수가 없어서ㅠㅠ
    http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=10605&docId=264951322

    • BlogIcon 흉내쟁이 2016.11.24 12:04 신고

      음.. 새로생긴 썸네일 치환자는 특정 구조안에서만 작동합니다. 관련해서 정확한 템플릿 구조를 사용하셨는지가 의심이 됩니다.

      가령, <s_article_rep> 안에 <s_index_article_rep> 안에 <s_article_rep_thumbnail> 안에서 썸네일 치환자가 작동을 하죠.... 이와 같은 구조를 지키신건지요?

    • BlogIcon Infoseek 2016.11.24 19:54 신고

      답변 감사드립니다.
      아직 해결은 안 되었지만 해결의 실마리를 찾을 수 있을 것 같습니다.

  8. BlogIcon 야랑 2016.11.25 18:10 신고

    좋은 스킨 넘 감사드려요 ^^ 정말 맘에들어요
    저기...질문이 있습니다.
    우측 메뉴부분에 맨위에 공지사항이 있잖아요....
    분명 아침까지는 글을 쓰면 상자안에 공지사항 글이 보였는데....
    저녁에 보니깐 글이 안보여요 ㅠㅠ
    more 이 링크 클릭해도 아무런 반응이 없구요....
    공지사항 소스는 건든게 없는거 같은데 갑자기 안되는지 ....
    답변 부탁드립니다 ^^ ;;;

  9. 2016.11.30 18:34

    비밀댓글입니다

  10. 2016.12.01 13:35

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.12.01 13:49 신고

      여백은 style.css 에서 .content-width 부분의 여백을 조정하시면 됩니다.

      다만, 조정하신 만큼 .ng-margin 값도 조정해 주셔야 합니다. 스킨배포한지 꽤 시간이 흘러서 이 부분을 조정시에 다른 부분에도 영향을 미치는지는 기억이 나질 않네요;

      사이드바 폭은 http://ccz-cross.tistory.com/30 의 main 관련부분을 참조하셔서 설정해보세요

  11. 2016.12.01 15:23

    비밀댓글입니다

  12. BlogIcon 헬머 2016.12.10 12:52 신고

    안녕하세요. 너무나 예쁜 스킨 무료로 배포해주셔서 정말 감사히 잘 쓰고 있습니다.

    댓글남긴것은 다름이 아니라 유튜브 링크를 첨부했을 때 PC상으로는 보이는데 모바일상으로는 유튜브영상이 플레이 되지 않는 것이 아니라 아예 있는 것으로 보이지도 않네요 ... ㅜ

    어떻게 해결해야할지 궁금합니다! 꼭 댓글 달아주시면 감사하겠습니다 ㅜㅜ 너무 답답해요 ~ 수시로 확인하겠습니다!

    • BlogIcon 흉내쟁이 2016.12.11 15:23 신고

      테스트하고 계신 페이지 주소를 알려주시면 감사하겠습니다.

    • 헬머 2016.12.11 17:47 신고

      http://jongsnim.tistory.com/1


      이 글이 PC로는 유튜브 연동이 되나 모바일로는 보이지 않는 현상이 발생한 글입니다ㅠ 빠른 답변과 관심 진심으로 감사합니다 ㅜㅜ

    • BlogIcon 흉내쟁이 2016.12.11 18:32 신고

      유투브 동영상의 소스코드로 삽입하신게 맞나요?

      <iframe width="560" height="315" src="https://www.youtube.com/embed/YXsOemScUnU" frameborder="0" allowfullscreen></iframe>

      위의 주소가 링크하신 동영상 같으신데 삽입하실때 html 모드에서 삽입하고 다시 테스트해보세요. 제가 테스트해본 결과는 잘 나오고 있습니다.

    • BlogIcon 헬머 2016.12.13 08:13 신고

      흉내쟁이님 정말 감사합니다...

      제가 HTML에 관해 무지해서 작업할 때 그냥 붙여넣기로 했네요/...

      HTML모드로 잡업하니 잘 나옵니다!

      넘나 감사합니다!!!!!!!!

  13. 2016.12.13 17:58

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.12.13 18:07 신고

      안녕하세요. 관련해서 업데이트를 한번 해놓았는데 이전 버전을 사용하시고 계신것 같습니다.

      https://github.com/uzugoer/CCZ-CROSS/commit/77acd0a15d6f80705945666a412620995b376319

      위 링크에서 자세한 설명을 참조하세요.

    • 2016.12.15 04:49

      비밀댓글입니다

  14. 2016.12.14 16:37

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.12.14 17:35 신고

      일단 애드센스를 추가하는 방법은
      http://ccz-cross.tistory.com/29
      글을 참고해 보세요.

      기존의 소셜댓글도 사용은 가능할꺼라고 봅니다. 소셜댓글과 티스토리 댓글 노출위치를 탭형식으로 만들거나 원하는 순서대로 먼저 뿌리거나 하는 방식이 되겠지요.

      소셜댓글들 소스들을 일단 넣어보시고 테스트해 보세요.

  15. BlogIcon Twenties 2016.12.18 14:15 신고

    예쁜 스킨 잘 쓰겠습니다!!

  16. 2016.12.21 21:24

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.12.21 23:00 신고

      style.css 파일에서 .expand-visitor 부분을 찾으셔서 아래와 같이 안보이게 처리하실수 있습니다.

      .expand-visitor {
      display: none !important;
      ....
      }

  17. 2016.12.22 12:16

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.12.22 12:20 신고

      일단, 플래시플레이어는 모바일에서 더 이상 지원되지 않는 걸로 알고 있습니다.

      스킨에서 오디와 관련 무엇을 적용하진 않습니다만, 삽입하는 오디오가 스크립트를 포함한다면 해당 페이지의 오류내용을 살펴보시길 권합니다.

      브라우저에서 F12 키를 이용해서 디버깅을 살펴봐야겠죠. 혹은 문제가 되는 페이지의 주소를 링크해주세요.

    • 2016.12.22 12:29

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2016.12.22 12:34 신고

      "모바일 웹 스킨을 OFF로 설정합니다." 를 따라하지 않으신것 같습니다.

      해당 스킨은 반응형 스킨으로 모바일웹 스킨이 따로 필요치 않습니다.

      현재 적용하고 계신 모바일 웹 스킨은 티스토리측에서 제공하는 것이라 따로 손볼수가 없는 부분이지요.

    • BlogIcon 흉내쟁이 2016.12.22 12:43 신고

      아.. 비교를 위해 따로 링크 걸으신것인가 보군요.

      티스토리에서 제공하는 모바일웹 스킨은 플래시 플레이어를 오디오 태그로 치환하는 어떤 프로그래밍이 되어 있나봅니다.

      그걸 티스토리에서 공개하지 않는한 따로 스킨제작자가 만들어 넣어야 하는데 애초에 플래시가 아닌 다른 플레이어를 사용하는 것이 모바일과 PC 모두 사용가능한 방법이겠지요.

    • 2016.12.22 12:49

      비밀댓글입니다

  18. BlogIcon 설뫼 2016.12.25 11:00 신고

    스킨 잘 사용하고 있습니다.
    한가지 고칠려고하는데, 제실력으로는 잘 안되네요.
    처음화면 리스트에서 화면이 사진을 올릴 경우 우측으로 나오는데. 이것을 좌측으로 나타나게하고 싶습니다.
    어느 부분을 고쳐야하는지요.?
    항상 건강하세요^^

    • BlogIcon 흉내쟁이 2016.12.25 16:47 신고

      안녕하세요.
      썸네일 제어는 http://ccz-cross.tistory.com/31 에서 썸네일제어 부분을 살펴보시면 도움이 되실껍니다.

    • BlogIcon 설뫼 2016.12.25 17:16 신고

      감사합니다. 덕분에 해결되었습니다.^^
      그런데 문제가 하나 생겼네요.ㅠ.ㅠ
      뭘 크게 건드리지도 않았는데. 로그아웃버튼이 계속하여 로그아웃으로 나타납니다.
      로그아웃버튼만 계속하여 나타나지만, 로그아웃이 된상태입니다.

      새로 다운로드 받아 설치를해도 같은 현상이네요.
      티스토리 서버문제인지 모르지만,시간이 지나면 해결될까요?

    • BlogIcon 흉내쟁이 2016.12.25 18:00 신고

      로그인, 로그아웃 체크부분을 main.js 부분에서 체크하도록 되어 있습니다. 이것을 가능케하는 것은 티스토리 툴바의 특정 문구를 비교하는 방식입니다.

      아마도 도메인을 따로 사용하신다면 웹페이지 주소에 표기되는 페이지 주소와 티스토리 툴바의 주소가 달라져 그런 현상이 나타나지 않을까 추측됩니다. 가능하시다면 도메인을 가지지 않는 블로그를 하나 더 개설해보시고 테스트해 보세요.

      로그인, 로그아웃을 체크하는 다른 방법이 현재는 없는 것으로 알고 있기에 다른 해결 방법은 모르겠습니다.

    • BlogIcon 설뫼 2016.12.25 18:20 신고

      역시 능력자입십니다. 감사합니다.
      main.js를 삭제 후, 새로운 파일로 재업로드했더니 고쳐지네요^^.

  19. BlogIcon Ricky Choi 2017.01.07 01:55 신고

    해당 블로그에 코드등을 표시해주는 highlighter는 어떤걸 쓰신건지 어쭤봐도 될까요?

    • BlogIcon 흉내쟁이 2017.01.07 01:57 신고

      highlight.js 입니다. 관련해서 정리했던 내용이 있습니다.

      http://webdir.tistory.com/439

      참고하세요~

      === 수정

      이런, 제가 사용하는 하이라이터가 prism 이였네요. 저 조차도 오래되서 기억이 가물가물했네요.
      http://prismjs.com/

  20. BlogIcon 케빈아놀드 2017.01.08 13:47 신고

    진짜 다른 스킨들과 비교도 안되게 깔끔하게 잘 만드신 것 같네요. 앞으로 잘 사용하도록 하겠습니다. 감사합니다!

  21. bumk 2017.01.13 00:42 신고

    안녕하세요~ 오늘 적용하였습니다~
    정말 정말 감사합니다.

    prism 코드 너무너무 맘에들어서요~

    Prism 사이트에서

    플러그인 체크한신 목록 혹시 알수 있을까요?

    저는 계속하는데

    코드 위에 javascrip 라고 띄어주는 문구가 안되네요 ㅠㅠ


    • BlogIcon 흉내쟁이 2017.01.13 01:35 신고

      안녕하세요~. 하이라이터를 쓰고 있는데도 prism 인지 기억하지 못하고 있었네요^^;

      플러그인은 line-highlight, line-numbers, show-language 를 사용하고 있습니다. 원하시는 부분이 show-language 부분일거 같아요.

    • BlogIcon ★Bum.K★ 2017.01.13 01:47 신고

      네 ㅠ

      저는 마우스 오버했을때 옆에 쪼그만하게나오고

      흉내쟁이님께서는

      위에 큼지막하게 나오는..ㅠㅠ

      요소검사해서 넣어봐도 ㅠㅠ

      저는 저렇게 안되네요 ~ 어떻게하면..ㅠ

      저위에 코드들은 하이라이트 쓰신건가요~?

      prism 쓰고 계신건가요~? ㅠ

      너무 맘에 듭니다~ ㅎ

      답변 기다리겠습니다~

    • BlogIcon 흉내쟁이 2017.01.13 02:00 신고

      잠깐 확인해봤는데 제가 사용하는 버전이 구버전이라 그런지 사용하시는 prisim과 클래스명이나 요소들 위치가 달라보이네요.

      일단 style.css 나 prism.css 의 마지막에

      pre.code-toolbar > .toolbar {
      opacity: 1 !important;
      }

      위와 같이 작성하시면 처음부터 보이시긴 할껍니다.

    • 2017.01.13 10:07

      비밀댓글입니다

    • 2017.01.13 13:37

      비밀댓글입니다

티스토리 툴바