본문으로 바로가기

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 스킨 배포  (427) 2015.12.26

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. BlogIcon Bogu 2017.01.21 22:53 신고

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

  3. BlogIcon KALI LIVE 2017.01.22 11:46 신고

    적용한뒤에 보니까
    분류전체보기할때 위에있는글이 몇개 겹쳐요
    4개겹치네요

  4. BlogIcon KALI LIVE 2017.01.25 01:20 신고

    아 죄송합니다 제가 실수한게 있었네요 만약 홈페이지에 제대로 출력이 되지않으면 스킨을 만들때
    파일을 제대로 다 했는지 확인하세요 만약 풀더를 클릭하면 업로드가 되지않고 풀더에 들어가서
    Ctrl + a 를 누른뒤 선택해야 됩니다. 죄송해요ㅠㅠ 인제 알았네요

  5. BlogIcon 몰캉몰랑 2017.01.25 22:03 신고

    댓글이나 방명록을 달때 아이콘이 검은색 바탕에 흰색 대문자 A가 나오는데 왜이러는걸까요..?
    파비콘, 아이콘, 프로필사진 전부 변경해봐도 해결이 되질 않네요ㅠㅠ...

    다른 블로그에는 아이콘이 제데로 표시되는데 제 블로그에 작성할때만 이럽니다..!

  6. 2017.02.01 14:59

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.01 15:02 신고

      위에 본문글중에 스킨옵션설정 부분 살펴보시면 마지막에 timeChange 값을 false로 변경하시면 기본형태로 출력됩니다.

    • BlogIcon elsol 2017.02.01 15:08 신고

      아! 네!
      바쁘신데 정말 감사합니다.

    • 2017.02.01 23:43

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.02 08:49 신고

      현재 블로그에 들려보니 main.js 파일에 timeChange : true 로 설정되어 있으십니다. 수정하시고 저장을 안하신 건 아니신지요? 혹은 되돌려 놓으신건가요?

    • 2017.02.02 09:10

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.02 09:11 신고

      네, false로 변경해보셔요

    • 2017.02.02 09:20

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.02 09:21 신고

      제가 확인해보니 정상적으로 나오고 있습니다. 아마도 elsol님은 브라우저에서 캐시된것이 보여지고 있어서 그럴꺼에요.

      브라우저 캐시삭제후에 다시 새로고침해보셔요.

    • 2017.02.02 09:31

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.02 09:41 신고

      해결되었다니 다행입니다. 그리고 잠시 블로그 둘러보았는데 카테고리명에 '뮤지컬/연극'처럼 구분자로 '/' 를 사용하시면 카테고리명 노출이 정상적이지 않을 수 있습니다.

      카테고리눌러서 이동되는 페이지 보시면 상단의 카테고리명이 '/' 이후의 텍스트가 나타나질 않을겁니다.

      티스토리 자체적으로 구분자로 '/'를 미리 사용하고 있어서 스킨만들면서 디자인상 카테고리 분리하면서 다른 방법이 없더군요. 알려진 문제점에 고지한 내용입니다.

      불편하지 않으시다면 그대로 사용하셔도 되고 그렇지않다면 구분자로 , 혹은 & 등을 사용하시는 것을 고려해보세요.

    • 2017.02.02 09:50

      비밀댓글입니다

    • 2017.02.02 09:58

      비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.02 09:59 신고

      아마 자바스크립트 혹은 jQuery로 날짜를 다시 치환하는 방법일겁니다.

      제 기억으론 timeChange 에 영향을 받는 모든 곳에는 timeago 라는 클래스 명을 붙여두었던걸로 기억합니다.

      변환 코드를 main.js 파일의 맨 하단에 작성해 주시면서 timeago 가 타겟이 되게 선택자로 주심될 겁니다. 다만 이경우 timeChange : true 일때는 변환 코드와 충돌이 일어날 수 있습니다.

    • BlogIcon 흉내쟁이 2017.02.02 10:02 신고

      네, 현재는 티스토리 스킨작업을 하지 않고 있습니다. 잠시 휴식기에 공부한 내용들 정리하면서 이 블로그를 만들고 배포요청이 있어서 작업해서 올렸던 거고요.

      차후에 시간적 여유가 생기면 다시 만들예정입니다.

    • 2017.02.02 10:06

      비밀댓글입니다

  7. 2017.02.01 17:02

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.02 09:47 신고

      안녕하세요.
      copycatz에 사용된 스킨은 현재 티스토리에서 새로이 제공되는 치환자나 기타 스킨만들때 유용한 것들이 포함되지 않은 과거에 제작된 스킨입니다.

      또한 글작성시에 수작업으로 html 태그를 입력해야 되는 부분도 있어서 배포할 수 있을만큼 완성도나 편의성이 높질 안습니다.

      언제가 될진 모르지만 따로 copycatz 블로그를 개편하게 된다면(현재는 버려지다시피 해서...) 그때 수정해서 배포하겠습니다.

    • 2017.02.02 12:01

      비밀댓글입니다

  8. BlogIcon 광광이 2017.02.07 22:00 신고

    적용을 시키니 검은색 상단 우측에 카테고리가 다 표시가 되는데 선택적으로 넣고 싶으면 어떻게 지정하면 될까요?

    • BlogIcon 흉내쟁이 2017.02.07 22:26 신고

      우측 상단은 메뉴를 나열하도록 제작되었습니다.

      관리페이지의 꾸미기 > 화면설정 > 메뉴탭에 추가된 것들이 출력되도록 되어있습니다.

      해당 메뉴부분을 수정하시면 되겠지요.

  9. BlogIcon 修人事待天命♡ 2017.02.08 23:18 신고

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

  10. 2017.02.09 14:23

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.09 14:36 신고

      이 스킨이 신규치환자를 이용한 스킨이였기에 원하시는 형태의 내용만 보기 전환이 안될겁니다.

      해당 부분 들어내고 과거방식으로 다시 만들어야 되는데 돌아가기엔 너무 멀리와버렸죠...

      행여나 다른 방법들이 등장했을지도 모르겠지만 제가 티스토리 스킨관련해서 작년 초 이후로 질답은 계속 받고 있지만 관련 공부는 안하고 있는 터라 저의 한계에 봉착하는 부분입니다.

  11. 2017.02.09 14:58

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.09 15:03 신고

      화면에 뿌려진 내용을 변경하시는 것은 얼마든지 가능합니다. 원하시는 형태의 디자인을 가진 다른 스킨이나 웝사이트를 참고해 구조를 비슷하게 바꾸시고 css부분을 변경하시면 됩니다.

  12. 2017.02.09 15:45

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.09 15:52 신고

      관련하여 사용된 소스는 http://webdir.tistory.com/481 에서 설명하고 있습니다.

      스킨의 main.js 파일의 마지막쯤에 헤더스크롤 부분을 제거하시거나 주석처리하시면
      될겁니다.

  13. BlogIcon 티&라다 2017.02.09 16:43 신고

    스킨 너무 잘 사용하고 있습니다.
    PC로 저의 블로그 접속하는 님들 카운터가 1회 접속인데 analytics google 애널리틱스 페이지뷰에서는 2회로 잡히고 있습니다.
    CSS 수정으로 해결되는건지 ^ ^ 가능한거면 어떻게 해야하는건지 흉내쟁이님의 답변 기다립니다.

    • BlogIcon 흉내쟁이 2017.02.09 18:16 신고

      스킨에서는 구글애널리틱스나 카운터에 영향을 미치지 않습니다. 단순히 저장되어 있는 방문자수를 뿌려주기만 할뿐입니다. 그것의 차이는 티스토리측에 문의해보셔야 합니다.

  14. BlogIcon 황색언론 2017.02.12 18:44 신고

    안녕하세요. 현재 스킨을 받고 너무 만족하고 있는 '황색언론'입니다. 덕분에 멋진 폼으로 시작할 수 있게 되어 너무 떨리는데요.

    저도 카테고리의 최상단에 WEBDIR님 처럼 로고이미지를 올릴 수는 없는지요.
    또한 블로그에 최상단에 타이틀 이미지를 넣을수는 없는지요.

    • BlogIcon 흉내쟁이 2017.02.12 22:34 신고

      블로그 상단바의 기본 높이가 작게 설정되었고 거기에 맞춰서 디자인되다 보니 원하시는 로고이미지를 넣으시면 손봐야 될 부분이 많지 않을까 싶습니다.

      HTML을 살펴보시면 아래와 같은 부분을 찾으실 수 있을겁니다.
      <h1 class="brand">
      <a href=""></a>
      </h1>

      링크 <a> 태그 안에 원하시는 로고 이미지를 업로드하시고 직접링크 시켜주시면 됩니다.
      <a href="">
      <img src="./images/로고이미지" alt="">
      </a>

      이때 로고이미지로 사용될 이미지가 높이 40px 이상이라면 상단바의 전체 틀이 깨지게 될겁니다. 이로 인해 수정해야 될 많은 부분이 생기실텐데 그것들까지 제가 도와드릴 수는 없음을 이해해주시길 바랍니다.

      사이드영역에 로고이미지를 넣는 것은 그보단 자유롭습니다만, 스타일을 따로 추가해주셔야 할겁니다.

      기본적인 사이드바영역은
      <aside id="sidebar" class="sidebar lts-narrow">
      .....
      </aside>
      와 같습니다.

      위 태그안에 각각의 사이드바들이 아래와 같은 구조입니다.
      <div class="module module-모듈명 hidden-xs hidden-sm">
      <h3 class="module-title sr-only">모듈명</h3>
      <div class="module-content">
      ......
      </div>
      </div>

      이를 이용해 새로운 모듈을 skin.html 에 추가해주시고 module-content 부분에 로고이미지를 추가하시면 됩니다.

      그리고 정하신 모듈명을 기반으로 style.css에 스타일을 작성해주시면 됩니다.

  15. BlogIcon 샨(Shan) 2017.02.12 22:04 신고

    안녕하세요. 저는 서버엔지니어입니다. 어쩌다가 자료를 찾아 흘러오게 되었는데 스킨이 참 마음에 드네.. 생각했는데 마침 직접 배포를 하고 계시네요.
    안그래도 블로그를 다시 시작할려고 마음먹고 있었는데 덕분에 잘적용했습니다.
    감사히 쓰겠습니다.

  16. BlogIcon MELUVO 2017.02.13 17:54 신고

    이쁘고 깔끔한 스킨 만들어주셔서 정말 감사합니다. 잘 사용하겠습니다!^^

  17. 2017.02.14 15:20

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.14 16:20 신고

      애드센스 관련하여서는 http://ccz-cross.tistory.com/29 에 정리되어 있습니다. 참고하시고 스마트폰뿐만 아니라 전체적으로 해당 스킨이 무거운 감이 없지 않습니다.
      IE7까지 지원하면서 반응형을 구현하다보니 불가피한 상황입니다. 모바일에서도 크롬브라우저로 접속하시면 좀 더 쾌적하지 않을까 생각합니다.

      copycatz 스킨은 배포용으로 제작된 것이 아니라서(임의로 수정을 많이 해야됩니다.) 따로 배포하지 않고 있습니다.

  18. BlogIcon 샨(Shan) 2017.02.16 14:49 신고

    안녕하세요. 스킨 매우 흡족해하며 사용중입니다.

    혹시 저의 경우는 사진이미지를 많이 업로드를 하는데 이미지가 클경우는 자동으로 반응형에 맞게 크기가 고정이 되는것 같은데요. 혹시 클릭시에 원본크기로 볼수 있게 HTML편집이 가능한가요?

    • BlogIcon 흉내쟁이 2017.02.16 15:02 신고

      일단, 사진 첨부하실때 이용하는 포토업로더에서 원본크기로 올리셔야 될겁니다.

      그리고 플러그인 중에 Light TT EX (이미지 크게보기) 활성화 하시고요.

      그리고 http://webdir.tistory.com/484 의 글이 추가적으로 도움이 되실지도 모르겠네요.

  19. 2017.02.16 18:56

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.16 21:58 신고

      추가하신 스크립트 중에 오류가 있으신가봅니다. 광고 같은데, 일단 그것부터 해결해보시고요.

      크롬에서 F12 개발자도구 띄우시고, Network 탭 선택하시고 새로고침하시면 파일별 페이지로딩에 걸리는 시간이 나옵니다.

      큰이미지 사용하시면 좀 더 느려지고 이것저것 플러그인들 삽입하면 좀 더 느려집니다.

      기본적으로 페이지로딩이 완료된 후에 콘텐츠 부분이 보이는 형식이라 체감상 더욱 느리다고 느낄수도 있습니다.

      관련해서 질문하신 분들이 많아 이곳 댓글들과 방명록 댓글로 문의주신 것들 답변을 종종했습니다. 관련해서 찾아보시길 권합니다.

  20. 2017.02.17 09:48

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2017.02.17 14:09 신고

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

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

  21. 2017.02.17 10:01

    비밀댓글입니다

티스토리 툴바