본문 바로가기

티스토리스킨/반응형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의 띠 배너 이미지를 표시합니다. 배너 내용은 배너 배경 이미지 위체 표시되며, 하이퍼링크는 리본 영역 전체를 클릭합니다.

 

커버 리본

반응형
  • 비밀댓글입니다

  • 비밀댓글입니다

    • 1.
      스킨 images 폴더 안의 cover.css 에서

      .cover-slider {
      }

      클래스에서
      height: 400px로 잡힌걸 늘려준 후 재 업로드 하면 됩니다.

      2.
      저는 역순 투명화로 잘 동작합니다.

  • 감사합니다아아

  • Apost님
    스킨에 'Designed by 어포스트' 옆에 스킨 이름과 정보를 하이퍼링크로 넣어도 될까요? (이 스킨 쓰고 싶은 사람들이 많이 헤메지 않게...저도 이거 쓰고 싶어서 한참 동안 헤멨습니다...)

  • 좋은 스킨 감사합니다.
    친효스킨에서 변경해봤는데 깔끔하게 좋은것 같습니다.

    혹시 더보기 클릭시 새창으로 열릴 수 있게 할 수 있을까요??
    그리고 심플리트 스킨은 자동목차 기능 업데이트 예정이 있으신지요??

    감사합니다.

    • 더보기라는건 커버 페이지의 목록에 "더보기" 버튼 표시를 말하는건가요?
      맞으면...
      skin.html 에서
      class="more-btn"
      으로 검색하면 3개가 나옵니다.
      전부 커버페이지 더보기 버튼 표시용입니다.

      <a href="" class="more-btn">더보기</a>

      <a href="" class="more-btn" target="_blank">더보기</a>

      로 고쳐주면 새창(탭) 열립니다.
      target="_blank" 만 추가된 것입니다.

      특정 목록만 새창 열기를 하려면 3가지 검색된 것 중에 원하는 것만 적용해도 됩니다.

      자동 목차 기능은 새로 배포되는 v3 버전 스킨에는 모두 적용되는 공통 기능입니다.

      구조적으로 안되는 기능 말고는 v3 버전으로 배포되는 스킨들은 모두 같은 기능을 가지고 있습니다.

      소개 페이지에 표시가 안되어 있어도 v3 버전 다른 스킨에 있는 공통 기능이면 심플리트 스킨에도 모두 있다고 보시면 됩니다.
      스킨 옵션 설정에 들어가서 자동 목차 기능을 켜보시기 바랍니다.

    • 목차 생성이 있었네요.
      미처 확인못했습니다.

      답변 감사합니다.!!

  • 좋은 스킨 감사합니다.
    커버 슬라이드에서 링크를 클릭하면 똑같은 페이지로만 연결이 됩니다.
    커버 슬라이드를 사용하고 싶은데, 어떻게 하면 될까요?

    • 커버 슬라이드 컨텐츠가 직접 입력된 컨텐츠로 데모용, 또는 고정된 슬라이드 화면을 위해서 구성된 것입니다.

      스킨 옵션 설정 들어가서 커버 설정 화면을 선택하면 슬라이드가 맨위에 있습니다.
      "수정"을 눌러서 들어가면 직접 입력으로 구성된 슬라이드 이미지와 내용, 링크를 수정할 수 있습니다.

      아니면 "콘텐츠" 선택 목록에서 "최신글", "인기글", "글선택" 을 선택하면 블로그 글중에서 적당한 것을 선택할 수 있습니다.

      아마도

      블로그주소/manage/design/skin/edit#/cover/0

      로 슬라이드에 바로 접근할 수도 있을겁니다.

      그밖의 다른 커버 아이템들도 레이아웃만 다르고 작동 방식은 동일합니다.

      "커버" 페이지 설정으로 들어가서 확인해보시기 바랍니다.

      스킨 옵션설정 화면 상단의 "커버" 버튼을 누르면 커버 아이템들 목록이 나옵니다.

    • 감사합니다. 스킨 옵션에서 '정순 이동'을 사용하니 해결이 되었습니다.
      저는 '정순 투명화'를 선택했었는데, 이걸 이용하니 링크가 제대로 연결되었습니다.
      잘 사용하겠습니다. 감사합니다. !!

  • 비밀댓글입니다


닫기