By aPOST in 티스토리스킨 — 2023년 12월 23일

티스토리 스킨 - 117 반응형 2단 심플리트3 버전2 스킨 배포합니다.

----------------------------------------------------------------------

2021.06.02

기능이 대폭 개선된 버전 3이 배포되고 있습니다.

버전3를 이용하시기 바랍니다.

> 티스토리 반응형 스킨 117 - 반응형 2단 심플리트3 버전3 배포합니다.

----------------------------------------------------------------------

117 반응형 2단 심플리트3 스킨의 2021년 개선판 버전2 입니다.

외양은 버전 1과 유사한 디자인이지만 내부 구조는 버전1과 호환되지 않습니다.

티스토리 애드센스가 기본 지원되며, 버전2는 인터넷 익스플로러를 지원하지 않습니다.

인터넷 익스플로러는 2021년 8월부터 보안 업데이트 지원이 중단되며, 사용이 차단됩니다.

검색엔진 최적화를 위해 속도 최적화에 초점을 맞춰 제작된 스킨이며, 티스토리 모든 스킨 중 가장 빠른 페이지 로딩 속도를 보장합니다. 기존 버전 스킨 대비 약 2배 정도 빠른 블로그 페이지 로딩 속도를 냅니다.

▶ 스킨 적용전 주의사항

인터넷 익스플로러는 더 이상 지원하지 않습니다. 인터넷 익스플로러 지원이 필요하면 심플리트3 버전1 구버전을 사용해야 합니다.
스킨 소스 상단과 스킨 적용화면 하단에 표시되는 저작권 표시 삭제를 금지합니다.
스킨의 개별 커스터마이징 요청은 받지 않습니다.
스킨 적용전 기존 사용하던 스킨을 백업하시기 바랍니다.
반응형 스킨은 티스토리 모바일 꾸미기를 꺼야 합니다. 티스토리 관리자 화면 메뉴 꾸미기 > 모바일에서 티스토리 모바일웹 자동 연결을 "사용하지 않습니다" 로 설정해야 합니다.

▶ 스킨 주요 특징

특징요약

바닐라 자바스크립트만으로 스크립트 기능 구현
스킨 내장 아이콘 폰트로 아이콘 사용
티스토리 애드센스 전체 지원
60여가지의 강력한 스킨 커스터마이징 설정 옵션
기존 버전 대비 2배 빨라진 페이지 로딩 속도
최소 크기로 가벼운 스킨 리소스 파일들

검색 최적화(SEO) 지원

가장 빠른 블로그 로딩 속도
시스템 글꼴 사용 지원
옵션 설정 항목에 검색 사이트 인증키 적용 지원
오프스크린 이미지 지연 로딩(Lazyloading) 지원
외부 자바스크립트 라이브러리(jQuery) 미사용
외부 아이콘 라이브러리 미사용
가장 가벼운 아이콘 리소스 사용
시멘틱 태그 사용으로 검색엔진 인덱싱 지원

60여가지의 스킨 옵션 설정 지원

블로그를 운영하면서 필요로 하거나 수정이 발생하는 대부분의 요구 사항을 옵션으로 지원
데스크탑, 타블렛, 모바일 환경을 모두 지원하는 반응형 스킨
글목록 타입으로 리스트형, 썸네일형 2종을 지원

상세한 스킨 도큐멘테이션

CSS 가 각 영역별로 세분화되어 작성되어 있습니다.
자바스크립트 코드에 상세한 코멘트가 작성되어 있습니다.
알기 쉽도록 구조화 작업이 되어있어 수정이 용이합니다.

티스토리 애드센스 지원

글목록 애드센스 지원
사이드바 애드센스 지원

▶ 스킨 적용 관련 안내

스킨 적용 방법을 모를 경우 다음 글을 먼저 읽어보시기 바랍니다.

> 다운로드 받은 티스토리 스킨 내 블로그에 적용하기

> 티스토리 스킨 적용하는 방법 상세 안내. 종결판.

> 티스토리 스킨 적용시 주의사항과 문제 해결 방법, 그리고 티스토리 버그 안내

버전1 구버전 스킨은 다음 링크를 클릭하시기 바랍니다.

> 티스토리 스킨 117 - 반응형 2단 심플리트3

▶ 스킨 다운로드

117_Simplit3_v2.zip0.47MB

▶ 스킨 설정 옵션

검색최적화(SEO)

검색 메타 태그

검색엔진 등록 후 검색 봇이 블로그 확인을 위해 방문할 때 블로그 인증을 위한 인증 키를 메타 태그에 등록할 수 있도록 태그 입력 항목을 제공합니다.

스킨 HTML 소스에 메타 태그를 추가할 필요 없이 해당 검색 엔진 항목에 인증키를 입력하면 메타 태그가 자동으로 생성되어 표시됩니다.

오프스크린 이미지 지연로딩

블로그 페이지 로딩시 웹 브라우저 화면 밖에 있는 이미지들은 로딩되지 않고 지연 상태로 보류되었다가, 이미지가 있는 웹페이지 영역이 웹브라우저 화면 영역 안으로 들어오면 해당되는 이미지만 추가로 로딩됩니다.

블로그 페이지 로딩이 더 빠르게 완료되며, 검색엔진이 웹페이지를 방문할 때 검색에 최적화 된 페이지로 판단합니다.

레이아웃

스킨의 영역별 배치 방법과 전체 레이아웃 영역에 영향을 미치는 항목을 설정합니다.

사이드바 표시/위치

사이드바 표시 위치를 정합니다. "왼쪽", "오른쪽" 중에서 선택할 수 있습니다. 데스크탑 화면에서는 사이드바가 고정으로 표시되는 스킨이며, 데스크탑 화면에서는 사이드바를 감출 수 없습니다.

카테고리 위치

블로그 카테고리가 표시되는 위치를 정합니다. 헤더 하단 영역, 또는 사이드바 중에서 선택할 수 있습니다. 반응형 모바일 화면에서는 카테고리가 자동으로 사이드바 영역으로 이동합니다.

좁은 레이아웃(1240px->1140px)

기본 레이아웃 너비는 1240px 이며, 좁은 레이아웃은 100px 좁은 너비를 가지게 됩니다. 좁아진 영역은 컨텐츠 표시 영역에서 그만큼 너비가 줄어듭니다. 사이드바 영역 너비를 줄이려면 사이드바 섹션의 "좁은 사이드바" 옵션을 켜야 합니다.

왼쪽 1240px 너비, 오른쪽 1140px 너비 레이아웃. 줄어든 너비 만큼 컨텐츠 표시 영역이 자동으로 줄어듬

자간 좁게(-1px)

블로그에 표시되는 모든 텍스트의 자간을 좁게 설정합니다. 기본 설정은 0px입니다.

테두리 그림자 효과

스킨 레이아웃 외곽의 좌우에 그림자 효과를 적용해 스킨 레이아웃이 떠 있는 느낌을 부여합니다. 기본 설정으로 옵션이 켜져 있습니다.

부드러운 스크롤(IE, 사파리x)

블로그를 스크롤 해서 내리면 오른쪽 하단에 최상단으로 이동시켜주는 화살표가 표시됩니다.

클릭하면 블로그 페이지 최상단으로 이동하는데, 이 때 부드럽게 애니메이션 되면서 스크롤되면서 최상단으로 이동시켜줍니다.

인터넷 익스플로러와 사파리 브라우저에서는 지원되지 않는 옵션 항목입니다.

페이지가 길 경우 스크롤해서 올라가는 동안 시간 지연이 발생하기 때문에 긴 글을 작성하는 블로그에는 권장하지 않습니다.

전체 배경 이미지 사용

업로드한 이미지를 웹브라우저 창 전체에 고정 배경 이미지로 배치합니다. 배경에 배치된 이미지는 화면 스크롤과 무관하게 고정되어 표시됩니다.

색상

스킨 각 부분의 배경색과 텍스트 색상을 설정합니다.

체크무늬로 보이는 색상은 투명 색상으로 색상이 적용되지 않는 것입니다.

스킨의 기본 텍스트 색상은 "#383838" 입니다. 완전 검정색을 원할 경우 "기본 텍스트 색상" 항목을 "#000000"으로 변경하면 됩니다.

하이라이트 색상은 마우스 호버를 했을 때 반응하는 색상으로 사용됩니다.

강조 반전 배경과 강조 반전 텍스트는 강조용으로 배경을 어두운 색으로 채우고 글자색을 밝게 처리하는 항목에 사용합니다. 대표적으로 글 목록이나 글 내용 보기의 카테고리 표시에 사용합니다.

컨텐츠

모서리

블로그 모든 영역에 표시되는 항목들의 모서리를 표현하는 방법을 선택합니다.

"엣지"는 사각 모서리 그대로를 유지합니다.

"둥글게"와 "더 둥글게"는 항목들의 모서리를 둥글게 다듬어서 블로그 페이지가 더 온화하고 부드러운 모양으로 보이도록 해줍니다.

짧은 날짜 사용(년월일)

블로그에 표시되는 기본 시간 표시 방식은 "년월일 시분"입니다. 짧은 날짜 사용은 "년월일"만 표시합니다.

탑 스크롤 버튼 사용

페이지를 스크롤 해서 내리면 자동으로 페이지 최상단으로 이동하는 버튼이 웹 브라우저 오른쪽 하단에 표시됩니다. 긴 페이지 내용을 가진 블로그에는 방문자 편의를 위해 필수적으로 사용하는 것이 좋습니다.

구글 웹폰트 사용 / 글꼴

두 옵션 항목은 함께 사용합니다.

"시스템 글꼴"은 웹브라우저가 실행되는 운영체제의 기본 시스템 글꼴을 사용합니다.

구글 웹폰트는 구글의 웹 폰트를 가져와 적용합니다. 구글 웹폰트를 사용하려면 "구글 웹폰트 사용" 항목을 켜서 웹 폰트를 블로그 스킨에서 불러오도록 해야 합니다.

글꼴을 구글 웹폰트로 선택했지만 "구글 웹폰트 사용" 옵션 항목을 켜지 않으면 구글 웹폰트가 실제로는 적용되지 않고 시스템 글꼴이 적용됩니다.

헤더

헤더 영역에 표시되는 항목들을 설정합니다. 블로그와 함께 운영하는 여러가지 SNS 서비스들의 링크를 블로그 헤더 영역에 표시할 수 있습니다.

헤더영역 가운데 정렬

블로그 타이틀과 블로그 메뉴를 가운데 정렬해서 표시합니다. 옵션을 끄면 블로그 타이틀과 블로그 메뉴가 왼쪽 정렬되어 레이아웃 왼쪽에 붙어서 표시됩니다.

헤더 배경 이미지 사용

"이미지 업로드" 버튼을 눌러 업로드 한 이미지를 헤더 영역 배경에 표시합니다. 업로드 하는 이미지는 헤더 영역에 가운데 정렬되어 커버 이미지로 표시됩니다. 커버 이미지는 이미지 가로 세로 비율이 유지되면서 너비와 높이 영역을 모두 채우는 크기로 이미지 크기가 정해집니다.

헤더 배경 이미지를 레이아웃 크기에 맞춰서 제작하려면 1240px x 205px 가 기본 크기가 됩니다.

카테고리를 사이드바 영역으로 이동한 경우 헤더 높이는 65px를 더해서 270px가 됩니다.

레이아웃 설정에서 좁은 레이아웃을 선택한 경우 너비는 1140px로 줄어듭니다.

타이틀 대체 이미지

블로그 타이틀 텍스트를 대신해서 블로그 로고 등의 이미지를 표시할 수 있습니다. 오른쪽 "이미지 업로드" 버튼을 클릭해 이미지를 업로드 하면 블로그 타이틀 텍스트를 대신해서 표시됩니다.

