본문으로 바로가기

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.2.fix.zip

스킨등록

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

스킨설정

  • 꾸미기의 스킨편집 > 홈 화면 꾸미기
    • 홈 화면 글 수, 글 목록 글 수를 설정합니다.
    • 글 목록 형태를 목록+내용으로 설정합니다.
    • 태그 클라우드 순서를 인기순으로 설정합니다.
    • 댓글 펼침의 댓글펼침을 활성화합니다.
    • 사이드바 태그를 인기순으로 설정합니다.
  • 꾸미기의 사이드바에서 원하는 모듈을 등록하고 저장합니다.
  • 꾸미기의 메뉴에서 원하는 메뉴를 설정합니다.
  • 꾸미기의 모바일에서 티스토리 모바일웹 자동 연결을 '사용하지 않습니다.' 로 설정합니다.
  • 꾸미기의 설정에서 블로그 '메뉴바를 표시합니다.' 로 설정합니다.
  • 플러그인의 플러그인 설정에서 블로그 아이콘 표시 플러그인을 활성화(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 패치노트  (10) 2015.12.29
CCZ-CROSS 스킨 배포  (629) 2015.12.26

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. cococo 2018.03.04 18:54 신고

    혹시 글꼴 변경에 관해서 알 수 있을까요?

  3. BlogIcon 영성블 2018.03.07 10:31 신고

    스킨 넘 마음에 들어요~^^
    잘 쓸게요! 감사합니다 :)

  4. periodoctor 2018.03.12 12:00 신고

    먼저 좋은 스킨 배포 고맙습니다. ^^ 목록 상하단에 애드센스를 달수 없을까요? 제 짧은 실력으로 해보니 목록 상하단에 애드센스를 달면 내용에서도 상하단에 애드센스가 나오네요. 그래서 본문 상하단에 애드센스를 달았는데 이거랑 광고가 상하단에 각각 2개씩 떠버려요 ㅎ

    방법이 있다면 좀 알려주십시오. 미리 고맙습니다.^^

  5. BlogIcon MaFi메피 2018.03.25 10:06 신고

    안녕하세요~
    어제 스킨을 처음으로 바꿔보았는데요
    사이드바 광고를 넣으니 광고가 칸 안에서 조금 삐져나오던데 어떻게 수정해야하나요? ㄷㄷ
    사이드 칸 넓이를 넓힐수는 없나요?

    또 다른 블로그는 포스팅을 아래로 내리다보면 사이드바에 나오는 목록이 끝나는 부분에서
    고정되어 포스팅 끝까지 유지되던데
    현재 CCZ 스킨은 사이드 목록은 포스팅을 계속 보다보면 위로 사라져버려서
    아무것도 없는 빈칸만 보이게되는데
    이 부분을 고정하는 방법도 없을까요?
    수익을 내기위해 광고를 사이드바 칸 마지막에 넣고
    글 끝까지 내려갈동안 고정하고 싶습니다 ㅎㅎ
    시간나실때 답변 부탁해요~

    • BlogIcon 흉내쟁이 2018.03.25 18:40 신고

      광고 삽입관련해서는 http://ccz-cross.tistory.com/29 글을 참조해보세요.

      사이드바의 목록부분을 고정시키고 싶으시다면 관련 자바스크립트 플러그인등을 이용해서 직접붙이셔야 합니다.

      부트스트랩의 affix 가 말씀하시는 기능을 지원하고요. 그밖에도 수많은 관련 자바스크립트 플러그인들이 있을테니 달으시면 됩니다.

    • BlogIcon MaFi메피 2018.03.25 20:35 신고

      답변 감사합니다!!
      알려주신 방법대로 한번 시도해볼게요~
      아직 초보라 제대로 찾을 수 있을지 모르겠지만요 ㅎㅎ
      즐거운 주말 보내세요~

  6. LOL 2018.04.10 00:46 신고

    모바일 화면에서'만' 최근글/최근 댓글 항목을 숨기고, 카테고리 다른글 항목을 맨 밑으로 이동 시키고 싶습니다.
    어떤 코드를 손봐야 할까요??

    • BlogIcon 흉내쟁이 2018.04.10 01:43 신고

      skin.html 파일에서 <aside id="sidebar" class="sidebar lts-narrow"> 부분을 찾으세요.

      다른 사이드바 처리방식을 보시면 아시겠지만 class="module module-name hidden-xs hidden-sm" 와 같은 처리들이 되어 있는데 최신글, 댓글영역만 hidden-xs hidden-sm이 처리가 빠져있을겁니다. 그것들 똑같이 넣어주시면 모바일, 태블릿형 크기에서 숨겨집니다.

      hidden-xs : 768px 이하의 기기에서 숨김
      hidden-sm : 992px 이하의 기기에서 숨김

  7. 피치쉐리 2018.04.10 15:07 신고

    정말 잘 쓰고 있습니다!
    감사합니다~

  8. 2018.04.10 23:14 신고

    •꾸미기의 화면설정에서 화면출력탭 이건 어디서 하는건가요??ㅜㅜ 짐 이거 못해서 스킨 정렬이 뒤섞여있어요 ㅠㅠ

  9. BlogIcon 사는 것처럼 2018.04.22 11:01 신고

    안녕하세요.
    스킨사용에어 검색을 하기 위한 검색아이콘 (관리자옆)이 보였다 안보였다 합니다.
    어떻게 해야할까요.
    수고하세요

    • BlogIcon 흉내쟁이 2018.04.22 11:06 신고

      아이콘폰트가 로딩되는데 걸리는 시간이 있어서 그런게 아닐련지요.

      테스트하고 계신 브라우저가 무엇인지요? IE7 ~ IE8은 로딩되는 요소가 많아서 좀 더 느릴수 있습니다.

      방명록이나 콘텐츠가 적은 부분에서 새로고침해보시면서 현상을 테스트해보셔요.

    • BlogIcon 사는 것처럼 2018.04.22 11:41 신고

      쉬는 날인데 감사드립니다.
      말씀대로 잘 나올 때는 잘 나오는데요.
      ...
      윈도우 8을 사용하고 있습니다.
      수고하세요

  10. BlogIcon winnie.yun 2018.04.23 03:14 신고

    안녕하세요, 스킨 항상 잘 쓰고 있습니다.
    다름이 아니라 애드센스 질문이 있는데요.

    i) 현재 PC 상단에 직사각형 광고 2개를 가로로 연달아 사용 중입니다.
    ii) CCZ-CROSS 모바일 스킨 사용 시 직사각형 광고 2개가 세로로 연달아 나옵니다.

    Q) PC에서 직사각형 광고 2개, 모바일에선 상단에 1개만 노출 시킬 수 있는 방법이 어떻게 될까요?

    이것 저것 찾아보면서 해결해보려고 했는데 마땅한 방법을 못 찾아 질문 올립니다.

    • BlogIcon 흉내쟁이 2018.04.23 03:36 신고

      음, 가장 쉽게 생각할 수 있는게 모바일에서 숨기고 싶은 광고에 반응형 클래스를 붙여보는 것일겁니다.

      <ins class="adsbygoogle hidden-xs hidden-sm" ...>
      위와같이 구글 광고가 시작되는 태그의 클래스명 옆에 hidden-xs, hidden-sm 같은 미리넣어둔 반응형 클래스를 붙여보셔요. (xs는 768이하의 기기, sm은 992px 이하의 기기를 뜻하며 md, lg도 reset.css에 정의되어 있습니다.)

      물론 이런 방식은 문제가 발생할 소지가 있는 방식입니다. 일반 고정된 콘텐츠를 숨기고 보여주는것은 전혀 문제될것이 없지만 구글광고처럼 스크립트가 실행되면서 콘텐츠가 동적으로 변하고 만들어지는 방식은 해당 콘텐츠가 보여질 영역에 대한 크기를 요구하는 것일경우 숨김처리가 되었기에 영역의 크기를 계산할수 없기때문이죠.

      일단은 위와 같은 방식으로 해보시고, 광고가 채워지지 않는다면 구글광고를 로드하는 스크립트 자체를 분기해서 특정너비 이상일때 하나더를 로드하는 방식으로 변경해야겠지요.

    • BlogIcon winnie.yun 2018.04.23 16:12 신고

      감사합니다. 좀 이따 일 끝나고 집에 가서 한번 해봐야겠습니다. 해보고 잘 되던 안되던 또 댓글 남겨둘게요.
      좋은 하루 되세요~~~

  11. BlogIcon 심리빈 2018.05.10 00:56 신고

    감사합니다 . 잘사용 하겠습니다.

  12. BlogIcon gray_kim 2018.05.14 09:49 신고

    스킨 너무너무 예뻐요~ 감사히 잘 쓰겠습니다.^^

  13. BlogIcon @dev_Yeon 2018.05.18 16:46 신고

    감사합니다! 이쁘게사용하겠습니다!

  14. 2018.05.21 17:29

    비밀댓글입니다

  15. 크투가 2018.06.03 14:51 신고

    스킨에서 fouc를 모두 제거했더니 속도가 엄청 빨라진 대신 과거에 작성한 글의 이미지 사이즈가 900px로 줄어들었습니다.
    어느 부분의 fouc를 제거해야 이미지 사이즈가 원래대로 돌아오나요?
    새로 쓰는 글에선 이미지 업로드를 할 때 아예 가로 900px로 고정되어버립니다.

  16. 2018.06.11 16:28

    비밀댓글입니다

  17. BlogIcon 미스터지니 2018.06.20 09:11 신고

    배포해주신 소스로 스킨 잘적용했네요. 너무 마음에 드는 스킨입니다.
    그리고 한가지만 여쭤볼께요.
    인용구 부분을 수정할려면 어떻게 해야하나요?
    이전에 fastboot 스킨을 이용할땐 css에서 blockquote 코드에서 수정했는데
    ccz에서는 이 코드가 검색이 안되더라구요.;;

  18. BlogIcon Dinobotottpvr 2018.06.20 16:03 신고

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

  19. BlogIcon Dinobotottpvr 2018.06.20 16:39 신고

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

  20. 2018.07.12 09:42

    비밀댓글입니다

    • BlogIcon 흉내쟁이 2018.08.09 11:20 신고

      적어두었듯이 동영상관련된 부분의 소스를 타인의 소스를 참고한것이 있어서 그부분만 제외하시면 문제될것이 없을겁니다. 제 기본스킨은 마음껏 수정하셔서 사용하셔도 됩니다.

  21. 2018.08.09 07:10

    비밀댓글입니다

티스토리 툴바