커미션 스킨 사용 안내 (21.06.30 기준)

Tistory/전달 사항 2019. 12. 28.

이 글은 커미션 제작 완료 된 스킨의 사용 방법 안내를 위한 글이므로, 커미션 의뢰 안내를 찾으시는 분께서는 링크로 이동하세요.

 


 

커미션 스킨은 제작한 시기, 시안에 따라 제작 방법이 다르기 때문에 아래 안내드리는 것과 다르거나 일부가 없거나 더 있을 수 있습니다.
안내되어 있지 않는 부분 중 중요한 부분은 스킨 파일 전달 시 안내드리고 있고 이외의 부분은 참고하시면 어느 정도 도움이 될 것 같습니다.

 


 

스킨 기본 사용 안내

 

  • 저는 주기적으로 컴퓨터를 포멧하기 때문에 스킨 파일이 지워질 수 있습니다. 반드시 스킨 파일을 별도로 백업해주세요!!

  • 단축키 안내 (관리자 페이지, 글 쓰기, 홈, 방명록으로 이동 등)

  • 이전에 제 스킨을 구매하셔서 스킨 옵션을 설정해 사용하신 적이 있다면, 이전 설정 값이 남아있기 때문에 스킨을 변경해도 이전 스킨 설정값이 남아있을 수 있습니다. 이런 경우 제공하신 시안을 토대로 변경하거나, 본인이 원하는대로 커스텀하여 사용하시면 됩니다. 오류가 아닙니다.

  • 크롬, 웨일 등 크로미움 기반 브라우저 외 브라우저에서는 색상등 몇몇 기능을 추가 설정(스킨 옵션) 에서 변경해도 적용되지 않고 기본 설정 값으로만 설정됩니다. 변경을 원하시면 직접 css에서 설정을 해주세요.

  • 대댓글 버튼 / 댓글, 방명록에 자동 html 기능은 댓글 페이지는 첫 페이지에만 적용되며, 다음 페이지, 새 댓글, 새 방명록, 댓글 및 방명록 수정 시에는 적용되지 않습니다 (능력 한계)

  • 댓글 방명록에 자동 html 기능중 유튜브 영상은 주소에 - 와 같은 영숫자가 아닌 다른 기호가 있으면 비정상 작동합니다. (능력 한계)
    - 20.06.10 이후 제작된 스킨은 이 문제 수정됨 (문제 있으신 분께서는 별도 문의 주시면 수정 방법 안내 드리겠습니다.)

  • 유튜브 반응형은 기존 에디터, 댓글, 방명록에서만 적용되며, 세로 방향(세로캠)으로 사용 시 iframe 소스에서 width와 height의 수치를 서로 바꿔 입력하시면 반응형 세로캠이 됩니다.

  • 스크립트를 사용하지 않고 부분 목록형 등을 적용하기 위해 기존에 사용하던 소스를 변경하였고 이 변경된 소스는 티스토리에서 보호글 목록에 관한 부분을 제공하지 않아 목록에서 보호글이란 표기가 되지 않습니다.
    - 20.06.10 이후 제작된 스킨은 일부 지원 됩니다.

  • 아이폰 사파리에서 뒤로 가기 사용 시 이전에 보고 있던 스크롤 위치가 경우 부드러운 화면 전환을 사용 시 사파리의 캐시가 원인인 문제가 있어, 이를 우회하는 과정에서 이전 페이지를 다시 불러오도록하였기 때문에 이를 원치 않으시는 분께서는
    스킨 편집 > 스킨 옵션 - 디자인 - 부드러운 화면 전환 을 off 하세요.
    제 경우에는 테스트 해봤지만 정상적으로 확인됩니다. (ios 13.5)

 


 

스킨 설치, 적용, 설정 방법

대부분의 기본적인 사용 방법은 아래 비루한 영상에 설명이 되어있으니, 티스토리 초보이신 분 께서는 꼭 보시길 추천드립니다.

 


 

요약 필수 설정

1. 관리 > 스킨 편집 - 홈설정, 기본 설정에서 글 수, 목록 구성 요소 설정 필수
2. 의뢰한 목록 형태가 두가지 이상인 경우관리 > 스킨 편집 > 기본 설정 - 기본 목록 스타일 재설정
   →
 관리 > 콘텐츠 - 카테고리 관리 > 각각 카테고리 마우스 오버 > 관리 클릭 >

목록 스타일 설정 필수

3. 구에디터를 기본 사용하는 경우 관리 > 스킨 편집 > 스킨 옵션 - 넓이 설정
   관리 > 콘텐츠 - 설정 > 에디터 가로 폭은 [ ] px로 설정합니다. 에서 변경한 사이즈의 본문 영역 넓이를 입력
4. 각각의 카테고리 이름이 긴 경우 관리 > 콘텐츠 - 카테고리 관리에서 카테고리 명이 [] 글자까지 표시됩니다. 설정
5. 반응형을 의뢰한 경우 관리 > 꾸미기 - 모바일 > 티스토리 모바일웹 자동 연결을 [ 사용하지 않습니다 ] 설정

 


 

목록 설정 방법

목록 형태를 한가지가 아닌 두가지 이상 의뢰하신 분께서는 반드시 아래 안내를 참고하여 목록을 설정하세요.
 

  • 홈 화면 글 수, 글 목록 글 수 - 홈 화면은 첫 화면, 글 목록은 각 카테고리 클릭 시의 목록 수를 정합니다. pc버전과 모바일 버전의 썸네일 갯수가 맞도록 설정해주세요
    예 - pc버전 가로 3개, 모바일 가로 2개씩 썸네일이 나온다면 목록 수를 6개나 12개 같이 6의 배수로 설정하시면 됩니다.
  • 목록 구성 요소 - 목록만 나오거나, 내용만 나오거나, 목록과 내용이 함께 나오도록 설정이 가능합니다.
  • 태그 클라우드 순서 - 태그 클라우드를 의뢰 시에만 적용이되는 부분으로 의뢰하지 않은 경우 아무거나 설정해도 무관합니다.
  • 기본 목록 스타일 - 중요! 디폴트로 사용할 목록의 형태를 설정합니다.
    처음 스킨 설치 시 목록이 비정상적으로 나오는데 여기서 목록 스타일을 설정해주면 정상적으로 보여집니다.
    (갤러리형으로 되어있어도 다시 한번 선택하고 적용을 눌러주세요!!)
    이후 각각의 카테고리 목록에 적용이 되어있지 않다면 아래 안내를 따라 갤러리형 등을 설정하세요

 


 

부분 갤러리형 or 부분 목록형 or 부분 웹진형, 카테고리 공개 여부 설정

첫 페이지만 목록이 정상적으로 나오고, 각각의 카테고리를 눌렀을 때 목록이 비정상적인 경우 이 부분을 설정하지 않은 것이니 설정하세요.

 
관리 > 콘텐츠 - 카테고리 관리

변경하고 싶은 카테고리에 마우스를 가져다대면 몇 가지 버튼이 표시되는데 이 중 관리를 클릭합니다.
만약 지원하지 않는 스킨이라는 안내가 나오면 새로고침을 하거나,
관리 > 스킨 편집 > html 편집 > 파일업로드 > index.xml 파일을 업로드 후 다시 설정해봅니다.

  • 공개 설정 - 카테고리 자체를 비공개할 수 있습니다. 로그인한 블로그 주인에게는 카테고리가 보이고, 주인이 아닌 경우 보이지 않습니다.
  • 목록 스타일 - 부분 갤러리형 or 부분 목록형 or 부분 웹진형을 설정합니다.
  • 대표 이미지 - 카테고리에 대표 이미지를 적용합니다. (시안에 따라서)
  • 카테고리 소개 - 카테고리에 관한 설명을 작성합니다. (시안에 따라서)
  • 하위 카테고리에 함께 적용합니다 - 서브 카테고리가 있는 경우 서브 카테고리에도 동일하게 적용한다는 뜻입니다.

 


 

스킨 옵션

아래 스킨 옵션은 모두 다 제공 되는 것이 아닌 시안, 의뢰, 협의 사항에 따라 다르게 제공됩니다.
더보기

색상 선택 공통

아래 스킨 옵션을 설명하는 부분에서 색상을 입력하는 부분이 나옵니다.

색상 입력은 제시되는 색상을 선택해도 되지만, 직접 색상 코드를 입력해도 되며 투명도를 지정하길 원한다면 #??????의 뒤에 00 ~ FF를 더 붙여 설정하면 투명도가 설정됩니다.
예 - #00000000 = 블랙 투명도0 / #00000080 = 블랙 투명도 50% / #000000FF = 블랙 투명도 100% 

단 일부 브라우저에서는 지원하지 않기 때문에, 기타 브라우저를 사용하시는 분은 아래 스킨 옵션이 아닌 CSS나 html의 style에서 opacity나 rgba등을 사용해 직접 수정해야 할 수 있습니다.

 


 

첫 페이지를 특정 글로 설정

티스토리에 접속 시 가장 첫 화면을 특정 페이지로 보여주고 싶은 경우 설정합니다.
커버와 중복해 사용할 수 없으며, 입력하지 않을 경우 이 기능은 off 됩니다.
네이버 웹마스터 도구에 등록을 하셨다면 리디렉션으로 인지하여 검색 결과에 좋지 않은 결과를 줄 수 있습니다.

예 )

 

  • 공지 게시판 - https://sweet-myo.tistory.com/notice → notice 입력
  • 공지 게시판의 특정 글 - https://sweet-myo.tistory.com/notice/3 → notice/3 입력
  • 특정 글 - https://sweet-myo.tistory.com/356 → 356 입력
  • 특정 카테고리 영문 - 카테고리 이름이 Sweet 인 경우→ category/Sweet 입력
    (카테고리 이름의 대소문자를 정확히 동일하게 적어주세요)
  • 특정 카테고리 한글 - 원하는 카테고리에서 우클릭 후 크롬 기준 [ 링크 주소 복사 ] 클릭 → 내 티스토리 주소를 제외한 나머지를 입력하면 됩니다.
    https://sweet-myo.tistory.com/category/SKIN/%EA%B5%AC%EB%A7%A4%20%26%20%EC%BB%A4%EB%AF%B8%EC%85%98%20%EC%95%88%EB%82%B4 라면
    → category/SKIN/%EA%B5%AC%EB%A7%A4%20%26%20%EC%BB%A4%EB%AF%B8%EC%85%98%20%EC%95%88%EB%82%B4  입력

 

넓이, 높이

넓이 - 스킨의 넓이(폭)를 설정합니다. 단위는 px입니다.
높이 - 부분 스크롤형으로 의뢰한 경우에 제공되며 단위는 px 또는 % 입니다.

넓이를 변경한 후에는 아래 안내 중 썸네일 비율 설정을 통해 썸네일 사이즈를 알맞게 설정해주고 (목록형만 사용시 불필요),
관리 > 콘텐츠 - 설정 > 에디터 가로 폭은 [ ] px로 설정합니다. 에서 변경한 사이즈의 본문 영역 넓이를 입력해주시는게 좋습니다 (새 에디터 사용시 불필요)

 


 

마우스 커서(png)

원하는 이미지를 마우스 커서로 사용합니다.
투명화처리된 png나 gif파일을 권장하며 cur파일인 경우 (링크)에서 png파일로 변환 후 업로드 해 사용할 수 있습니다.
이 옵션은 cursors-4u같은 사이트에서 제공하는 소스는 보안설정이 되어있지 않아 적용을해도 정상적으로 보이지 않기 때문에 파일을 다운 받아 업로드 해 사용할 수 있도록 제작했습니다.

 

배경 이미지, 모바일 배경 이미지

 

스킨의 배경을 이미지로 설정합니다. 
모바일의 경우 가로로 긴 이미지보다는 세로로 긴 이미지를 권장하며, 모바일 웹 특성상 배경이미지가 정상적으로 깔리지 않아, 뒤에 배경처럼 보이는 박스하나를 둔 것이라 생각하시는 것과는 조금 다를 수 있습니다.
특히 삼성브라우저와 같이 위 아래로 스크롤 시 위나 아래에 툴바 영역이 생겨 브라우저 화면이 좁아지는 경우 이미지의 사이즈가 변동이 됨을 확인할 수 있습니다.

