본문 바로가기

티스토리스킨/반응형 2단 스킨

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

반응형

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

2021-09-02. 목차 기능 사용시 공감 버튼과 충돌하는 현상 패치 (스킨을 다시 다운로드 받아 script.js 파일만 재업로드)

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

 

 

 

글 목록 커버 타입 한 가지만 지원되는 기존 심플리트3 스킨을 수정해서

5가지 커버 타입을 지원하는 커버 페이지 지원 스킨으로 변형한 스킨입니다.

커버 페이지 지원을 제외한 나머지 모든 기능 및 옵션 설정은 심플리트3 v3 버전 스킨과 동일합니다.

 

 

심플리트3 v3 커버 페이지 버전 다운로드

 

 

스킨 옵션 설정 방법은 기존 배포하는 심플리트3 스킨 배포 글을 보시기 바랍니다.

 

> 심플리트3 v3 스킨 배포 안내

 

 

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

2021.07.17 Patch

- 스킨 옵션 설정 항목인 테두리 둥글게 옵션이 커버 항목에도 적용되도록 패치

- 커버 내용으로 글을 선택해서 표시할 때 카테고리가 기본 스킨과 같은 모양으로 출력되도록 개선

- 커버 타입별로 글자 색상을 지정할 수 있도록 커버 스킨 옵션 설정 항목 추가

- 커버 썸네일 목록의 표시 내용을 가운데 정렬할 수 있도록 스킨 옵셜 설정 항목 추가

- 커버 타입 및 아이템 개수에 따라 알맞는 텍스트 크기로 표시되도록 크기 조정

- 커버 아이템이 이미지가 누락된 경우 빈 영역을 채워서 레이아웃이 밀리지 않도록 조정

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

 

 

커버 변경으로 추가된 스킨 옵션 항목은 다음과 같습니다.

 

커버 옵션 설정

■ 커버 슬라이더 타입 선택

커버 슬라이더 이미지가 교체되는 방법을 결정합니다.

  • 정순 이동: 첫 번째 슬라이드부터 오른쪽에서 왼쪽 방향으로 이동 교체
  • 역순 이동: 마지막 슬라이드부터 왼쪽에서 오른쪽으로 슬라이드 이동 교체
  • 정순 투명화: 첫 번째 슬라이드부터 투명해지면서 다음 슬라이드로 교체
  • 역순 투명화: 마지막 슬라이드부터 투명해지면서 다음 슬라이드로 교체

커버 슬라이더 타입 선택

 

 커버 슬라이드 교체 시간

커버 슬라이드 이미지가 교체되는 주기를 입력합니다. 초단위로 입력하며, 소수점을 사용할 수 있습니다. 기본 값은 5초입니다.

 

 

 커버 슬라이더 이미지 어둡게

밝은 슬라이드 이미지를 사용할 경우 커버 슬라이드 이미지에 함께 표시되는 텍스트가 잘 보이도록 커버 슬라이드 이미지를 30% 어둡게 표시합니다.

 

왼쪽: 30% 어둡게 표시되는 슬라이드 이미지, 오른쪽: 기본 표시 슬라이드 이미지

 

 커버 썸네일 목록 더보기 버튼으로 링크

커버 썸네일 목록에 하이퍼링크가 설정된 경우 썸네일 목록 아이템 전체가 클릭되지 않고, 별도의 "더보기" 버튼이 표시되어 링크를 클릭하도록 합니다.

 

 

 썸네일 목록 내용 표시하기

썸네일 목록 아이템에 입력한 "내용" 입력 필드의 상세 설명 내용을 표시합니다.

 

왼쪽 내용 미표시, 오른쪽 내용 표시

 

■ 썸네일 리스트 내용 가운데 정렬

썸네일 목록에 표시되는 내용들을 가운데 정렬합니다.

 

 

■ 커버 아이템 글자 색상 지정

커버 슬라이더 글자, 커버 풀 배너 글자, 커버 리본 글자, 커버 갤러리 글자의 색상을 각각 설정할 수 있습니다. 기본 설정 색상은 흰색입니다.

 

 

 

지원하는 커버 타입은 다음 7가지입니다.

 

사용 가능한 커버 타입들

 커버 슬라이더

아이템 개수만큼을 스킨 옵션 설정에서 선택한 트랜지션 방법에 따라 슬라이드를 전환합니다.

 

커버 슬라이더

 커버 목록

목록 형태로 아이템들을 표시합니다.

 

 커버 목록 2개

한 행에 2개씩 목록 형태의 아이템들을 표시합니다.

 

커버 목록 2개

 커버 썸네일

썸네일 목록으로 아이템들을 표시합니다. 썸네일 개수에 따라 한 행에 표시되는 썸네일 개수와 크기가 자동으로 정해집니다. 하이퍼링크가 있는 썸네일 목록이며, 썸네일 제목과 내용은 썸네일 밑에 별도로 표시됩니다.

 

커버 썸네일

 커버 갤러리

사진 이미지들을 썸네일 형태로 표시합니다. 하이퍼링크가 없는 사진 목록 표시용 커버 타입입니다. 아이템 개수에 따라 한 행에 표시되는 썸네일 개수와 크기가 자동으로 정해집니다.

아이템 제목과 내용은 마우스 호버를 하면 사진 위에 오버랩되어 표시됩니다. 모바일 보기에서는 마우스 호버 된 것처럼 제목과 내용이 기본 표시됩니다.

 

커버 갤러리

 

 커버 배너

높이 300px의 배너 이미지를 표시합니다. 배너 내용은 배너 배경 이미지 위체 표시되며, 하이퍼링크는 "더보기" 버튼으로 표시됩니다.

 

커버 배너

 

 커버 리본

높이 150px의 띠 배너 이미지를 표시합니다. 배너 내용은 배너 배경 이미지 위체 표시되며, 하이퍼링크는 리본 영역 전체를 클릭합니다.

 

커버 리본

반응형

❌ 닫기