SNS아이콘 보기

블로그 왼쪽 상단에 표시되는 SNS 아이콘을 표시할지를 선택합니다. SNS 링크 종류는 인스타그램, 트위치, 유튜브, 페이스북, 핀터레스트, 그리고 이메일 주소 6가지를 지원합니다.

새창(탭)에 SNS 링크 열기

블로그 왼쪽 상단에 표시되는 SNS 아이콘을 클릭해 링크를 이동할 때 새 창(탭)에 표시할지를 선택합니다.

링크를 걸 SNS URL을 입력합니다. SNS 링크를 사용하고 싶지 않으면 "SNS아이콘 보기" 옵션을 끄면 됩니다.

블로그 메뉴 표시

블로그 타이틀 밑에 블로그 메뉴를 표시할지를 선택합니다. 표시되는 메뉴 항목은 블로그 관리자 화면의 꾸미기 > 메뉴에서 추가/변경/삭제를 할 수 있습니다.

사이드바

좁은 사이드바(-30px)

사이드바 너비를 300px -> 270px로 30px 줄입니다. 줄어든 사이드바 너비만큼 글목록/글내용 영역이 자동으로 늘어납니다. 데스크탑 화면에서만 적용되며, 반응형 모바일 화면에서는 300px로 고정입니다.

사이드바 최근글, 인기글 썸네일 표시

사이드바의 최근글과 인기글 목록에 썸네일 이미지를 함께 표시합니다.

프로필 표시

블로그 프로필을 표시합니다.
사이드바 구글 애드센스 광고와 사이드바에 표시되는 카테고리는 프로필 하단에 위치합니다.

프로필 이미지 크기

프로필 이미지 크기를 작게(원형), 중간크기(둥근사각), 크기(사각) 3가지 중에서 선택할 수 있습니다.

좁은 사이드바 여백

사이드바 컨텐츠 영역 경계와 영역 안의 컨텐츠 사이에는 10px의 여백이 있습니다. 이 여백을 없애서 컨텐츠가 조금 더 타이트하게 채워져 보이도록 합니다.

작은 사이드바 태그

사이드바의 태그 영역에 표시되는 태그 목록의 글자 크기를 더 작게 변경합니다.

글목록/커버목록

글목록 타입

3가지 글목록 타입 중 한가지를 선택합니다. 글목록과 커버 페이지 목록에 모두 적용됩니다.

"목록", "썸네일 한행에 2개", "썸네일 한행에 3개" 중 한가지를 선택할 수 있으며, 데스크탑과 타블렛 화면에만 적용됩니다. 모바일에 표시되는 목록 타입은 하단 "모바일" 섹션에서 별도로 설정합니다.

페이징 타입

페이지를 이동하는 방식을 결정합니다.

"페이지목록", "이전/다음", "더보기" 중 한가지를 선택할 수 있습니다.

더보기는 비동기 방식으로 다음 페이지의 목록을 가져와 현재 보여지는 목록의 끝에 새로 가져온 목록을 덧붙이는 방식으로 목록을 누적합니다.

글 내용 미리보기 출력

글 내용 미리보기를 표시합니다. 기본 설정은 4줄의 미리보기 내용을 표시합니다.

짧은 글 내용 미리보기(4줄->2줄)

4줄로 표시되는 글 내용 미리보기를 2줄만 표시합니다. "글 내용 미리보기" 옵션이 켜져 있어야 합니다.

글 목록 날짜 출력

글 목록에 날짜를 함께 표시합니다. 기본 설정은 "년월일 시분"로 표시하며, "컨텐츠" 섹션에서 "짧은 날짜 사용" 옵션을 켠 경우 "년월일"만 표시합니다.

썸네일 이미지 빈 영역 자리 차지

썸네일 이미지가 없는 글 항목도 이미지 영역 크기만큼 자리를 차지하도록 해서 레이아웃이 동일하게 맞춰지도록 합니다.

