티스토리 반응형 스킨 | JB Skin 5 For Tistory V0.1.X

JB Skin 5 For Tistory는 티스토리에 사용할 수 있는 반응형 스킨입니다.

특징

반응형 웹디자인

반응형 웹디자인으로, 웹브라우저의 가로폭이 변하면 레이아웃이 변합니다.

새 치환자 사용

첫페이지와 검색 결과, 관련 글 목록 등을 썸네일과 함께 출력해주는 새 치환자를 사용했습니다. 스크립트로 구현한 것보다 속도가 빠릅니다.

쉬운 애드센스 광고 삽입

본문 상단 오른쪽 등에 반응형 애드센스 광고를 쉽게 넣을 수 있습니다. 또한 본문 중간에 광고를 게재할 수 있는 도구도 포함하고 있습니다. (물론 티스토리에서 제공하는 반응형 애드센스 플러그인으로 광고를 게재할 수 있습니다.)

IE 호환성

IE8 이상을 지원합니다. 단, IE8에서는 고정폭으로 나옵니다. (IE8은 PC용 웹브라우저로, 반응형으로 작동할 필요가 없습니다.)

데모 블로그

데모 블로그 주소는 http://jb-skin-5.tistory.com/입니다.

구입 방법 및 라이센스

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

지원

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

설치

티스토리 스킨 설치는 http://www.cmsfactory.net/node/10244를 참고하세요. 주의할 점은 images 폴더 안의 파일도 모두 업로드해야 한다는 것입니다.

설정

모바일웹 스킨 설정

티스토리 관리자에서 모바일웹 스킨을 Off로 설정합니다.

화면 출력 설정

[화면설정 - 화면출력]으로 이동합니다.

  • 기본화면의 글 개수를 정합니다. 그 개수만큼 첫화면에 글 목록이 나옵니다.
  • 선택 화면에서 글 목록 개수를 정하고, 그 옆을 [목록+내용]으로 정합니다.

티에디션 해제

티에디션을 사용하고 있다면 사용 해제를 해야 첫화면이 반응형으로 제대로 나옵니다. 만약 사용하는 것으로 설정되어 있다면 [화면설정 - 티에디션]에서 사용 해제하세요.

SNS

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

<li><a href="#" title="Facebook"><img src="./images/jb-sns-logo-facebook.png" alt=""></a></li>
<li><a href="#" title="Twitter"><img src="./images/jb-sns-logo-twitter.png" alt=""></a></li>
<li><a href="#" title="Google +"><img src="./images/jb-sns-logo-google-plus.png" alt=""></a></li>
<li><a href="#" title="Kakao Story"><img src="./images/jb-sns-logo-kakaostory.png" alt=""></a></li>
<!-- <li><a href="#" title="Instagram"><img src="./images/jb-sns-logo-instagram.png" alt=""></a></li> -->
<!-- <li><a href="#" title="Pinterest"><img src="./images/jb-sns-logo-pinterest.png" alt=""></a></li> -->
<!-- <li><a href="#" title="Linkedin"><img src="./images/jb-sns-logo-linkedin.png" alt=""></a></li> -->
<li><a href="[##_rss_url_##]" title="RSS"><img src="./images/jb-sns-logo-rss.png" alt=""></a></li>

사용하지 않는 SNS는 삭제하거나 주석처리 하세요. 그리고 #은 자신의 SNS 주소로 변경하세요.

애드센스

사이드바를 이용한 광고 게제

[플러그인 설정]에서 [배너 출력] 플러그인을 활성화합니다.

사이드바 설정으로 가면 다음처럼 '제거하세요'라는 모듈이 있는 곳이 있는데, 그 곳이 광고를 넣을 자리입니다.

[-] 버튼을 클릭해서 제거한 후 광고를 넣으세요. (광고를 안 넣어도 제거하시는 게 좋습니다.)

[HTML 배너출력]을 원하는 곳으로 드래그한 후, [편집]을 클릭하여 반응형 애드센스 광고 코드를 넣습니다.

각 사이드바별 광고 위치는 다음과 같습니다.

  • 사이드바 1
    본문 상단에 광고가 나옵니다.
  • 사이드바 2
    PC에서는 본문 상단 오른쪽에 광고가 나옵니다. 모바일에서는 본문 상단에 광고가 나옵니다.
  • 사이드바 3
    본문 하단에 광고가 나옵니다.
  • 사이드바 4
    페이징 위에 광고가 나옵니다.

본문 중간에 광고 게제

글 작성/수정 화면에서 HTML 모드로 들어간 후, 적당한 곳에 다음의 코드를 넣으면

<div id="jb-adsense-cm"></div>

사이드바 4에 있는 광고가 위 코드가 있는 위치로 이동합니다. (예 : http://jb-skin-5.tistory.com/13)

애드센스 광고를 쉽게 넣을 수 있도록 만든 것일 뿐, 애드센스 정책을 위반하지 않는다는 보장을 하지는 않습니다. 사용자 본인의 책임 하에 활용하셔야 합니다.

반응형 유튜브

수동

유튜브 동영상을 iframe으로 넣을 때, iframe을 다음처럼 div로 한번 감싸면 16:9 비율을 유지하면서 본문 가로 크기에 맞게 영상 크기가 변합니다.

<div class="jb-youtube-16x9">
  <iframe ... > ... </iframe>
</div>

만약 4:3 비율의 영상이라면 다음처럼 합니다.

<div class="jb-youtube-4x3">
  <iframe ... > ... </iframe>
</div>

자동

스킨에는 유튜브 동영상이 있으면 자동으로 16:9 비율을 유지한 채 영상 크기가 본문 가로 크기에 맞게 변하도록 하는 기능을 포함하고 있습니다.

만약 이 기능을 해제하고 싶다면, skin.html에 있는 다음의 코드에서

<div class="jb-page jb-youtube-auto">

jb-youtube-auto를 삭제하세요.

Created on 2016-07-10 01:03 | Updated on 2016-11-09 02:32

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation