티스토리 반응형 스킨 | JB Album

판매 중지된 스킨입니다.

JB Album은 티스토리 블로그용 스킨으로 현재 버전은 0.1.0입니다.

  • 특징
  • 데모사이트
  • 설치
  • 설정
  • 스킨 옵션
  • SNS
  • 슬라이더 사용법
  • 2차 주소 사용시 추가할 코드
  • 구입 안내
  • 지원

특징

JB Album의 특징은 다음과 같습니다.

  • 반응형 웹디자인
    웹브라우저 가로폭에 따라 레이아웃이 변하여 모바일 기기에서의 가독성이 높습니다.
  • 드롭다운 메뉴
    블로그 메뉴와 카테고리를 합하여 상단에 메뉴를 만듭니다. 상위 카테고리에 마우스를 올리면 하위 카테고리가 나옵니다.
  • 슬라이더
    슬라이더를 넣을 수 있습니다.
  • 검색 결과에 썸네일 출력
    카테고리를 선택하거 검색을 했을 때의 글 목록에 썸네일을 출력합니다.
  • IE 웹브라우저 지원
    IE8 이상을 지원합니다. 단, IE8에서는 고정폭으로 나옵니다.

데모사이트

데모사이트는 http://jb-album.tistory.com/입니다.

설치

티스토리 스킨 설치는 http://www.cmsfactory.net/node/10244를 참고하세요.

주의할 점은 images 폴더 안의 파일도 모두 업로드해야 한다는 것입니다.

설정

반응형 스킨이므로 모바일웹 스킨을 Off로 설정합니다.

스킨 옵션

skin.html에 스킨 옵션(Skin Options)이 있습니다.

var jbUseFrontpageRecentPosts = 1;      // Yes -> 0, No -> 1

첫화면에 최신 글 목록을 출력할지 정합니다. 0이면 출력하고 1이면 출력하지 않습니다.

요약글을 사용할 경우 다음과 같이 설정하세요.

  • jbUseFrontpageRecentPosts의 값을 1로 설정하세요.
  • [화면 설정 - 티에디션]을 [사용하기]로 설정한 후 첫화면에 하나의 구성요소만 넣으세요. 더 넣어도 첫화면은 잘 나오지만, 적을수록 속도가 빠릅니다.
  • jbUseFrontpageRecentPosts의 값을 0으로 설정하세요.

참고로, 첫화면은 RSS의 내용을 가져와서 출력하며, 반응형 티에디션은 지원하지 않습니다.

var jbFrontpageRecentPostsTitle = 'New Photos';

첫화면 최신글 목록 위에 들어갈 제목을 입력합니다.

var jbFrontpageRecentPostsCount = 4;

첫화면에 출력할 글의 개수를 정합니다.

var jbThumbRatio = 0;                   // 0 -> 128:53, 1 -> 16:9

검색 결과 등에 표시될 썸네일의 가로 세로 비율을 정합니다.

SNS

skin.html에 다음과 같은 코드가 있습니다.

<li class="jb-sns jb-sns-twitter"><a href="#"><i class="fa fa-twitter fa-fw"></i></a></li>
<li class="jb-sns jb-sns-facebook"><a href="#"><i class="fa fa-facebook fa-fw"></i></a></li>
<li class="jb-sns jb-sns-google-plus"><a href="#"><i class="fa fa-google-plus fa-fw"></i></a></li>
<li class="jb-sns jb-sns-rss"><a href="[##_rss_url_##]"><i class="fa fa-rss fa-fw"></i></a></li>

# 대신에 SNS 주소를 입력하시고, 필요 없는 SNS는 삭제하거나 주석처리하면 됩니다.

슬라이더 사용법

skin.html에 다음과 같은 코드가 있습니다. (빨간색 코드는 없습니다.)

<ol class="carousel-indicators">
  <li data-target="#jb-slider-1" data-slide-to="0" class="active"></li>
  <li data-target="#jb-slider-1" data-slide-to="1"></li>
  <li data-target="#jb-slider-1" data-slide-to="2"></li>  
  <li data-target="#jb-slider-1" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="./images/img-01.png">
    <div class="carousel-caption">
      <h2>Lorem</h2>
      <p class="hidden-xs">Lorem ipsum dolor sit amet. Consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="item">
    <img src="./images/img-02.png">
    <div class="carousel-caption">
      <h2>Ipsum</h2>
      <p class="hidden-xs">Lorem ipsum dolor sit amet. Consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="item">
    <img src="./images/img-03.png">
    <div class="carousel-caption">
      <h2>Dolor</h2>
      <p class="hidden-xs">Lorem ipsum dolor sit amet. Consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="item">
    <img src="./images/img-04.png">
      <div class="carousel-caption">
      <h2>Dolor</h2>
      <p class="hidden-xs">Lorem ipsum dolor sit amet. Consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

파란색 부분이 슬라이더에 출력되는 내용입니다. 이미지는 배경으로 들어갑니다. (class 값에 hidden-xs를 추가하면 스마트폰에서 출력되지 않습니다.)

HTML/CSS 편집의 [파일업로드]로 이미지를 올렸다면, 이미지 이름 앞에 ./images/를 붙인게 이미지 경로입니다.

슬라이더를 추가하고 싶으면 빨간색 코드를 추가하면 됩니다. 반대로 코드를 삭제하여 슬라이더를 줄이는 것도 가능합니다.

2차 주소 사용시 추가할 코드

2차 주소를 사용한다면 http://www.cmsfactory.net/node/11660의 안내대로 몇 줄의 코드를 추가하는 것이 좋습니다.

구입 안내

JB Album은 유료 스킨입니다.

구입 방법 및 라이센스 안내는 http://www.cmsfactory.net/node/10694에 있습니다.

지원

질문은 게시판에 남겨주세요.

단, 오류가 아닌 스킨 수정에 대한 지원은 공식적으로 하지 않습니다. 하지만 간단하게 해결할 수 있는 수정은 최대한 답변해 드립니다.

Created on 2015-05-22 02:34 | Updated on 2017-04-09 01:00

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation