본문 바로가기

새로운 소식/스킨 (Skin)

신규 스킨 업데이트 안내

안녕하세요, 티스토리팀입니다.

새로운 스킨 '오디세이'(Odyssey)를 소개해드립니다.
이번 스킨에서는 카테고리마다 목록 스타일을 지정하거나, 이미지와 소개 문구를 설정할 수 있는 기능을 추가하였습니다. 
스킨 제작자가 해당 기능을 활용할 수 있도록 가이드도 함께 전달드립니다. 보다 자세한 내용은 아래를 참고 바랍니다.

 

신규 스킨 - 오디세이(Odyssey) 


다양한 기능과 단정한 디자인으로 '블로그의 기본'에 충실한 스킨입니다.

다섯 가지의 커버 아이템으로 홈 꾸미기를, 다양한 스킨 옵션으로 취향에 맞는 디자인 구성이 가능합니다.

 

- PC 해상도에서 1단형과 2단형 선택 지원
- 홈 상단에 '슬로건' '배너' '내비게이션' 입력 지원
- 카테고리별 목록 스타일 지정 가능

 

커버 설정과 옵션 설정에 대한 자세한 내용은 스킨 자세히 보기 페이지를 확인해주세요. 

 

스킨 자세히 보기 : 바로가기

데모 블로그 보기 : 바로가기

 

새로운 기능 - 카테고리 개별 정보 관리

오디세이 스킨과 함께 정식으로 공개하는 기능입니다. 

 

스킨 제작자의 사전 정의에 따라, 스킨 이용자는 카테고리별 목록 스타일과 대표 이미지 및 카테고리 소개 문구를 관리할 수 있습니다.

목록 스타일
- 스킨 제작자가 사전에 정의한 스타일 중 하나를 선택할 수 있습니다.

- 특정 스타일 선택시, 해당 카테고리 글 목록 페이지에 접근하면 선택한 글 목록 스타일이 나타납니다.
- 스킨 제작자가 정의한 스타일이 존재하지 않는 경우, 이 기능은 사용할 수 없습니다. 
- 항목 중 '기본 스타일 유지'를 선택하시면, 스킨 편집의 '기본 설정 - 기본 목록 스타일'에서 지정한 기본 스타일이 유지됩니다. 

 

대표 이미지
- 스킨 제작자가 카테고리별 글 목록 페이지에서 해당 이미지의 노출 위치를 정의해야 합니다.
- 이미지 업로드시, 스킨 제작자가 지정한 위치에 해당 이미지가 나타납니다. 
- 스킨 제작자가 위치를 지정하지 않은 경우, 이미지를 업로드하더라도 카테고리 글 목록 페이지에 나타나지 않습니다.
- 상위 카테고리를 관리할 경우, 하위 카테고리에 한 번에 적용할 수 있습니다.

 

카테고리 소개
- 스킨 제작자가 카테고리별 글 목록 페이지에서 해당 문구의 노출 위치를 정의해야 합니다.
- 문구 입력시, 스킨 제작자가 지정한 위치에 해당 이미지가 나타납니다. 
- 스킨 제작자가 위치를 지정하지 않은 경우, 문구를 입력하더라도 카테고리 글 목록 페이지에 나타나지 않습니다.
- 상위 카테고리를 관리할 경우, 하위 카테고리에 한 번에 적용할 수 있습니다.

데모 블로그에는 모든 설정이 적용되었습니다.



스킨 제작자용 업데이트 소식


1. 카테고리별 목록 스타일과 이미지, 소개 문구

카테고리별 목록 스타일은 index에서 정의할 수 있습니다.
목록 스타일 기능을 사용하기 위해서는 글 목록 구성을 위한 그룹치환자로 <s_list_rep>그룹치환자를 사용하셔야 합니다.
<s_list_rep> 내부에서 사용할 수 있는 값치환자는 가이드를 참고해주세요. 

카테고리별 이미지와 소개 문구는 <s_list> 내부에서 아래의 치환자를 사용하셔야 합니다.
- [##_list_description_##]: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
- <s_list_image>: 리스트 대표 이미지가 있는 경우 동작
 - [##_list_image_##]: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)

2. 방명록 프로필 이미지 치환자 제공

방명록에서 작성자의 프로필 이미지를 출력하는 치환자가 추가되었습니다.
[##_guest_rep_logo_##]를 사용해주시기 바랍니다. 

3. 말줄임 처리 문자 변경

그동안 마침표 2개로 제공되던 글 제목 및 본문내용의 말줄임 처리 방식이 변경되었습니다.
변경 이후로는 말줄임표 기호(…)로 제공됩니다.

4. 스킨편집의 '목록 구성 요소' 디폴트 지정 기능

홈 화면과 기본 설정의 '목록 구성 요소'의 디폴트값을 지정할 수 있습니다.
index에서 아래 2개 항목으로 지정합니다. 

- showListOnCategory: 카테고리 글 목록 및 아카이브, 검색 결과, 태그의 글 목록을 위한 디폴트 지정 (0:내용만, 1:목록만, 2: 내용+목록)
- showListOnHome : 커버를 사용하지 않은 홈에서 글 목록을 위한 디폴트 지정  (0:내용만, 1:목록만, 2: 내용+목록)

5. 스킨편집의 '목록 구성 요소' 노출 제어 기능

위와 같이 디폴트값을 지정한 뒤, 스킨 이용자가 해당 설정을 변경할 수 없도록 하기 위한 기능입니다.
index에서 아래 1개 항목으로 지정합니다.  

- showListLock : 홈 설정과 기본 설정에서 '목록 구성 요소' 항목의 노출 여부를 결정합니다 (0: 노출, 1: 노출 안 함)


감사합니다. 

  • 이전 댓글 더보기
  • 제이콥혁 2020.09.10 21:11 신고

    사이드바! 작업하시느라 수고 많으셨습니다

  • 2020.09.10 21:55

    비밀댓글입니다

  • BDDUNG 2020.09.11 00:50 신고

    이걸로 바꾸겠습니다 스킨 이쁘고 깔끔하네요 감사합니다

  • @정상우 2020.09.11 04:29 신고

    새로운.. 치환자가 나왔네 지금 이 시점에 아주 괜찮은 패치인 것으로 ..

  • slowLIFE🐾 2020.09.11 04:53 신고

    이 스킨 적용시키고 사이드바에 광고 넣으니 수익이 늘어났네요 오 ~~ 굿

  • 묘연、 2020.09.11 05:09 신고

    showListOnCategory, showListOnHome 는 2로 설정 시에 목록만으로 적용되고 1로 설정 시 내용 + 목록으로 적용되는 것으로 확인됩니다.

  • CoffeeMix 2020.09.11 12:49 신고

    디자인 좋네요!

  • 투래 2020.09.11 17:52 신고

    와우 디자인 변경 해야겠네요 ㅋ깔끔하고 이뻐보이네요 ㅋ!!

  • 와니. 2020.09.13 00:38 신고

    미리보기 한번 했을 뿐인데, 기존 스킨 설정이 틀어지는 이유는 뭘까요?

  • Mr. M 2020.09.13 23:11 신고

    디자인은 좋은 데, 스킨이 안정될 때까지 적용은 조금 보류해야 될 것 같습니다.

  • Mr. Clark 2020.09.14 17:46 신고

    새로운 스킨 잘쓰겠습니다 너무 좋네요 깔끔하니

  • slowLIFE🐾 2020.09.16 19:20 신고

    맨 하단으로 내려 갔을때 제일 위로 올라가는 버튼 같은거 있으면 딱 좋겠네요 .

  • 모난Monan 2020.09.17 13:24 신고

    버그 내용: 검색시 페이지 번호 표기가 안 됨.

    검색해서 한 화면에 나오는 목록 개수 이상의 글이 검색될 경우,
    페이지 표기를 페이지 번호로 한 상태면
    페이지 번호가 나오지 않음.

    페이지 표기를 더보기 버튼으로 한 상태면
    정상 작동.

    버그 좀 해결 부탁드리겠습니다ㅜㅜ
    감사합니다.

  • 모난Monan 2020.09.17 16:47 신고

    파이어폭스, 웨일 브라우저에서 더보기 버튼 누르면 글들이 아래쪽에 나오고요.

    크롬 브라우저에서 더보기 버튼 누르면, 글들이 아래쪽에 나오지 않고, 맨 아래로 이동해서 더보기 버튼이 보입니다.

    왜 poster 스킨에서는 잘 작동하고
    이 스킨에서만 이렇게 작동하나 연구해봤습니다.

    poster 스킨에서는
    더보기 버튼을 누르면 더보기 버튼을 없앤 다음,
    목록을 불러오고
    맨 마지막에 더보기 버튼을 다시 붙여 넣더군요.
    그래서 크롬에서 버튼을 누르면
    목록이 아래쪽에 생성되고요.



    function viewMore(url){
    $.ajax({
    url: url
    }).done(function (res) {
    var $res = $(res),
    $nextPostItem = $res.find(".post-item"),
    $paginationInner = $res.find(".pagination").html();
    if ( $nextPostItem.length > 0 ){
    $("#content .inner").append($nextPostItem);
    $(".pagination").html($paginationInner);
    viewMoreShow();
    } else {
    $(".pagination").remove();
    }
    });
    }

    • Himm 2020.09.17 23:13 신고

      모난님 혹시 제목 잘림 현상 수정방법이랑, 글자 사이즈랑 글꼴 디폴트값 변경 방법좀 알려주실 수 있으신가요?
      정말 감사합니다

  • 모난Monan 2020.09.17 17:01 신고

    글 수정 삭제 버튼이 없더라고요ㅜㅜ 만들어 주시면 감사하겠습니다.

    다른 스킨은 있던데 이 스킨은 없더군요ㅜㅜ

  • 오버로크 2020.09.17 17:49 신고

    이번에 업데이트된 스킨 다 적용이 안되요;

  • 모난Monan 2020.09.17 23:21 신고

    Himm님 보세요~

    css 편집 들어가셔서

    .article-type-common .title {
    display: block;
    max-height: 54px;
    margin-bottom: 13px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
    overflow: hidden;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    }

    여기 보시면
    /*max-height: 54px;*/
    이렇게 주석처리해 주세요.

    글자를 키울 때 글자가 잘리는 현상은
    max-height로 높이를 제한하고 있기 때문에 나타나는 현상입니다.

    다른데서도 잘림현상이 나타난다면 일단 max-height를 찾아서 다 지워보세요.
    그럼 잘림현상이 나타나지 않을 겁니다.

    -webkit-line-clamp: 2;
    를 4로 바꾸세요.
    그럼 제목이 긴 경우 4줄까지 나옵니다.
    2로 되어 있기 때문에 2줄만 나오고 ...으로 말줄임표가 나오는 거죠.

  • 모난Monan 2020.09.17 23:28 신고

    Himm님 보세요.

    글자크기의 경우에는
    이 스킨은 일일이 고쳐야 합니다.

    이전에 poster 스킨의 경우에

    font-size: 0.75em;

    이런 식으로 되어 있어서,
    상대적 크기로 정의되어 있었습니다.

    이번 스킨은 글자 크기가 거의 px로 되어 있더군요.
    그래서 한번에 못 바꾸고 일일이 바꾸셔야 할 거 같습니다.

    .article-view가
    블로그 글 내용입니다.
    font-size: 32px;
    여기 숫자를 낮추거나 높여보시기 바랍니다.

    .article-view h1 {
    font-size: 32px;
    line-height: 1.33;
    }

    .article-view h2 {
    font-size: 24px;
    line-height: 1.38;
    }

    .article-view h3 {
    font-size: 20px;
    line-height: 1.4;
    }

    .article-view h4 {
    font-size: 18px;
    line-height: 1.33;
    }

    도움이 되시면 좋겠네요~

  • 부피에 2020.09.18 05:46 신고

    티스토리를 자주 사용하고 있는 사용자입니다. 먼저, 감사드립니다.
    불편한 사항이 있어 문의를 하는데요. 스마트폰을 가로로 하면 앱이 자동으로 가로로 맞춰지는데 티스트로앱은 왜 가로로 안될까요? 가능하시다면 이 부분이 보완이 되었으면 하는 바람입니다.

  • (블로거) 2020.09.21 13:53 신고

    감사합니다