두번째 티스토리 스킨을 배포합니다. 이번 티스토리 스킨은 커뮤니케이션에 특화된 버전으로 본문 우측에 항상 댓글을 볼 수 있게 했으며 해시태그를 이용하여 간단한 분류기능도 추가하였습니다.
데모 사이트
데모사이트는 블로그의 전 기능이 동작하지 않습니다. 다만 화면의 생김새를 볼 수 있도록만 구현되어 있습니다.
실제 모든 기능은 블로그에 적용을 해야 합니다.
티스토리 스킨 커뮤니케이터 2016 데모보기
배포버전
- [ 2016-07-11 배포 : uxgjs_skin_tistory_communicator_2016_v1.0.0 ]
가격
기본 무료로 배포합니다. ( 다운로드는 배포버전을 클릭하면 됩니다. )
다만 유료로 구매를 하시면 스킨의 하단에 기록되어 있는 Copyright와 Design by UX공작소를 수정/삭제할 수 있습니다.
기본 무료배포
유료구매 가격 : 30,000원
특징
- skin.html의
<head>영역에skin_cfg변수를 설정할 수 있게 하였습니다. - 반응형 디자인으로 제작되어 다양한 디바이스에서 최적화된 화면을 보여 줍니다.
- 크롬, 파이어폭스, 사파리, IE9 이상의 버전에서 정상 동작 합니다.
기능
- 컨텐츠영역의 넓이 설정 가능
- Top 메뉴 아이콘 지정 가능
- Sidebar 메뉴 아이콘 지정 가능
- 개인 SNS를 아이콘과 함께 적용 가능
- 해시테그를 이용한 댓글 분류 기능
- 4가지 색상테마 가능
공통 적용방법
티스토리의 기본 스킨 적용방식은 티스토리의 skin 설치 및 설정를 참조하시면 됩니다.
아래의 스킨 적용방법은 본 스킨에만 해당하는 내용입니다.
스킨 적용방법
uxgjs_skin_tistory_communicator_2016스킨의 적용방법은 아래와 같습니다.
설정값은 <html>의 <head>영역에 있는 javascript skin_cfg에 정의되어 있습니다.
<html class="no-js" lang="">
<head>
<script>
var skin_cfg = { ... };
</script>
</head>
<body>
</body>
</html>
최대화면 넓이 설정
반응형으로 레이아웃이 적용되지만 최대화면에서의 넓이를 임의로 지정할 수 있습니다.content_width값을 예제를 참고해서 px단위로 숫자로만 지정을 하면 됩니다.
넓이값이 없는 경우는 기본형으로 반응합니다.(최대넓이 1024px)
/****************************************************************
****************************************************************/
"content_width": "",
메인메뉴 아이콘 설정
메인메뉴는 상단의 메인메뉴에 아이콘을 지정할 수 있습니다. 기본으로는 아이콘이 없는 단순 텍스트 메뉴만 보여집니다.
그냥 텍스트 메뉴로만 나와도 문제는 없이 사용할 수 있습니다. 다만 디자인적으로 좀 더 꾸미고 싶은 사용자를 위해 제공되는 기능입니다.
아이콘과 텍스트를 같이 나오게 할 수도 있고 아이콘만 나오게 할 수도 있습니다.
- 매인메뉴의 아이콘은 xeicon에서 제공하는 아이콘을 사용합니다.
kind는change와add2가지가 있으며change일 경우 텍스트메뉴를 없애고 아이콘만 표시되고add로 작성할 경우 텍스트메뉴명 앞에 아이콘이 나오게 됩니다.topmenu_icon의'번호':'아이콘명'을 확인 후아이콘명에 xeicon에서 찾으신 아이콘명을 입력하시면 됩니다.
/****************************************************************
****************************************************************/
"kind": "change",
"topmenu_icon": {
"1": "xi-tags",
"2": "xi-pen",
"3": "xi-cog"
},
서브메뉴 아이콘 설정
서브메뉴는 우측에 서브메뉴 버튼을 누르면 보여지는 메뉴를 말합니다. 기본적으로 아이콘이 없는 단순 텍스트 메뉴만 보여집니다.
단순 텍스트 메뉴로만 나와도 문제 없이 사용할 수 있습니다. 다만 디자인적으로 좀 더 꾸미고 싶은 사용자를 위해 제공되는 기능입니다.
- 서브메뉴의 아이콘도 역시 xeicon을 활용합니다.
sidebar_icon의'번호':'아이콘명'을 확인 후아이콘명에 xeicon에서 찾으신 아이콘명을 입력하시면 됩니다.
/****************************************************************
****************************************************************/
"sidebar_icon": {
"1": "xi-palette",
"2": "xi-gift-o",
"3": "xi-share-alt-o",
"4": "xi-puzzle"
},
댓글 분류 태그
댓글의 글 종류를 분리하기위해 해시태그를 이용하여 간단한 분류기능을 적용하였습니다.
분류의 구분을 '번호' : '분류명'으로 작성을 하면 됩니다. 너무 많은 분류를 작성할 경우 레이아웃이 벗어날 수 있으므로 적당한 수량으로 구분하셔야 합니다.
/****************************************************************
****************************************************************/
"comment_kind": {
"1": "문의",
"2": "A/S",
"3": "구매"
}
스킨 색상 적용 방법
스킨의 색상을 파랑, 빨강, 초록, 노랑의 4가지로 적용할 수 있습니다.
배포되는 파일 중 style.css를 적용하면 기본 색상으로 적용이 되며
images폴더 안에 있는 style_blue.css를 적용할 경우는 파랑, style_red.css를 적용할 경우는 빨강, style_green.css을 적용할 경우는 초록, style_yellow.css를 적용할 경우는 노랑색의 색상테마가 적용됩니다.
images -- style_blue.css : 파랑
- style_red.css : 빨강
- style_green.css : 초록
- style_yellow.css : 노랑
적용방법은 관리자 화면의 스킨편집에서 “HTML”텝을 선택하시고 영역의 아래부분에 있는 <link rel="stylesheet" href="./style.css">를 <link rel="stylesheet" href="./images/style_blue.css"> 로
원하는 CSS로 교체를 하면 됩니다.
참고로 색상에 대한 CSS파일은 images폴더에 있기떄문에 경로를 이미지폴더까지 포함을 시켜야 합니다. (./images/style_blue.css)
아래의 예제를 참조하세요.
<head>
<meta charset="utf-8">
<title>[##_page_title_##] :: [##_title_##]</title>
<meta name="title" content="[##_page_title_##] :: [##_title_##]">
<meta name="description" Content="[##_desc_##]">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]">
<script>
var skin_cfg = {
....
};
</script>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css">
<link rel="stylesheet" href="./images/vendor.css">
<!--<link rel="stylesheet" href="./style.css">-->
<link rel="stylesheet" href="./images/style_blue.css">
</head>
- 이전 댓글 더보기
-
ㅁㄴ2016.12.13 23:18 신고
-
##문의## ㅇㅇ2016.12.13 23:18 신고
-
##문의## ㅇㅇ2016.12.13 23:18 신고
-
론큐 ##구매## 구매자인데 왜 무료화죠? ㅡㅡ -
론큐님.. 죄송하네요.
사실상 폐업입니다. 벌이가 않되니 관리도 않되고.. 17년도에는 그냥 마음을 비우고자 무료화 했습니다.
2017.01.09 15:43 신고 -
무료이용자 댕꿀 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ -
ㅂㅈㄷ2017.01.09 23:37 신고
-
ㅜㅜ 너무슬프네요..ㅜㅜ2017.01.10 16:56 신고
-
그래도 많이 이쁜스킨입니다 !2017.01.10 16:56 신고
-
이해해 주셔서 감사합니다. ^^2017.01.10 17:06 신고
-
다른가요? 거의 동일할텐데요.
더이상 버전업을 하지 않았거든요2017.01.11 13:31 신고 -
혹시 몰라 파일을 다시 변경해서 올려 놨습니다.
다시 다운 받아서 해 보세요2017.01.11 14:07 신고 -
잘 되신다니 다행이네요.. ^^
SC제일은행 100-20-546246 조성준 입니다.
(지금 답변은 3일정도 이후에 삭제할 예정입니다. ^^)2017.01.11 21:14 신고 -
네.. 감사합니다..
더이상 스킨개발을 포기하려고 했는데..
덕분에 용기가 생겼습니다.
모두가 공짜를 바라는것은 아니라는 것을 알게됐어요.
그래서 구매방법을 조금 변경하려고 합니다. 기본 무료배포를 유지하고 원하시는 분만 수고비를 받을 수 있게 해 볼까합니다.
그러면 저도 계속 개발 의욕이 생길것 같네요 ^^
저도 도움이 많이 됐습니다.
감사합니다2017.01.11 22:46 신고 -
chess 멋지네요^^ -
좋게 봐주셔서 감사합니다. ^^2017.01.13 08:13 신고
-
안녕하세요 ^^
색상 변경에 대한 부분은 글 내용하단부분에 설명을 좀더 자세히 달아놨습니다.
프로필사진은 로그인을 한 회원이 작성 한 글에는 표시가 될텐데요..
그이유는 잘 모르겠네요.2017.01.13 08:32 신고 -
구매 ##구매## -
순간 설래였어요.~ ^.,^2017.01.18 18:21 신고
-
또 다른 스킨을 대단히 기대하고 있습니다.
개발자님 화이팅~!2017.09.19 03:28 신고 -
123123 테스트
