UX공작소에서 첫번째 티스토리 스킨 베타버전을 배포합니다.
※ v2.0으로 스킨의 기본 CSS프레임워크를 Bootstrap3.0으로 변경하였습니다.
데모 사이트
데모사이트는 블로그의 전 기능이 동작하지 않습니다. 다만 화면의 생김새를 볼 수 있도록만 구현되어 있습니다.
실제 모든 기능은 블로그에 적용을 해야 합니다.
티스토리 스킨 2016 기본 데모보기
베포버전
- 2016-06-13 배포 : uxgjs_skin_tistory_basic_2016_v2.0.0
- 2016-06-01 배포 : uxgjs_skin_tistory_basic_2016_v1.0.0
특징
- skin_cfg.js 파일을 통해 쉽게 스킨을 설정 할 수 있습니다.
- 반응형 디자인으로 제작되어 다양한 디바이스에서 최적화된 화면을 보여 줍니다.
- 크롬, 파이어폭스, 사파리 등 다양한 브라우저와 IE9 이상의 최신 버전에서 정상 동작 합니다.
기능
- skin_cfg.js의 설정으로 컨텐츠영역의 넓이를 수정할 수 있습니다.
- skin_cfg.js의 설정으로 서브메뉴 아이콘을 지정할 수 있습니다.
- skin_cfg.js의 설정으로 개인 SNS를 아이콘과 함께 적용할 수 있습니다.
- skin_cfg.js의 설정으로 웹사이트 분석도구인 구글 애널리스틱을 연결 할 수 있습니다.
가격
무료 입니다.
지원안내
- 스킨의 오류에 대해서는 최대한 빠른 시간에 수정을 한 후 새로운 버전을 배포할 것입니다.
- 오류가 아닌 기능추가 등의 수정요청에 대해서는 공식적으로 지원하지는 않습니다. 다만 공통적으로 필요한 기능일 경우 차후 버전이나 스킨에서 추가 하도록 하겠습니다.
- 스킨에 대한 문의는 해당 스킨의 배포글의 댓글을 통해 문의를 주시면 됩니다.
- 필요할 경우 비밀글로 작성해 주세요.
- 본 스킨은 IE10 이상 버전을 지원합니다.
라이선스
- 해당 스킨은 무료로 배포되는 버전입니다.
- 해당 스킨을 그대로 사용하거나 수정/변경하여 본인의 티스토리 계정에 사용은 가능하나 판매 및 재배포는 불가합니다.
적용방법
티스토리의 기본 스킨 적용방식은 티스토리의 skin 설치 및 설정를 참조하시면 됩니다.
아래의 적용방법은 본 스킨에만 해당하는 내용입니다.
최대화면 넓이 설정
반응형으로 레이아웃이 적용되지만 최대화면에서의 넓이를 임의로 지정할 수 있습니다.
- 제공되는 압축파일을 열어
skin_cfg.js
파일을 메모장이나 editor프로그램으로 엽니다. - 내용 중
content_width
의 넓이값을 px단위로 입력을 합니다. 넓이값이 없는경우는 기본형으로 반응합니다.(최대넓이 1024px) skin_cfg.js
를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.
메인메뉴 아이콘 설정
메인메뉴는 상단의 메인메뉴에 아이콘을 지정할 수 있습니다. 기본으로는 아이콘이 없는 단순 텍스트 메뉴만 보여집니다.
그냥 텍스트 메뉴로만 나와도 문제는 없이 사용할 수 있습니다. 다만 디자인적으로 좀 더 꾸미고 싶은 사용자를 위해 제공되는 기능입니다.
아이콘과 텍스트를 같이 나오게 할 수도 있고 아이콘만 나오게 할 수도 있습니다.
- 서브메뉴의 아이콘은 xeicon을 활용합니다.
- 제공되는 압축파일을 열어
skin_cfg.js
파일을 메모장이나 editor프로그램으로 엽니다. - 내용중
kind
를change
로 작성할 경우 텍스트메뉴를 지우고 아이콘만 표시됩니다.add
로 작성할 경우는 텍스트메뉴명 앞에 아이콘이 나오게 됩니다. 내용 중
topmenu_icon
다음줄에 있는 ‘번호’ : ‘아이콘명’을 확인후 수정을 하면 됩니다.- 그림의
4
의 예제를 참고하여5
에 넣으시면6
처럼 표시가 됩니다. - 번호는 순차적으로 적어주시면 되고 아이콘명은 xeicon에서 원하는 아이콘의 이름을 기록하면 됩니다.
- 실제 서브메뉴 보다 갯수가 적으면 적은 만큼만 아이콘이 노출되고 많으면 실제 서브메뉴 만큼만 아이콘이 노출됩니다.
- 그림의
skin_cfg.js
를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.
서브메뉴 아이콘 설정
서브메뉴는 우측에 서브메뉴 버튼을 누르면 보여지는 메뉴를 말합니다. 기본으로는 아이콘이 없는 단순 텍스트 메뉴만 보여집니다.
그냥 텍스트 메뉴로만 나와도 문제는 없이 사용할 수 있습니다. 다만 디자인적으로 좀 더 꾸미고 싶은 사용자를 위해 제공되는 기능입니다.
- 서브메뉴의 아이콘은 xeicon을 활용합니다.
- 제공되는 압축파일을 열어
skin_cfg.js
파일을 메모장이나 editor프로그램으로 엽니다. 내용 중
sidebar_icon
다음줄에 있는 ‘번호’ : ‘아이콘명’을 확인후 수정을 하면 됩니다.- 그림의
7
의 예제를 참고하여8
에 넣으시면9
처럼 표시가 됩니다. - 번호는 순차적으로 적어주시면 되고 아이콘명은 xeicon에서 원하는 아이콘의 이름을 기록하면 됩니다.
- 실제 서브메뉴 보다 갯수가 적으면 적은 만큼만 아이콘이 노출되고 많으면 실제 서브메뉴 만큼만 아이콘이 노출됩니다.
- 그림의
skin_cfg.js
를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.
SNS 설정
SNS는 자신이 가입되어 있는 SNS를 개인 프로필 영역에 연결을 시켜주는 기능입니다.
기본적으로 Facebook
, Twitter
, google plus
, kakaostory
만 연결을 할 수 있으며 필요 시 더 추가할 예정으로 있습니다.
- 제공되는 압축파일을 열어
skin_cfg.js
파일을 메모장이나 editor프로그램으로 엽니다. - 내용 중
sns
다음줄에 있는 ‘SNS명’ : ‘SNS ID’을 확인후 수정을 하면 됩니다.- 그림의
10
의 예제를 참고하여11
에 넣으시면12
처럼 표시가 됩니다. - 각 SNS에 가입되어 있는 ID를 확인하여 기록하시면 됩니다.
- 그림의
skin_cfg.js
를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.
구글 Analytics 연결 설정
구글 Analytics은 웹사이트(블로그)을 분석하고 통계를 내 주는 구글의 무료 분석툴입니다.
자신의 블로그를 어느 나라에서 어떤 경로로 몇명이 왔으며 어떤 내용을 주로 봤는지 등의 내용을 분석해 줍니다.
- 제공되는 압축파일을 열어
skin_cfg.js
파일을 메모장이나 editor프로그램으로 엽니다. - 내용 중
google_analytics
다음칸에추척아이디
를 확인후 수정을 하면 됩니다.- 그림의
13
의 예제를 참고하여14
에 넣으시면15
처럼 표시가 됩니다. - 구글 Analytics에 가입하고 계정을 생성하고 속성을 설정하면
추적아이디
가 생성이 됩니다 그 추적아이디를 확인하여 기록하시면 됩니다.
- 그림의
skin_cfg.js
를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.
-
2016.06.14 08:55 신고
-
예쁘네요2016.06.14 18:50 신고
-
관심주셔서 감사합니다 ^^
혹시 쓰시다가 문제가 있으면 알려주세요. 수정해서 다시 올릴게요.2016.06.14 18:52 신고 -
대박이구만..2016.06.15 12:25 신고
-
감사합니다. ^^2016.06.15 12:28 신고
-
정말 좋은 스킨 이예요~2016.06.16 20:56 신고
-
관심주셔서 감사합니다. ㅎ2016.06.17 06:12 신고
-
ABC Mark
너무 마음에 듭니다.. 잘 사용할게요!!!2016.06.17 01:29 신고 -
감사합니다.
사용하시다 혹시 오류나 개선여지가 있으면 알려주세요. ^^2016.06.17 06:14 신고 -
비밀댓글입니다
-
네.. 공부하신다는데.. 가져다 쓰세요 ^^
본문에 있는 1차 배포버전을 다운받아서 쓰셔도 됩니다. 현재 스킨과 동일합니다2016.06.20 18:52 신고 -
안녕하세요 ^^
제가 질문을 정확히 이해했는지는 모르겠는데... 목록만 나오게 하려면...
관리자페이지의 CSS수정에서 아래와 같이 아래부분에 덧붙히면 될것 같습니다. 다만... 기능적으로 빼는것이 아니라 화면에서만 가리는 것이라서 이에 따른 다른문제가 생길수도 있으므로 잘 살펴보시구요..
.list_wrap .list_content .link_post .txt_post { display:none !important }2016.07.03 10:19 신고 -
ㅊㄹㅇㅎㅊㄾㅊㄹ2016.07.27 13:10 신고
-
ㅌㅊㅍㅌㅊㅍ2016.07.27 13:10 신고
-
ㅌㅊㅍㅌㅊㅍㅌㅊㅍ2016.07.27 13:10 신고
-
우왕
##문의## 티스토리 로그인했는데도 비회원으로뜨네..ㅋㅋㅋㅋㅋ2016.08.28 14:32 신고 -
그런가요.. 제가 테스트를 해봤는데.. 어디에서 비회원으로 뜨는지 찾지를 못하겠습니다.
오류가 나는 부분에 대해 좀더 자세히 알려주시거나 스크린캡쳐를 받아 주시면 개선을 하도록 하겠습니다.
감사합니다.2016.08.28 18:22 신고 -
네.. 사람 일이라 장담은 못하겠지만...
일단은 그대로 유지할것 같습니다. ㅎ2016.09.09 20:40 신고 -
비밀댓글이라 보이지가 않네요;2016.09.10 12:02 신고
-
비밀글해제했어요^^2016.09.10 12:41 신고
-
답변 감사합니다 :)2016.09.10 20:36 신고
-
제목 부분에 명조체가 마음에 들지 않아서 나눔고딕(Nanum Gothic)으로 변경하려고 하는데 어떻게 해야하나용?2017.12.09 12:53 신고

차후 지속적으로 업데이트 예정입니다.
감사합니다.