본문 바로가기

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

 

커버 리본

반응형
  • 익명 2021.07.16 19:49 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 1. 조금 애매합니다. 커버 페이지 항목 전체를 둥글게 하는게 맞는지...
      설정상 맞는것 같기는 합니다. 패치를 하겠습니다.

      2. 카테고리 반전 표시가 되도록 패치를 하겠습니다.

      오래 안걸리니까 조금 기다려 보시기 바랍니다.

    • 빠른 확인 감사합니다 ㅎㅎ

    • 스킨이 패치되었습니다.
      상세 패치 내역을 글 내용 상단을 확인하시기 바랍니다.

  • 익명 2021.07.18 21:37 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 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

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

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

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

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

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

  • 익명 2021.09.13 20:46 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 익명 2021.11.02 23:51 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 익명 2021.11.05 08:08 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다


    • 1. 스킨 옵션 설정의 seo 란에 입력하는 것은 블로그를 검색엔진에 등록할 때 블로그 소유자가 맞는지 확인하기 위해 검색엔진이 블로그 메타태그에 표시하는 긴 키값을 알려줍니다.
      html 편집이나 수정을 할 줄 모르거나, seo 키를 어디에 배치해야 하는지 모르는 블로거를 위해 키를 옵션 설정 seo 해당 검색엔진 입력 난에 입력하면 자동으로 메타태그를 표시해주는 편의 기능입니다.
      검색엔진에 블로그 등록하는 과정을 진행해보면 seo에 입력하는 키가 뭔지 자연스럽게 알게 됩니다.

      2. 폰트는 바꿀 수 있습니다.
      다만 html과 css를 조금 수정할 줄 알아야 합니다.

      3. 커버 페이지 아이템들의 수정과 관리는]
      자기블로그url/manage/design/skin/edit#/
      에서 "커버" 버튼을 누르면 커버 페이지 아이템들의 목록이 표시됩니다.
      수정/추가/삭제하려는 아이템을 여기서 관리합니다.

  • 익명 2022.01.26 10:54 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 스킨 기본 상태에서는 850x400이 1:1 표시 크기입니다.
      실제로 업로드하는 이미지 크기나 가로 세로 비율에 제한은 없습니다.

      원본 그대로 가로, 또는 세로를 채워서 비는 부분이 없도록 가운데 정렬해서 채우는 방식으로 표시합니다.

      가로, 또는 세로 기준으로 채워서 남는 부분은 가려져서 안보이게 처리됩니다.

    • 익명 2022.01.27 10:50 댓글주소 수정/삭제

      비밀댓글입니다

    • 블로그 관리자 화면
      꾸미기 > 모바일에서
      "티스토리 모바일웹 자동 연결을"
      사용하지 않습니다로 변경해야 합니다.

  • 익명 2022.02.13 01:15 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 파비콘은 스킨의 설정 기능이 아니라 티스토리의 관리자 기능에서 적용하는 기능입니다.

      블로그 관리자 화면

      관리 > 블로그에 들어가면

      블로그 아이콘과 파비콘(ico 포맷)을 직접 업로드하는 기능이 있습니다.

    • 그렇게 했는데도 안생기더라고요... 스킨 자체적으로 막을 수 있다는 글을 본것 같아서 문의드린건데... 블로그 관리에서 가능하다는 말씀이신거죠?

    • 사용자가 아이콘 파일을 직접 업로드해서 html 태그로 업로드 한 아이콘을 직접 적용할 수는 있지만, 티스토리 시스템에서 제공하는 아이콘 등록 기능과 충돌하기 때문에 정상적인 사용 방식은 아닙니다.

      티스토리 표준 배포 스킨에서 권장하는 방식도 아닙니다.

      알려드린 아이콘 등록 기능으로 아이콘을 등록하면 실시간으로 반영됩니다.

      등록하는 아이콘은 ico 확장자의 아이콘 포맷 파일이어야 합니다. 일반 이미지 파일이 아닙니다.

      https://image.online-convert.com/convert-to-ico

      이런 아이콘 컨버트 온라인 서비스에서 일반 이미지 파일을 아이콘 포맷으로 변환해서 티스토리에 적용해야 합니다.

  • 익명 2022.03.11 11:45 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 블로그 구조상 글을 슬라이드로 붙일 수 있어야 하기 때문에 현재 슬라이드 구조가 티스토리의 기본 구조여야 합니다.
      범용이기 때문에...

      꼼수를 좀 쓰면 내용없이 이미지만 슬라이딩을 시킬 수는 있습니다.

      1.
      먼저 커버 편집 화면에서 타이틀 내용을 없애야 합니다. 다 지우면 저장을 할 수 없으므로 타이틀 입력 난에 공백 하나만 입력해서 저장하면 됩니다.

      2.
      skin.html 에서 "article" 을 검색합니다.(쌍따옴표 포함)
      1개 나올겁니다. 해당 부분이 슬라이드 내용 표시 부분입니다.
      <div class="article"></div> 요 부분을 다음으로 변경합니다.
      안쪽의 <a></a>를 바깥으로 빼는 구조입니다.
      샵샵은 ##으로 바꿔야 합니다.
      <div class="article">
      <a href="[샵샵_cover_item_url_샵샵]">
      <s_cover_item_article_info>
      <span class="category">[샵샵_cover_item_category_샵샵]</span>
      </s_cover_item_article_info>
      <span class="title">[샵샵_cover_item_title_샵샵]</span>
      </a>
      </div>

      3.
      스킨 images 폴더 안에 있는 cover.css 가 커버 페이지 아이템들의 css 를 담고 있습니다.
      이 파일을 수정해서 업로드를 해야 합니다.
      cover.css 에서
      위에서부터
      .cover-slider ul li .article
      을 검색합니다.

      처음 나오는 클래스에서
      height: 100%;
      속성 추가

      그리고 그 밑에

      .cover-slider ul li .article > a{
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      }

      클래스를 새로 추가합니다. skin.html에서 밖으로 빼낸 <a></a> 태그용입니다.

      이렇게 하면 이미지만 슬라이드 되는 슬라이더가 됩니다.

      파일 업로드 후에는 웹브라우저 캐시를 한번 소거해서 캐시로인해 적용 안된 것처럼 보이지 않도록 해야 하빈다.

    • 익명 2022.03.14 13:20 댓글주소 수정/삭제

      비밀댓글입니다

    • 위 답글 2번 내용이 더보기 버튼으로 연결되는 하이퍼링크를 전체 슬라이드 영역으로 변경하는 것입니다.

      수정해서 테스트까지 해본 것입니다.

      배너 하이퍼링크는 슬라이드 커버 설정 화면에서 직접 입력하면 됩니다.

      슬라이드 표시 내용을 글 목록에서 선택한 글로 했으면 글로 이동하는 링크가 자동으로 붙게 됩니다.

  • 깔끔한 스킨 무료 배포해 주셔서 감사합니다.
    덕분에 잘 적용했습니다.

    • 감사합니다.^^/

    • 어포스트님 귀찮게 해드려서 죄송합니다.
      한 가지 여쭤볼게 있는데요.
      혹시 본문 폰트 사이즈만 키울려면 어디를 수정해야할까요?
      제가 손대보니 본문뿐만 아니라 커버페이지포함 전체 사이즈가 조정되더라구요.
      무지한 중생에게 한줄기 빛을 내려주세요.

    • style.css 를 위에서 부터 검색하면

      .entry-content {

      가 처음 나오는 위치 부터가 글 본문 텍스트 크기를 설정하는 부분입니다.

      .entry-content p {

      가 글 본문 일반 텍스트(문단) 크기를 설정합니다.

      1em 이 보통 데스크탑 화면 16px 크기입니다.
      스킨이 기본 본문 텍스트 크기는 0.9375em (15px) 입니다.

    • 상세하고 정성스런 답글 감사합니다.
      h2,h3,h4 바로 아래에 있는데 그걸 몰랐네요.
      덕분에 쉽게 적용하였습니다.
      오늘도 즐거운 하루 보내세요.

  • 안녕하세요!
    깔끔한 스킨 너무 잘 사용하고 있습니다.

    다름이 아니라 본문의 하이퍼 링크에 색상이 기본으로 추가되도록 하고 싶어서 이것 저것 시도해보았는데

    .entry-content a {
    color:blue;
    }

    등으로 시도해봐도 아무런 변화가 없더라구요😂

    혹시 어떻게 수정을 하면 본문 링크에 색을 추가할 수 있는지 여쭤봐도 괜찮을까요??

    • html 헤더 영역에 기본 하이퍼링크 색상이 지정되어 있어서 우선순위가 여기에 있다보니
      지정한 클래스가 우선순위가 낮아서 적용이 안되는 것입니다.

      .entry-content a {
      color:blue !important;
      }

      로 속성 뒤에 강제 적용 추가 속성(!important)을 부여하면 글 내용의 하이퍼링크가 원하는 색상으로 강제적용됩니다.

    • 네 감사합니다!


닫기