1. 관리 > 스킨 편집 - 홈설정, 기본 설정에서 글 수, 목록 구성 요소 설정 필수 2. 의뢰한 목록 형태가 두가지 이상인 경우 : 관리 > 스킨 편집 > 기본 설정- 기본 목록 스타일 재설정 → 관리 > 콘텐츠 - 카테고리 관리 > 각각 카테고리 마우스 오버 > 관리 클릭 > 목록 스타일 설정 필수 3. 구에디터를 기본 사용하는 경우 : 관리 > 스킨 편집 > 스킨 옵션 - 넓이 설정 후 관리 > 콘텐츠 - 설정 > 에디터 가로 폭은 [ ] px로 설정합니다. 에서 변경한 사이즈의 본문 영역 넓이를 입력 4. 각각의 카테고리 이름이 긴 경우 : 관리 > 콘텐츠 - 카테고리 관리에서 카테고리 명이 [] 글자까지 표시됩니다. 설정 5. 반응형 설정 :관리 > 꾸미기 - 모바일 > 티스토리 모바일웹 자동 연결을 [ 사용하지 않습니다 ] 설정
스킨 설치 후 기본 설정
관리 > 꾸미기 - 스킨 편집
홈 설정 = 첫 화면 / 기본 설정 = 홈 화면 외 다른 화면
홈 화면 글 수, 글 목록 글 수 - 자율 (이지만 갤러리형이 15에 맞춰져 제작되어있어 15 추천)
목록 구성 요소 - 자율 (기본 목록 스타일이 갤러리형일 때는 내용이 나오지 않음)
태그 클라우드 순서 - 미지원
기본 목록 스타일 - 중요! 디폴트로 사용할 목록의 형태를 설정합니다.
처음 스킨 설치 시 목록이 비정상적으로 나오는데 여기서 목록 스타일을 설정해주면 정상적으로 보여집니다. (스킨 문제가 아닌 티스토리의 문제입니다. 갤러리형으로 되어있어도 다시 한번 선택하고 적용을 눌러주세요!!)
이후 각각의 카테고리(목록 또는 게시판)에 적용이 되어있지 않다면 아래 안내를 따라 설정하세요
각 카테고리 목록 스타일 설정 / 부분 갤러리 / 부분 목록 / 부분 웹진형
관리 > 콘텐츠 - 카테고리 관리 > 변경하고 싶은 카테고리에 마우스를 가져다대면 몇 가지 버튼이 표시되는데 이 중 관리를 클릭
공개 설정 - 카테고리 자체를 비공개할 수 있습니다. 로그인한 블로그 주인에게는 카테고리가 보이고, 주인이 아닌 경우 보이지 않습니다.
목록 스타일 - 각각의 카테고리에 원하는 타입의 목록을 설정합니다. ( 지원하지 않는 스킨이라는 알림이 뜰 경우 새로 고침을 하면 보통은 됩니다 = 스킨 문제 아님! )
대표 이미지 - 미지원
카테고리 소개 - 미지원
하위 카테고리에 함께 적용합니다 - 서브 카테고리가 있는 경우 서브 카테고리에도 동일하게 적용한다는 뜻입니다. 목록 스타일은 하위 카테고리에 함께 적용 되지 않으니 각각 하나씩 지정하세요.
이 과정이 처음에는 번거롭더라도, 나중에 유지, 보수가 스크립트 수정하는 스킨 보다 훨씬 쉬우니 해두시면 이후에 편할겁니다.
기능 안내
색상 선택 공통
아래 스킨 옵션을 설명하는 부분에서 색상을 입력하는 부분이 나옵니다.
색상 입력은 제시되는 색상을 선택해도 되지만, 직접 색상 코드를 입력해도 되며 투명도를 지정하길 원한다면 #??????의 뒤에 00 ~ FF를 더 붙여 설정하면 투명도가 설정됩니다. 예 - #00000000 = 블랙 투명도0 / #00000080 = 블랙 투명도 50% / #000000FF = 블랙 투명도 100%
단 일부 브라우저에서는 지원하지 않기 때문에, 기타 브라우저를 사용하시는 분은 아래 스킨 옵션이 아닌 CSS나 html의 style에서 opacity나 rgba등을 사용해 직접 수정해야 할 수 있습니다. 또한 지원하지 않는 브라우저에서는 제가 설정한 색상과 사이즈가 적용되도록 해두었기 때문에 스킨 옵션에서 사이즈와 색상을 변경해도 변경되지 않는다면 스킨 옵션 안내 섹션 아래 별도 안내를 따라 css를 수기로 변경해주세요.
첫 페이지를 특정 글로 설정
티스토리에 접속 시 가장 첫 화면을 특정 페이지로 보여주고 싶은 경우 설정합니다. 커버와 중복해 사용할 수 없으며, 입력하지 않을 경우 이 기능은 off 됩니다. 네이버 웹마스터 도구에 등록을 하셨다면 리디렉션으로 인지하여 검색 결과에 좋지 않은 결과를 줄 수 있습니다.
예 )
공지 게시판 - https://sweet-myo.tistory.com/notice → notice 입력
공지 게시판의 특정 글 - https://sweet-myo.tistory.com/notice/3 → notice/3 입력
특정 글 - https://sweet-myo.tistory.com/356 → 356 입력
넓이
스킨의 넓이를 설정합니다. 단위는 px입니다. 넓이를 변경한 후 썸네일이 깨지는 문제가 있거나 하면 아래 안내 중 스킨 옵션에서 목록 - 갤러리형 비율 변경을 설정하세요. (목록형만 사용시 불필요), 그리고 관리 > 콘텐츠 - 설정 > 에디터 가로 폭은 [ ] px로 설정합니다. 에서 변경한 사이즈의 본문 영역 넓이를 입력해주시는게 좋습니다 (새 에디터 사용시 불필요)
마우스 커서(png)
원하는 이미지를 마우스 커서로 사용합니다. 투명화처리된 png나 gif파일을 권장하며 cur파일인 경우 (링크)에서 png파일로 변환 후 업로드 해 사용할 수 있습니다. 이 때 사이즈가 너무 크면 적용이 되지 않으니 반드시 64x64이하 사이즈로 수정 후 업로드하세요. 이 옵션은 cursors-4u같은 사이트에서 제공하는 소스는 보안설정이 되어있지 않아 적용을해도 정상적으로 보이지 않기 때문에 파일을 다운 받아 업로드 해 사용할 수 있도록 제작했습니다.
배경 이미지
스킨의 배경을 이미지로 설정합니다. 모바일의 경우 가로로 긴 이미지보다는 세로로 긴 이미지를 권장하며, 모바일 웹 특성상 배경이미지가 정상적으로 깔리지 않아, 뒤에 배경처럼 보이는 박스하나를 둔 것이라 생각하시는 것과는 조금 다를 수 있습니다. 특히 삼성브라우저와 같이 위 아래로 스크롤 시 위나 아래에 툴바 영역이 생겨 브라우저 화면이 좁아지는 경우 이미지의 사이즈가 변동이 됨을 확인할 수 있습니다.
배경색 또는 배경 이미지를 설정 후 카피라이트 삭제 옵션을 구매하지 않은 분 께서 카피라이트가 배경색에 묻히도록 사용하시면 위반사항이 되므로 이런 경우 CSS에 .copy a { color: #색상코드; } 색상 코드를 넣어 추가해주세요. 블랙 : #000000 / 화이트 : #FFFFFF / 레드 : #F00000 등 이 외 원하는 색상코드를 넣어 카피라이트가 잘 보이도록 수정해주시면 됩니다.
PC와 모바일 모두 1개의 이미지가 꽉차도록 설정되어있으며 작은 이미지를 패턴으로 사용하길 원하는 경우 아래 안내를 따라 수정합니다.
텍스트로 된 블로그 이름을 이미지로 변경합니다. 투명화된 png파일을 권장합니다. 최대 높이 50px로 설정되어 있습니다.
새 글 아이콘
관리 > 콘텐츠 - 카테고리 관리 > 카테고리에 새글 발행 여부를 [ 표시합니다 ] 를 설정을 꼬옥 하셔야하고, 기본으로 설정된 아이콘의 변경을 원하는 경우 Themify / FontAwesome 중에서 원하는 아이콘을 찾아 <i class="아이콘이름"></i> 와 같은 식으로 입력하거나, 이미지인 경우 <img src="이미지url" alt="새글아이콘"> 이러한 형식으로 입력합니다. 이미지로 입력할 경우 반드시 콩알만치 작은 이미지를 넣어줘야 스킨이 틀어지지 않습니다.
방명록 이름
카테고리에 방명록 이름을 지정합니다. 입력하지 않을 경우 나타나지 않습니다.
썸네일 갯 수
기본 설정에서 홈 화면 글 수 / 글 목록 글 수와 동일하게 설정할 것을 권장합니다.
갤러리형 높이
갤러리형 목록의 총 높이와 휘어지는 각도를 조절합니다.
썸네일 넓이
편의 설정의 넓이와는 별개로 갤러리형의 썸네일만의 사이즈를 지정합니다. 무조건 1:1 비율로만 설정 됩니다.
썸네일 간격
썸네일간의 상하 간격을 조절합니다.
노이미지
이미지가 첨부되지 않은 글의 썸네일(미리보기 이미지)을 원하는 이미지로 변경합니다.
단락 앞 뒤 공백
관리 > 콘텐츠 - 설정 > 단락 앞뒤에 공백을 [ 사용하지 않습니다 / 사용합니다 ] 또는 기존 에디터의 문단 간격 없음을 지원하는 기능으로 글 작성 시 문단(긴 글) 또는 단락을 띄울 때 엔터 한번으로 단락을 나누어 간편하게 사용을 원하시는 분은 on - 이 경우 단순 줄 바꿈은 shift + enter, 그냥 엔터를 여러번 처서 단락을 나누시는 분은 체크를 off 하시면 됩니다.
스킨 기본 기능으로 넣을 수도 있었지만 기존에 엔터 여러번 쳐서 단락을 나누시던 분은 불편함을 느낄 수 있어 옵션화했습니다.
댓글 펼침
기본 설정에 있는 댓글 펼침과 표면상 같은 기능입니다. 기본 설정의 댓글 펼침을 이용해 댓글창을 접어두고 사용할 경우 화면 로딩 시에 댓글 리스트를 불러오지 않기 때문에, 댓글의 url 자동링크, 자동 이미지, 자동 유튜브, 자동 메일주소링크 기능이 작동되지 않아 별도로 만들어두었습니다.
프로필 사진
댓글, 방명록에 프로필 사진을 표시합니다.
댓글 작성순 → 최신순
티스토리의 댓글 시스템은 나중에 달린 댓글이 아래로 달리는 시스템입니다. 이를 최신순으로 변경을 원할 경우 사용하는 옵션입니다.
닫히는 속도 - 스킨 파일 중 myo_script.js를 메모장으로 열어 아래 소스를 참고한 후 열리는 속도 1000을 원하는 수치로 변경 후 파일 업로드하세요. (파일 업로드 후에도 변화가 없으면 크롬, 웨일 기준 컨트롤+쉬프트+R을 동시에 눌러 새로고침 or 쿠키, 캐시 삭제 or html에서 myo_script.js?ver=1.0 등 버전 표시를 붙여 업로드 시 마다 버전 숫자를 변경합니다)
$(function () {
if ($('.smooth-screen').length) {
$("a").not(".text-item a, #opencmt a, a.top, a:not([href]), .pagination a:not([href]), .cmt a, a[target=_blank], .lb-nav a, .more-btn, .imageslideblock a").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$("#container, .copy").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
window.onpageshow = function (event) {
if (event.persisted) {
document.location.reload();
}
};
}
});
익스플로러에서도 색상이 적용되길 원하시는 분께서는 아래 안내를 참고하여 CSS에서 직접 변경해주세요
var(--bg) /* 배경색 */
var(--text) /* 폰트 색 */
var(--point) /* 포인트 색 */
var(--point2) /* 포인트 색 */
var(--point3) /* 포인트 색 */
이 사이트의 경우 css에서 사용하는 코드가 기재가 되어있지 않기 때문에 수동으로 찾아야하는데요
위 사이트에서 필요한 아이콘 위에서 마우스 우클릭 > 검사를 한 후 나오는 창에서 선택 되어있는 span 클래스를 열면 ::before 이란 단어가 나오는데 이걸 클릭하면 우측에 나오는 css창에 적혀진 content:"/영숫자" 를 복사해 스킨의 CSS에서 수정하고 싶은 아이콘을 변경하면 됩니다.
html에서 empty 검색 후 아래 안내를 따라 <li>~~~</li>를 변경합니다
<div class="empty">
<ul class="search"> <!-- 검색된 글이 없을 때 -->
<li>입력하신 단어의 철자가 정확한지 확인해 보세요.</li>
<li>검색어의 단어 수를 줄이거나, 보다 일반적인 단어로 검색해 보세요.</li>
<li>두 단어 이상의 키워드로 검색 하신 경우, 정확하게 띄어쓰기를 한 후 검색해 보세요.</li>
</ul>
<ul class="category"> <!-- 해당 카테고리에 글이 없을 때 -->
<li>선택하신 카테고리에 해당하는 글이 없습니다.</li>
<li>다른 카테고리를 선택하시거나, 검색 기능을 활용해 보세요.</li>
</ul>
</div>
동영상을 반응형으로 적용하려면 넓이와 높이가 16:9 또는 9:16인 영상만 지원을 합니다. 유튜브가 아니어도 동일한 내용이니 아래 내용 읽어보시고 참고하세요.
가로로 긴 영상 : width="560" height="315" / 세로가 긴 영상(세로 캠) width="315" height="560" 꼭 이 사이즈가 아니어도 16:9 또는 9:16 비율이면 되며, 반응형으로 적용되지 않을 경우 해당 글의 html 모드에서 iframe의 width와 height를 앞에서 제시한 수치로 변경해보세요.
새 에디터에서 유튜브 동영상이 반응형으로 적용되지 않아요
우선 제가 제공하는 반응형 소스는 16:9, 9:16 비율의 동영상만 적용됩니다. 비율이 맞다면 해당 글의 수정 모드로 들어가서 가로로 긴 영상은 iframe의 넓이를 width="560" height="315" / 세로로 긴 영상은 width="315" height="560"로 변경해보세요. 티스토리에서 자동 생성하는 태그가 16:9로 생성해주지 않아 발생하는 문제입니다.
CSS
디스플레이 해상도가 낮은 스마트폰에서 깨진다거나 조절이 필요하다면 max-width의 수치를 변경해보세요. (max-width 수정 시 반드시 myo_script.js 파일을 메모장으로 열어 768, 769를 같은 값으로 수정하세요.) 768, 769는 태블릿 사이즈 전 후, 425나 426은 모바일 사이즈 전 후 입니다.
@media screen and (max-width: 768px) { }
알려진 문제 ( 또는 문제 처럼 보이지만 문제가 아닌 점 )
목록이 이상해요, 목록이 한줄로 나열되어요, 목록이 스크린샷처럼 되지않아요 - 위로 올라가서 [ 기본 목록 설정 ] [ 각 카테고리 목록 스타일 설정 / 부분 갤러리 / 부분 목록 / 부분 웹진형 ] 의 안내를 따라주세요.
목록에서 보호글 썸네일 - 티스토리에서 무통보 변경한 부분으로 더 이상 불가합니다.
익스플로러이고 스킨이 이상해요, 스킨 옵션 적용이 안돼요 - 익스플로러 지원하지 않습니다. 이제 익스플로러는 구시대의 유물이기 때문에 크롬, 웨일, 비발디, 파이어폭스 같은 브라우저를 사용하세요. PC 웹 브라우저 추천
사파리 사용하고 스킨이 이상해요 - 맥북, 아이패드 등을 이용하신다면 기기가 없어 테스트 할 수 없기 때문에 지원하지 않습니다. 사파리는 오직 모바일만 테스트 가능합니다.
새 에디터에서 유튜브 동영상이 반응형으로 적용되지 않아요 - 위 안내 중 [ 본문, 댓글, 방명록에 유튜브 동영상등 동영상 반응형으로 적용 ] 를 참고하세요
움짤홈을 운영중이고 갤러리형에서 움짤 썸네일 플레이가 너무 짧아요 - 썸네일의 파일 크기(용량)가 큰 경우 발생합니다.(첨부한 파일 크기 아님) 이 경우 위 안내 중 스킨 옵션의 썸네일 넓이를 참고해 썸네일을 작은 사이즈로 줄이고 이에 맞춰 갤러리형 비율 변경도 작은 사이즈로 줄여서 적용하면 개선이 됩니다. 스킨의 문제가 아닙니다.
움짤홈을 운영중이고 본문에서 첨부한 움짤의 색감이 클릭했을 때 보이는 원본과 달라요 - 제가 확인한 정보는 아니지만 구에디터를 사용 중이라면 관리 > 콘텐츠 - 설정 > 콘텐츠 설정 - 에디터 가로 폭은 [ ]px로 설정합니다 를 스킨의 가로폭보다 여유있게 늘려주고 재업로드하면 개선이 된다고 들었습니다. 그런데 이렇게 할 경우 플러그인 - 이미지 크게보기 (이미지를 클릭했을 때 원본 사이즈로 보여주는 플러그인)이 적용되지 않을 것으로 예상됩니다. 이유는 이 플러그인은 가로폭보다 큰 원본사이즈의 이미지에만 적용되는데 가로폭을 넓히면 가로폭보다 넓다고 인식되지 않을 것으로 예상되기 때문입니다.
