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 설치 및 설정를 참조하시면 됩니다.
아래의 적용방법은 본 스킨에만 해당하는 내용입니다.

최대화면 넓이 설정

반응형으로 레이아웃이 적용되지만 최대화면에서의 넓이를 임의로 지정할 수 있습니다.

1. 제공되는 압축파일을 열어 skin_cfg.js파일을 메모장이나 editor프로그램으로 엽니다.
2. 내용 중 content_width 의 넓이값을 px단위로 입력을 합니다. 넓이값이 없는경우는 기본형으로 반응합니다.(최대넓이 1024px)
3. skin_cfg.js를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.

메인메뉴 아이콘 설정

메인메뉴는 상단의 메인메뉴에 아이콘을 지정할 수 있습니다. 기본으로는 아이콘이 없는 단순 텍스트 메뉴만 보여집니다.
그냥 텍스트 메뉴로만 나와도 문제는 없이 사용할 수 있습니다. 다만 디자인적으로 좀 더 꾸미고 싶은 사용자를 위해 제공되는 기능입니다.
아이콘과 텍스트를 같이 나오게 할 수도 있고 아이콘만 나오게 할 수도 있습니다.

• 서브메뉴의 아이콘은 xeicon을 활용합니다.

1. 제공되는 압축파일을 열어 skin_cfg.js파일을 메모장이나 editor프로그램으로 엽니다.
2. 내용중 kind를 change로 작성할 경우 텍스트메뉴를 지우고 아이콘만 표시됩니다. add로 작성할 경우는 텍스트메뉴명 앞에 아이콘이 나오게 됩니다.

3. 내용 중 topmenu_icon 다음줄에 있는 ‘번호’ : ‘아이콘명’을 확인후 수정을 하면 됩니다.

   • 그림의 4의 예제를 참고하여 5에 넣으시면 6처럼 표시가 됩니다.
   • 번호는 순차적으로 적어주시면 되고 아이콘명은 xeicon에서 원하는 아이콘의 이름을 기록하면 됩니다.
   • 실제 서브메뉴 보다 갯수가 적으면 적은 만큼만 아이콘이 노출되고 많으면 실제 서브메뉴 만큼만 아이콘이 노출됩니다.
     

4. skin_cfg.js를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.
   

서브메뉴 아이콘 설정

서브메뉴는 우측에 서브메뉴 버튼을 누르면 보여지는 메뉴를 말합니다. 기본으로는 아이콘이 없는 단순 텍스트 메뉴만 보여집니다.
그냥 텍스트 메뉴로만 나와도 문제는 없이 사용할 수 있습니다. 다만 디자인적으로 좀 더 꾸미고 싶은 사용자를 위해 제공되는 기능입니다.

• 서브메뉴의 아이콘은 xeicon을 활용합니다.

1. 제공되는 압축파일을 열어 skin_cfg.js파일을 메모장이나 editor프로그램으로 엽니다.

2. 내용 중 sidebar_icon 다음줄에 있는 ‘번호’ : ‘아이콘명’을 확인후 수정을 하면 됩니다.

   • 그림의 7의 예제를 참고하여 8에 넣으시면 9처럼 표시가 됩니다.
   • 번호는 순차적으로 적어주시면 되고 아이콘명은 xeicon에서 원하는 아이콘의 이름을 기록하면 됩니다.
   • 실제 서브메뉴 보다 갯수가 적으면 적은 만큼만 아이콘이 노출되고 많으면 실제 서브메뉴 만큼만 아이콘이 노출됩니다.
     

3. skin_cfg.js를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.
   

SNS 설정

SNS는 자신이 가입되어 있는 SNS를 개인 프로필 영역에 연결을 시켜주는 기능입니다.
기본적으로 Facebook, Twitter, google plus, kakaostory만 연결을 할 수 있으며 필요 시 더 추가할 예정으로 있습니다.

1. 제공되는 압축파일을 열어 skin_cfg.js파일을 메모장이나 editor프로그램으로 엽니다.
2. 내용 중 sns 다음줄에 있는 ‘SNS명’ : ‘SNS ID’을 확인후 수정을 하면 됩니다.
   • 그림의 10의 예제를 참고하여 11에 넣으시면 12처럼 표시가 됩니다.
   • 각 SNS에 가입되어 있는 ID를 확인하여 기록하시면 됩니다.
3. skin_cfg.js를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.

구글 Analytics 연결 설정

구글 Analytics은 웹사이트(블로그)을 분석하고 통계를 내 주는 구글의 무료 분석툴입니다.
자신의 블로그를 어느 나라에서 어떤 경로로 몇명이 왔으며 어떤 내용을 주로 봤는지 등의 내용을 분석해 줍니다.

1. 제공되는 압축파일을 열어 skin_cfg.js파일을 메모장이나 editor프로그램으로 엽니다.
2. 내용 중 google_analytics 다음칸에 추척아이디를 확인후 수정을 하면 됩니다.
   • 그림의 13의 예제를 참고하여 14에 넣으시면 15처럼 표시가 됩니다.
   • 구글 Analytics에 가입하고 계정을 생성하고 속성을 설정하면 추적아이디가 생성이 됩니다 그 추적아이디를 확인하여 기록하시면 됩니다.
3. skin_cfg.js를 저장 후 티스토리 스킨 파일업로드를 통해 업로드를 하면 됩니다.