배경색 또는 배경 이미지를 설정 후 카피라이트 삭제 옵션을 구매하지 않은 분 께서 카피라이트가 배경색에 묻히도록 사용하시면 위반사항이 되므로 이런 경우 CSS에 .copy a { color: #색상코드; } 색상 코드를 넣어 추가해주세요.
블랙 : #000000 / 화이트 : #FFFFFF / 레드 : #F00000 등 이 외 원하는 색상코드를 넣어 카피라이트가 잘 보이도록 수정해주시면 됩니다.


PC와 모바일 모두 1개의 이미지가 꽉차도록 설정되어있으며 작은 이미지를 패턴으로 사용하길 원하는 경우 아래 안내를 따라 수정합니다.

CSS - body

body { // pc버전 배경
	background-color: var(--bg);
	-webkit-background-size: cover; /* 삭제 */
	-moz-background-size: cover; /* 삭제 */
	-o-background-size: cover; /* 삭제 */
	background-size: cover; /* 삭제 */
	background-attachment: fixed; /* 삭제 */
	background-repeat: no-repeat; /* 삭제 */
}
.mbg { // 모바일 배경
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-size: cover; /* 삭제 */
        background-position: center center; /* 삭제 */
        z-index: -1;
    }

 

 

색상

색상은 시안에 따라 다르게 제공되며 사용한 색상이 많은 경우 일부만 제공되거나 제공되지 않을 수 있습니다.
이 옵션은 익스플로러는 적용되지 않기 때문에 여기에서 색상 변경을 해도 익스플로러에서는 시안을 기준으로 한 색상이 기본 적용 됩니다.
이를 원치 않을 경우, 일부 색상 변경을 원하는 경우에는 css에서 직접 수정을 해야합니다.

 

부드러운 스크롤

마우스 휠을 이용해 스크롤 할 때 부드럽게 멈추도록 설정합니다.

 

부드러운 화면 전환

화면이 전환 될 때 (페이지가 변경될 때) 부드럽~게 전환이 되도록 합니다.

 

2021. 06 ~ 이후 제작된 스킨

없음, 특정 시간, 로딩 중 한가지로 선택 가능

  • 없음 - 아무 효과 없음. 스킨에 스크립트로 인해 변경되는부분이 있을 경우 변경되는 과정이 보일 수 있음.
  • 특정 시간 - 클릭 시 서서히 사라지는 효과 + 전환 시 CSS에 설정된 특정 시간 동안 서서히 나타남. 페이지가 로딩되는 속도보다 이 특정 시간이 짧을 경우 스킨에 스크립트로 인해 변경되는 부분이 있을 경우 변경되는 과정이 보일 수 있음.
  • 로딩 - 클릭 시 서서히 사라지는 효과 + 로딩이 끝나고 서서히 나타남. 목록이 많거나, 움짤 블로그라서 첨부된 움짤이 많은 경우, 첨부된 유튜브가 많은 경우 초기 방문 시 로딩이 느리기 때문에 화면이 나오는데 시간이 걸릴 수 있음.

 


 

로고

타이틀 로고가 아닌 프로필 사진 같은 로고를 사용할 경우 사용합니다.

 

타이틀 로고

텍스트로 된 블로그 이름을 이미지로 변경합니다. 투명화된 png파일을 권장합니다. 최대 높이가 함께 안내되오니 참고하세요.

 

소개글

소개글이나 적고 싶은 글을 설정합니다.

 


 

새 글 아이콘

관리 > 콘텐츠 - 카테고리 관리 > 카테고리에 새글 발행 여부를 [ 표시합니다 ] 를 설정을  꼬옥 하셔야하고,
기본으로 설정된 아이콘의 변경을 원하는 경우 Themify / FontAwesome 중에서 원하는 아이콘을 찾아 <i class="아이콘이름"></i> 와 같은 식으로 입력하거나,
이미지인 경우 <img src="이미지url" alt="새글아이콘"> 이러한 형식으로 입력합니다.
이미지로 입력할 경우 반드시 콩알만치 작은 이미지를 넣어줘야 스킨이 틀어지지 않습니다.

 

공지 게시판 이름, 방명록 이름

각각의 이름을 지정합니다. 입력하지 않을 경우 나타나지 않습니다.

 


 

노이미지

이미지가 첨부되지 않은 글의 썸네일(미리보기 이미지)을 원하는 이미지로 변경합니다.

 


 

단락 앞 뒤 공백

관리 > 콘텐츠 - 설정 > 단락 앞뒤에 공백을 [ 사용하지 않습니다 / 사용합니다 ]
또는 기존 에디터의 문단 간격 없음을 지원하는 기능으로
글 작성 시 문단(긴 글) 또는 단락을 띄울 때 엔터 한번으로 단락을 나누어 간편하게 사용을 원하시는 분은 on - 이 경우 단순 줄 바꿈은 shift + enter,
그냥 엔터를 여러번 처서 단락을 나누시는 분은 체크를 off
하시면 됩니다.

스킨 기본 기능으로 넣을 수도 있었지만 기존에 엔터 여러번 쳐서 단락을 나누시던 분은 불편함을 느낄 수 있어 옵션화했습니다.

 

더보기 버튼

새 에디터의 더보기(접은글) 버튼의 개별 이름이 없어 불편함을 개선하기 위한 옵션입니다.
PC, 모바일 웹에서만 적용되며, 티스토리 어플, 티스토리 제공 모바일 웹에서는 적용되지 않습니다.

  • 반자동 - html 모드에서 [data-text-more="더보기"]에서 더보기 이름을 직접 설정하면 자동으로 적용해줍니다. 티스토리 어플, 티스토리 제공 모바일 웹에서는 가장 첫번째 더보기 이름이 반복되어 보여지며, 이 부분은 제가 해결할 수 있는 부분이 아닌 점 참고 바랍니다.
  • 자동 - 더보기 내용의 가장 상위에 적은 글이 자동으로 더보기 버튼의 이름이 됩니다. (p태그 안에 내용만 적용 됨)
  • 완전 자동 - 더보기 내용의 가장 상위에 적은 글이 자동으로 더보기 버튼의 이름이 되며, 버튼 이름으로 사용한 내용은 자동으로 보이지 않도록 설정합니다. (p태그 안에 내용만 적용 됨)

 


 

댓글 펼침

기본 설정에 있는 댓글 펼침과 표면상 같은 기능입니다.
기본 설정의 댓글 펼침을 이용해 댓글창을 접어두고 사용할 경우 화면 로딩 시에 댓글 리스트를 불러오지 않기 때문에,
댓글의 url 자동링크, 자동 이미지, 자동 유튜브, 자동 메일주소링크 기능이 작동되지 않아 별도로 만들어두었습니다.
따라서 기본 설정의 댓글 펼침을 사용하지 마시고 이 옵션을 사용해주세요! (19.10.28 현재 기본 설정에 댓글 펼침이 없어졌습니다. 오류인지는 잘 모르겠네요..)

 

프로필 사진

댓글, 방명록에 프로필 사진을 표시합니다.
on 할 경우 티스토리 관리 > 플러그인 > 블로그 아이콘 설정 -> 64x64 설정이 반드시 필요합니다. (2021.06 이전 해당)

 

댓글 작성순 → 최신순

티스토리의 댓글 시스템은 나중에 달린 댓글이 아래로 달리는 시스템입니다.
이를 최신순으로 변경을 원할 경우 사용하는 옵션입니다.

 


 

SNS ID

아이디를 입력하면 카테고리 메뉴 왼쪽 상단에 각 SNS 아이콘으로 표시되며, 입력하지 않으면 나타나지 않습니다.
유튜브는 ID만 입력하는 것이 아닌 채널 주소(url)을 전부 입력합니다

 


 

기타 수정 or 사용 팁

더보기

html에서 thumbox를 검색해 C600x600등 비슷해 보이는 부분을 수정합니다. 어느 부분의 썸네일인지는 조금 위에 있는 주석을 통해 확인할 수 있습니다.
본문 영역 넓이를 늘려 썸네일 크기가 늘어나 깨지는 경우 더 큰 사이즈로 변경합니다 (사이즈가 커질 수록 로딩이 느려짐, 늘릴 수록 움짤 플레이가 짧아질 수 있음 = 스킨으로 인한 것이 아님) 

참고 http://cocosoft.kr/349 

조금 더 상세하게 설명하자면 썸네일 파일 용량이 클 수록 플레이되는 길이가 짧아지니 스킨의 사이즈를 줄이고, 배열을 나눠 가능한 썸네일을 불러올 때 용량을 줄여 불러오도록 하면 됩니다.
수정 시 모바일에서는 어떻게 보여지는지도 확인해서 본인이 원하는 적당치를 설정해 사용하길 권장합니다.

 

더보기

관리 > 왼쪽 사이드바에서 쓰기 옆 v 버튼 클릭 > 공지

또는

관리 > 콘텐츠 - 공지 관리 > 공지 쓰기

더보기

html - <i class="fa fa-???></i> , CSS - font-family: "fontAwesome"; 로 되어있는 곳은 아래 사이트를 참고하세요
https://fontawesome.com/v4.7.0/icons/

html - <i class="ti-???"></i> , CSS - font-family: "themify"; 인 경우 아래 사이트를 참고하여 변경하시면 됩니다.
https://themify.me/themify-icons

이 사이트의 경우 css에서 사용하는 코드가 기재가 되어있지 않기 때문에 수동으로 찾아야하는데요

위 사이트에서 필요한 아이콘 위에서 마우스 우클릭 > 검사를 한 후 나오는 창에서 선택 되어있는 span 클래스를 열면 ::before 이란 단어가 나오는데
이걸 클릭하면 우측에 나오는 css창에 적혀진 content:"/영숫자" 를 복사해 스킨의 CSS에서 수정하고 싶은 아이콘을 변경하면 됩니다.

더보기

html에서 empty 검색 후 해당 부분을 직접 변경합니다

더보기

현재 공감버튼 꾸러미의 우측에 땡땡땡 버튼에는 신고버튼이 포함되어있습니다.
예전부터 이 신고 버튼을 삭제할 경우 티스토리에서 블락을 건다는 소문이 있어 혹시 모르니 제가 직접 걸어드리고 있지는 않습니다.

따라서 필요한 경우 아래 안내를 따라 직접 CSS를 추가해 수정하시길 바랍니다.

body .container_postbtn { display: none !important; } /* 공감, 구독, CCL을 포함한 한 줄 모두 삭제 */
body .container_postbtn > .postbtn_like { display: none !important; } /* 공감 버튼 꾸러미만 삭제 */
body .wrap_btn:not(.wrap_btn_etc) { display: none !important; } /* 땡땡땡 버튼을 제외한 공감, 공유, 방문 기록 버튼 제거 */ body .postbtn_like + button.btn_menu_toolbar { display: none !important; } /* 구독하기 버튼만 제거 */
body .postbtn_like + .postbtn_ccl { display: none !important; } /* CCL 버튼만 제거 */
더보기

티스토리 관리에서 카테고리를 먼저 생성한 후 > 티스토리 관리 > 꾸미기 - 메뉴 에서 설정합니다.

 


 

커버

더보기
커버에는 보호글, 비공개 글은 나오지 않고 공개된 글만 나옵니다.
더보기

최신 글, 글 선택, 인기 글로 설정하여 사용할 경우 
작성한 글의 내용이 모두 요약글 형태로 줄 바꿈이나 효과 없이 한줄로 표기 되기 때문에 직접 입력을 권장합니다.

 

직접 입력 시 html 사용이 가능하기 때문에
관리 > 글쓰기에서 원하는대로 글을 작성한 후 html 보기하여 복사 > 커버 - 공지 > 직접 입력 > 내용 수정 을 하시면 편합니다.

이 과정에서 이미지를 첨부할 때
첨부할 이미지가 1개이고 커버 공지 영역 최 상단에 위치시킬 때에는 커버에서 제공하는 이미지 첨부 기능을 사용하면 간편하고,
이미지가 여러개거나, 특정 위치일 경우 위에서 복사 붙여넣기 한 부분의 와 같은 부분이 이미지가 위치하는 부분이니 이 부분을 지우고 <img src=""> 를 넣은 후 이미지의 주소를 따서 따옴표 사이에 입력합니다.

이미지 주소 따는 방법은 크롬, 웨일 기준으로 커버 공지를 위해 방금 작성 완료한 글의 첨부하고 싶은 이미지 위에서 마우스 우클릭 한 후 검사 클릭 
아래와 같은 부분이 보이면 src의 주소를 복사해 아까 입력한 <img src="">의 따옴표 사이에 입력하면 됩니다.

 

추가할 링크가 없을 경우 URL에 기본적으로 삽입되어있는 https:// 를 삭제하면 커버 공지에서 READ MORE가 표기 되지 않습니다. ( 이 부분은 시안에 따라 다릅니다 )

더보기

보다 자세한 예제 - https://kenwheeler.github.io/slick/

myo_cover.js를 메모장 등으로 열은 후 아래 안내를 참고하여 수정 후 파일 업로드 합니다.
(파일 업로드 후에도 변화가 없으면 크롬, 웨일 기준 컨트롤+쉬프트+R을 동시에 눌러 새로고침 or 쿠키, 캐시 삭제 or html에서 myo_cover.js?ver=1.0 등 버전 표시를 붙여 업로드 시 마다 버전 숫자를 변경합니다)
주석이 없는 부분은 위에 설명을 한 부분이니 설명 보고 수정하세요

 

// slick
$(function () {
    $("#c-slider .slick").slick({ // 슬라이드1
        dots: true, /* 페이지 버튼 - 삭제는 false */
        infinite: true, /* 무한 재생 - 1번 재생은 false */
        autoplay: true, /* 자동 재생 - 정지는 false */
        autoplaySpeed: 4000, /* 전환 속도 */
        pauseOnHover: false, /* 마우스 오버 시 멈춤 취소 - 사용 시 true 또는 이 줄 삭제 */
        fade: true
    });

    $("#c-slider2 #myo_gal").slick({ // 슬라이드2
        infinite: true,
        autoplay: true,
        rows: 2,  /* 줄(행) 수 */
        slidesToShow: 4,  /* 보여지는 썸네일 수 */
        slidesToScroll: 4,/* 넘어가는 썸네일 수 */
        arrows: false,  /* 이전, 다음 버튼 - 적용 시 true (소스는 설정되어있지 않습니다. 직접 설정하셔야해요) */
        pauseOnHover: false,
        autoplaySpeed: 4000,
        responsive: [{
            breakpoint: 426, /* 반응형 적용 시 전환 포인트, 아래로는 반응형 세팅 */
            settings: {
                rows: 2,
                slidesToShow: 2,
                slidesToScroll: 2
            }
                    }]
    });

    $("#c-slider3 #myo_gal").slick({ // 슬라이드3
        infinite: true,
        autoplay: true,
        slidesToShow: 6,
        slidesToScroll: 1,
        arrows: false,
        pauseOnHover: false,
        autoplaySpeed: 4000,
        responsive: [{
            breakpoint: 426,
            settings: {
                rows: 1,
                slidesToShow: 2
            }
                    }]
    });

    $("#c-notice .c-noti > ul ").slick({ // 슬라이드 공지
        dots: true,
        arrows: false,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 4000,
        pauseOnHover: false
    });
});

 


 

자주 묻는 질문, 알려진 문제 (또는 문제처럼 보이지만 문제가 아닌 부분)

 

자주 묻는 질문

티스토리 기본 더보기 1. 파일 업로드 누락, 엑박(엑스박스 : 이미지가 뜨지 않는 현상) - images 폴더 안에 파일을 모두 업로드 해주세요 블로그 관리 > 꾸미기 > 스킨편집 > html 편집 > 파일 업로드 >

sweet-myo.tistory.com

더보기

익스플로러, 사파리 등 사용 중이고 스킨이 이상해요

익스플로러는 지원하지 않으며, 사파리는 모바일만 테스트가 가능합니다.
맥, 아이패드 등은 테스트할 수 있는 기기가 없어 지원하지 않습니다.

제작, 테스트 환경 : Windows10, 크롬, 웨일 브라우저, 갤럭시 A52, 갤럭시 A30, LG G6, 갤럭시탭 A7 2020, 아마존 파이어 HD 8인치, 삼성, 크롬, 웨일 브라우저, 아이폰 6S, 사파리, 웨일 브라우저

더보기

유튜브 이미지 썸네일 적용 시 일부 화질 저하

고화질 썸네일을 제공하지 않는 영상입니다.
이 경우 화질을 낮춰서 읽어 들이도록 소스를 제작했기 때문에 정상이며 이는 스킨의 문제가 아닙니다

더보기

유튜브 이미지 썸네일 또는 유튜브 동영상 썸네일 일부 적용이 안돼요

유튜브 이미지 또는 유튜브 동영상으로 변환해야 하는 숫자가 너무 많으면 일부 적용이 되지 않습니다.
목록(썸네일) 수를 줄이세요.

더보기

다크 모드일 때 트위터 위젯의 글씨가 까매서 보이지 않아요

트위터 위젯의 구조상 제 실력으로는 변경되도록 할 수 없었습니다.

더보기

부드러운 화면 전환 off 후 로딩 시 변경되는 액션이 있어요

로딩 순서가 있기 때문에 변경되는 과정이 눈에 보일 수 있습니다. 따라서 가급적 on으로 설정할 것을 권장합니다.

더보기

로딩 시 깜빡이는 문제가 있어요

스킨 내 다크 모드 전환 아이콘을 눌러 색상 모드를 전환한 적이 있어 os나 브라우저의 테마 설정과, 스킨의 테마 모드가 서로 다르게 적용되어 있을 경우 발생하는 문제입니다.

조금 더 상세하게 설명하자면 os나 브라우저의 설정이 먼저 로딩된 다음 스킨 내 다크 모드 아이콘에서 설정한 캐시 값이 로딩되어 적용되기 때문에 발생하는 문제이며, 이는 브라우저 설정에서 캐시를 제거해 초기화하거나, 다크 모드 스크립트가 적용되지 않도록 하는 방법 외 개선할 방법이 없습니다.

더보기

로딩이 느려요

다음 중 해당하는 사유가 있는지 체크해보세요.
해당되는 사유가 많을수록 로딩 속도는 느려집니다. 

  1. 목록의 글 수가 많음
  2. 썸네일 사이즈를 큰 사이즈로 변경함
  3. 움짤(gif) 썸네일
  4. 유튜브 동영상 썸네일
  5. 파일 크기가 큰 배경 이미지
  6. 목록+내용으로 사용중이고 목록 갯수가 많음
  7. 내용으로 사용 중이고 유튜브 영상이 첨부된 글이 많음
  8. 첨부 이미지가 모두 gif 움짤이고 갯수가 많음
더보기

카테고리마다 목록 개수를 다르게 하고 싶어요

불가능합니다.

더보기

본문 페이지의 글이 속해있는 카테고리에 따라 무언가 다르게 하고 싶어요

별도 스크립트가 필요합니다.
스킨에 기본으로 포함되지 않은 부분이기 때문에 이 부분에 대한 답변은 불가합니다.

더보기

본문 폰트 사이즈, 색상, 폰트를 바꾸고 싶어요

CSS에서 .text-item에 추가하면 됩니다.

더보기

댓글, 방명록에 글을 작성하거나 답글을 달거나 수정을 하면 자동 이미지, 자동 링크, 유튜브 동영상 등 문제가 생겨요

스킨 제작 시 이 부분은 스크립트를 이용한 부분으로 댓글, 방명록에 내용이 변경되면 스크립트 적용된 부분들이 풀립니다. 그럼 다시 적용이 되도록 해야 하는데 제 실력 부족으로 아직 거기까진 하지 못했습니다.
새로 고침 하세요 😥

더보기

배경색 때문에 카피라이트가 보이지 않아요

CSS에서 .copy a {color: #색상 코드;}를 입력하면 됩니다.

이를 악용해 무단으로 보이지 않도록 설정하면 안 됩니다.

더보기

PC와 모바일 색상이 달라요

위 안내 중 [ 다크 모드 ]의 설명을 먼저 읽어보신 후
그래도 해결이 되지 않는다면 아래 [ 문의하기 ] 내용 참고하셔서 문의 남겨주세요.

728x90
반응형