티스토리 반응형 스킨 JB SKIN 113 사용설명서

데모 블로그

http://jb-skin-113.tistory.com/

스킨 등록

티스토리 관리자에서 스킨을 등록합니다. (스킨 등록하는 방법)

설정

모바일웹 연결 설정

[꾸미기 – 모바일]에서 티스토리 모바일웹 자동 연결을 [사용하지 않습니다.]로 설정한 후 [변경사항 저장]을 클릭합니다.

화면 출력 설정

[꾸미기 – 설정]으로 이동합니다.

  • 기본 화면에 표시할 글 개수를 정합니다. 첫화면에 그 개수만큼 글이 표시됩니다.
  • 글 목록에 표시할 글 개수를 정합니다. 카테고리, 태그 등을 클릭했을 때 그 개수만큼 글이 표시됩니다.
  • 티에디션을 [사용하지 않습니다.]로 설정합니다.

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

[플러그인 설정]에서 블로그 아이콘 표시 플러그인을 비활성화합니다.

스킨 수정하는 방법

티스토리 강좌 | 스킨 수정하는 방법을 참고하세요.

블로그 이름

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

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

기본 설정은 글자를 사용하는 것입니다.

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

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

이미지 타이틀을 사용할 때 여백을 조정하고 싶다면, CSS에 있는 다음 코드에서 숫자를 적절히 변경하세요.

메뉴

상단 메뉴는 블로그 메뉴가 출력됩니다. 블로그 메뉴는 [꾸미기 – 메뉴]에서 만듭니다.

슬라이더

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

슬라이더 사용하는 방법을 참고하세요.

첫화면에 선택한 카테고리 글 목록 나오게 하기

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

1을 0으로 바꾸면 선택한 카테고리의 글 목록을 첫화면에 출력합니다.

출력할 카테고리 이름을 입력합니다.

카테고리 이름에 띄어쓰기가 있다면 %20을 넣으세요. 예를 들어 카테고리 이름이 하나 둘이라면

처럼 입력합니다.

카테고리별로 출력할 글의 개수입니다.

주의할 점

  • 스크립트로 구현하는 것으로 카테고리를 많이 선택하면 속도가 느려집니다.

최근 글 목록 썸네일

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

1을 0으로 바꾸면 최근 글 목록에 그 글의 대표 이미지가 출력됩니다.

스크립트로 구현하는 것이므로 속도에 영향을 미칩니다.

SNS

SNS – 상단 메뉴, 사이드바

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

적절히 수정하여 사용하세요. 그리고 #은 자신의 SNS 주소로 변경하세요.

상단 메뉴에 있는 SNS 아이콘은 자신의 SNS 계정으로 연결하는 링크입니다. 현재 글을 공유하는 기능이 아닙니다.

SNS – 공유하기

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

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

애드센스

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

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

[꾸미기 – 사이드바]에 다음처럼 애드센스 광고 게재를 위한 사이드바가 있습니다.

광고 위치는 다음과 같습니다.

  • AdSense MT : 767px 이하에서는 나오지 않습니다.
  • AdSense CTR : PC에서는 본문 상단 오른쪽, 모바일에서는 본문 상단에 나옵니다.

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

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

본문 중간에 광고 넣기 1

글 작성/수정 화면에서 HTML 모드로 들어간 후, 적당한 곳에 다음의 코드를 넣으면 사이드바 4에 있는 광고가 위 코드가 있는 위치로 이동합니다.

만약 본문 중간으로 옮긴 모든 광고를 없애려면 HTML에 있는 다음 코드를 삭제하세요. 글을 하나씩 수정할 필요가 없습니다.

구글에서 본문 중간에 넣는 전용 광고를 출시했습니다. 이 방법 보다는 다음 방법을 사용하세요.

본문 중간에 광고 넣기 2

콘텐츠 내 자동 삽입 광고를 만드세요.

광고 코드에서 <ins>…</ins> 부분만 줄바꿈을 없앤 후, HTML에 있는 다음 코드에서 작은 따옴표 안에 있는 코드를 자신의 광고 코드로 바꾸세요.

글 작성/수정 화면에서 HTML 모드로 들어간 후, 적당한 곳에 다음의 코드를 넣으면, 그 자리에 콘텐츠 내 자동 삽입 광고가 나옵니다.

예시 : http://jb-skin-113.tistory.com/40

번호를 바꾸어 총 세 개를 넣을 수 있습니다.

만약 본문 중간에 넣은 광고를 모두 없애고 싶다면 HTML에 있는 다음처럼 생긴 코드를 삭제하세요. 글을 하나씩 수정할 필요가 없습니다.

‘본문 중간에 광고 넣기 1’의 방식으로 삽입한 광고도 콘텐츠 내 자동 삽입 광고가 적용되도록 하고 싶다면

을 다음 코드로 바꾸세요.

반응형 유튜브

수동

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

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

자동

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

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

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

반응형 티스토리 스킨을 찾으시나요?
상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 대표 : 주재범 TEL : 031-388-9261(874) E-MAIL : jb.jbfactory@gmail.com 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 사업자정보공개 호스팅서비스 : NAVER Business Platform 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침