정사각 썸네일 사용

기본 직사각형(3:2) 비율인 썸네일 이미지를 1:1 비율 썸네일 이미지로 변경합니다.

기본 3:2 비율인 썸네일 이미지는 450x300px 크기이며, 1:1 비율 썸네일 이미지는 400x400px 입니다.

왼쪽은 직사각(3:2) 비율 썸네일, 오른쪽은 정사각(1:1) 비율 썸네일

큰 썸네일 사용

고해상도 썸네일을 가져옵니다. 이미지 중심의 블로그를 운영할 때 큰 썸네일을 표시할 수 있으며, 조금 더 고해상도인 큰 이미지를 가져옵니다.

기본 썸네일 이미지 크기는 450px x 300px 이며, 큰 썸네일 이미지를 사용하면 750px x 500px인 썸네일 이미지를 가져옵니다.

정사각형 썸네일인 경우 800px x 800px가 됩니다.

글목록 타입이 "목록"이면 예외적으로 썸네일 이미지가 가로 영역을 모두 채우는 사진 중심의 목록으로 형태가 바뀝니다.

썸네일 내용 가운데 정렬

썸네일 이미지와 함께 표시되는 텍스트 내용을 가운데 정렬합니다.

목록형 보다는 썸네일형인 글 목록을 표시할 때 텍스트를 가운데 정렬할 때 유용합니다.

글 본문 내용

가운데 정렬

글 본문 내용 전체에 가운데 정렬을 적용합니다.

내용 텍스트 좌우 여백

글 본문 내용 중 애드센스, 이미지, 공감 버튼 영역을 제외한 나머지 텍스트 내용에 좌우 여백을 부여합니다.

텍스트 내용을 이미지 너비보다 좁게 표시해서 여백이 많은 글을 작성하고 싶을 때 사용할 수 있습니다.

5%, 10%, 20% 중 여백 너비를 선택할 수 있습니다.

여백 너비는 좌우에 각각 적용됩니다.

댓글/방명록

프로필 아이콘 감춤

댓글 작성자 이름과 함께 표시되는 프로필 아이콘이 표시되지 않도록 합니다.

댓글 갯수가 많은 경우, 프로필 이미지 로딩에 시간 지연이 발생하기 때문에 블로그 페이지 로딩 속도를 조금이라도 올리고 싶은 경우, 댓글 프로필 이미지가 표시되지 않도록 할 수 있습니다.

검색 최적화 옵션 중 "오프스크린 이미지 지연 로딩" 옵션이 켜진 경우 프로필 이미지도 지연 로딩되기 때문에 프로필 이미지를 감추지 않아도 페이지 지연은 발생하지 않습니다.

푸터

푸터에 이미지 표시

"이미지 업로드" 버튼을 눌러 업로드 한 이미지를 푸터 영역에 표시합니다. 기본 설정은 가운데 정렬이며, 이미지 크기 1:1 비율로 표시됩니다. 이미지 하단과 관리자 메뉴 사이에는 10px의 여백이 있습니다.

푸터에 텍스트 표시

입력난에 입력한 테스트 내용을 푸터에 표시합니다. 텍스트는 가운데 정렬로 표시되며, 하이퍼링크를 입력할 수도 있습니다. 푸터 이미지를 함께 표시할 경우 푸터 이미지 하단에 푸터 텍스트가 표시됩니다.

데스크탑

컨텐츠영역 좌우 여백 제거

글 목록/본문 영역과 사이드바 영역을 감싸는 메인 영역 안쪽 좌우에 있는 여백(기본 설정으로 30px 씩)을 제거합니다. 레이아웃이 꽉 차보이도록 하는 효과가 있습니다. 전체 레이아웃 배경색을 흰색이나 투명색상으로 지정해 전체 브라우저 영역으로 레이아웃을 확장하면 메인 영역만 안쪽으로 들어가보이게 되는데 이 현상을 해결하는데 사용할 수 있습니다.