티스토리 반응형 스킨 | JB Skin 127

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

특징

반응형 웹디자인

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

슬라이더

슬라이더 기능을 포함하고 있습니다. 첫화면에만 출력되며, 스킨 옵션에서 사용 여부를 설정할 수 있습니다.

쉬운 애드센스 광고 삽입

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

IE 호환성

IE9 이상에서는 반응형으로 작동합니다.

IE8에서는 고정폭으로 나옵니다. (IE의 요소 검사 기능으로 확인한 것으로, Windows XP에서 IE8로 접속하면 다르게 보일 수도 있습니다.)

데모 블로그

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

구입 방법 및 라이센스

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

지원

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

설치

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

설정

모바일웹 스킨 설정

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

화면 출력 설정

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

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

티에디션 해제

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

블로그 아이콘 표시 플러그인 활성화

[플러그인 설정]에서 블로그 아이콘 표시 플러그인을 활성화합니다. 크기는 64x64를 선택하세요.

블로그 이름

왼쪽 위의 블로그 이름은 글자로 나오게 하거나 이미지로 나타낼 수 있습니다.

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

<h1 class="jb-site-title"><a href="[##_blog_link_##]">[##_title_##]</a></h1>
<!--<h1 class="jb-site-title-image"><a href="[##_blog_link_##]"><img src="./images/jb-logo-skin-127.png" alt=""></a></h1>-->

블로그 이름을 이미지로 나타내고 싶으면

<!--<h1 class="jb-site-title"><a href="[##_blog_link_##]">[##_title_##]</a></h1>-->
<h1 class="jb-site-title-image"><a href="[##_blog_link_##]"><img src="./images/jb-logo-skin-127.png" alt=""></a></h1>

처럼 수정합니다. 이미지는 스킨의 images 폴더에 있는 jb-logo-skin-127.png 파일을 참고하여 만드시면 됩니다.

슬라이더

슬라이더를 사용하는 것으로 설정하면 첫화면에 슬라이더가 출력됩니다.

슬라이더 사용법은 http://www.cmsfactory.net/node/20466에 있습니다.

SNS

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 아이콘은 자신의 SNS 계정으로 연결하는 링크입니다. 현재 글을 공유하는 기능이 아닙니다.

SNS - 공유하기

본문 밑에 현재 포스트를 SNS에 공유하는 기능을 포함하고 있습니다.

사용하고 싶지 않다면 [사이드바 설정]에서 SNS Share 모듈을 제거합니다.

애드센스

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

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

사이드바 설정으로 가면 다음처럼 애드센스 광고 게재를 위한 사이드바가 있습니다.

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

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

AdSense CT, AdSense CTR, AdSense CB 모듈은 빈 모듈입니다. [-] 버튼을 클릭해서 제거한 후 광고를 넣으세요. (광고를 안 넣어도 제거하시는 게 좋습니다.)

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

본문 중간에 광고 게제

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

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

사이드바 3에 있는 광고가 위 코드가 있는 위치로 이동합니다.

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

특히 드롭다운 메뉴가 광고를 가리지 않도록 해야 합니다.

반응형 유튜브

수동

유튜브 동영상을 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 2017-04-08 23:06 | Updated on 2017-04-16 17:59

티스토리 스킨 by CMS Factory

Book navigation