티스토리 뷰


두번째 티스토리 스킨을 배포합니다. 이번 티스토리 스킨은 커뮤니케이션에 특화된 버전으로 본문 우측에 항상 댓글을 볼 수 있게 했으며 해시태그를 이용하여 간단한 분류기능도 추가하였습니다.

데모 사이트

데모사이트는 블로그의 전 기능이 동작하지 않습니다. 다만 화면의 생김새를 볼 수 있도록만 구현되어 있습니다.
실제 모든 기능은 블로그에 적용을 해야 합니다.
티스토리 스킨 커뮤니케이터 2016 데모보기

배포버전

가격

기본 무료로 배포합니다. ( 다운로드는 배포버전을 클릭하면 됩니다. )
다만 유료로 구매를 하시면 스킨의 하단에 기록되어 있는 CopyrightDesign 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에서 제공하는 아이콘을 사용합니다.
  1. kindchangeadd 2가지가 있으며 change일 경우 텍스트메뉴를 없애고 아이콘만 표시되고 add로 작성할 경우 텍스트메뉴명 앞에 아이콘이 나오게 됩니다.
  2. topmenu_icon'번호' : '아이콘명'을 확인 후 아이콘명xeicon에서 찾으신 아이콘명을 입력하시면 됩니다.
/****************************************************************
****************************************************************/
"kind": "change",
"topmenu_icon": {
    "1": "xi-tags",
    "2": "xi-pen",
    "3": "xi-cog"
},

서브메뉴 아이콘 설정

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

  • 서브메뉴의 아이콘도 역시 xeicon을 활용합니다.
  1. 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>


댓글