지원 사양, 상세 스크린샷 확인 - 티스토리 스킨 49 뭐뭐 안된다고 묻기 전에 지원 사양부터 제발 확인 부탁드려요 ㅠ
스킨 사용 기본 안내
카피라이트 제거 옵션 미구매하신 분께서 카피라이트 제거 또는 배경색과 같아 확인이 불가, 링크 및 문구 변경하여 사용하시면 해당 스킨 나눔 종료합니다. 단 한분이라도 확인되면 적용되며, 실제로 23번 스킨이 이 사유로 나눔 중단되었습니다. 많은 분께서 이용하실 수 있도록 나 하나쯤 생각하지 마시고 지켜주세요~
오해의 소지가 있으니 제 스킨의 소스, 파일을 다른 스킨에 짜깁기해 사용하지 말아주세요.
크롬, 웨일 등 크로미움 기반 브라우저 외 브라우저에서는 색상, 넓이 등을 추가 설정(스킨 옵션) 에서 변경해도 적용되지 않고 기본 설정 값으로만 설정됩니다. 변경을 원하시면 직접 css에서 설정을 해주세요.
유튜브 반응형은 구에디터만 지원하며, 세로 방향(세로캠)으로 사용 시 iframe 소스에서 width와 height의 수치를 서로 바꿔 입력하시면 반응형 세로캠이 됩니다.
색상 입력은 제시되는 색상을 선택해도 되지만, 직접 색상 코드를 입력해도 되며 투명도를 지정하길 원한다면 #??????의 뒤에 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로 설정합니다. 에서 변경한 사이즈를 입력해주시는게 좋습니다 (새 에디터 사용시 불필요)
디폴트 색상
배경색 - #FFFFFF
기본 폰트 - #444444
포인트 - #B58B71
스크롤바 - #EEEEEE
배경 이미지, 모바일 배경 이미지
스킨의 배경을 이미지로 설정합니다. 모바일의 경우 가로로 긴 이미지보다는 세로로 긴 이미지를 권장하며, 모바일 웹 특성상 배경이미지가 정상적으로 깔리지 않아, 뒤에 배경처럼 보이는 박스하나를 둔 것이라 생각하시는 것과는 조금 다를 수 있습니다. 특히 삼성브라우저와 같이 위 아래로 스크롤 시 위나 아래에 툴바 영역이 생겨 브라우저 화면이 좁아지는 경우 이미지의 사이즈가 변동이 됨을 확인할 수 있습니다. PC와 모바일 모두 1개의 이미지가 꽉차도록 설정되어있으며 작은 이미지를 패턴으로 사용하길 원하는 경우 아래 안내를 따라 수정합니다.
텍스트로 된 블로그 이름을 이미지로 변경합니다. 투명화된 png파일을 권장합니다. 최대 높이 50px로 설정되어 있습니다.
소개글
소개글이나 적고 싶은 글을 설정합니다
마우스 커서(png)
원하는 이미지를 마우스 커서로 사용합니다. 투명화처리된 png나 gif파일을 권장하며 cur파일인 경우 (링크)에서 png파일로 변환 후 업로드 해 사용할 수 있습니다. 이 옵션은 cursors-4u같은 사이트에서 제공하는 소스는 보안설정이 되어있지 않아 적용을해도 정상적으로 보이지 않기 때문에 파일을 다운 받아 업로드 해 사용할 수 있도록 제작했습니다.
부드러운 스크롤
마우스 휠을 이용해 스크롤 할 때 부드럽게 멈추도록 설정합니다.
부드러운 화면 전환
화면이 전환 될 때 (페이지가 변경될 때) 부드럽~게 전환이 되도록 합니다.
새 글 아이콘
관리 > 콘텐츠 - 카테고리 관리 > 카테고리에 새글 발행 여부를 [ 표시합니다 ] 를 설정을 꼬옥 하셔야하고, 기본으로 설정된 아이콘의 변경을 원하는 경우 Themify / FontAwesome 중에서 원하는 아이콘을 찾아 <i class="아이콘이름"></i> 와 같은 식으로 입력하거나, 이미지인 경우 <img src="이미지url" alt="새글아이콘"> 이러한 형식으로 입력합니다. 이미지로 입력할 경우 반드시 콩알만치 작은 이미지를 넣어줘야 스킨이 틀어지지 않습니다.
공지 게시판 이름, 방명록 이름
각각의 이름을 지정합니다. 입력하지 않을 경우 나타나지 않습니다. 입력을 했으나 나타나지 않는 경우, 순서를 변경하고 싶은 경우 관리 > 꾸미기 - 사이드바에서 on, off와 순서를 모두 변경할 수 있습니다.
원고지 모드
일반적인 글 형태에서 원고지 형태로 변경합니다. 일부 아닌 일괄 적용 됩니다. 에디터에서 작성하신 글 중 html모드에서 보았을 때 < p > < /p > 안에 있는 글만 적용이 되고, 첨부한 이미지, 동영상, 인용구, 접은 글, 줄 바꿈 모두 안됩니다. 에디터에서 작성한 글을 복사해서 글만 붙여넣기 된다고 보시면 됩니다. 언젠가 실력이 더 늘어서 이를 해결할 방법이 생각이 나면 고쳐보도록 하겠습니다 ㅠㅠ
또한 원고지모드 사용시 일부 브라우저에서 원고지와, 글의 위치가 맞지 않을 수 있습니다. 제가 확인했을 땐, 익스플로러에서는 세로 선이 안보이고, 모바일 삼성 브라우저에서는 줄이 맞지가 않네요.. 이 외 크로미움 기반으로 한 모바일 브라우저에서는 대부분 맞는 것으로 보이는데.. 삼성 브라우저가.. 문제입니다.
원고지 색상
원고지 라인의 색상을 변경합니다 (디폴트 색상 : #F99999)
단축키 - 글쓰기 모드
단축키 w 의 기본 글쓰기 모드는 기존 에디터로 설정되어 있습니다. 관리 > 콘텐츠 - 설정 > 새로운 글쓰기를 [ 사용합니다 ] 로 설정하신 경우 또는 새 에디터를 기본으로 사용하시는 경우 이 옵션을 활성화 하면 w 의 기본 글쓰기 모드가 새 에디터로 변경됩니다.
단락 앞 뒤 공백
관리 > 콘텐츠 - 설정 > 단락 앞뒤에 공백을 [ 사용하지 않습니다 / 사용합니다 ] 또는 기존 에디터의 문단 간격 없음을 지원하는 기능으로 글 작성 시 문단(긴 글) 또는 단락을 띄울 때 엔터 한번으로 단락을 나누어 간편하게 사용을 원하시는 분은 on - 이 경우 단순 줄 바꿈은 shift + enter, 그냥 엔터를 여러번 처서 단락을 나누시는 분은 체크를 off 하시면 됩니다.
스킨 기본 기능으로 넣을 수도 있었지만 기존에 엔터 여러번 쳐서 단락을 나누시던 분은 불편함을 느낄 수 있어 옵션화했습니다.
댓글 작성순 → 최신순
티스토리의 댓글 시스템은 나중에 달린 댓글이 아래로 달리는 시스템입니다. 이를 최신순으로 변경을 원할 경우 사용하는 옵션입니다.
SNS ID
아이디를 입력하면 카테고리 메뉴 왼쪽 상단에 각 SNS 아이콘으로 표시되며, 입력하지 않으면 나타나지 않습니다. 유튜브는 ID만 입력하는 것이 아닌 채널 주소(url)을 전부 입력합니다
원하는 웹폰트를 찾아 아래 웹폰트 소스를 지우거나 하단에 붙여넣기 한 후 폰트 명을 변경해줍니다. 일부 부분에 폰트를 직접 설정해 놓은 곳이 있으니 font-family를 검색해 확인 후 함께 변경하도록 합니다.
/* 전체 폰트 */
html,
th,
td,
input,
select,
textarea,
button,
#tt-body-page blockquote,
#tt-body-page blockquote p,
#tt-body-page blockquote[data-ke-style='box'],
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
figure figcaption,
figure[data-ke-type='video'] figcaption,
code,
blockquote,
blockquote p {
font-family: 'Iropke Batang', sans-serif; /* 전체 폰트 */
line-height: 2; /* 줄 간격 */
font-size: 13px; /* 폰트 사이즈 = 원고지 모드 사용시 폰트 사이즈 변경 비추 */*/
color: #444; /* 전체 폰트 색상 익스플로러 대응 */
color: var(--text); /* 전체 폰트 색상 - 추가 옵션 설정용 */
}
스킨 파일 중 myo_script.js를 메모장으로 열어 아래 소스를 참고한 후 원하는 수치로 변경 후 파일 업로드하세요. (파일 업로드 후에도 변화가 없으면 크롬, 웨일 기준 컨트롤+쉬프트+R을 동시에 눌러 새로고침 or 쿠키, 캐시 삭제 or html에서 myo_script.js?ver=1.0 등 버전 표시를 붙여 업로드 시 마다 버전 숫자를 변경합니다) 2000은 페이지가 보여지는 속도, 1000은 다른 페이지로 넘어가기 전 페이지가 닫혀지는 속도입니다.
이 사이트의 경우 css에서 사용하는 코드가 기재가 되어있지 않기 때문에 수동으로 찾아야하는데요
위 사이트에서 필요한 아이콘 위에서 마우스 우클릭 > 검사를 한 후 나오는 창에서 선택 되어있는 span 클래스를 열면 ::before 이란 단어가 나오는데 이걸 클릭하면 우측에 나오는 css창에 적혀진 content:"/영숫자" 를 복사해 스킨의 CSS에서 수정하고 싶은 아이콘을 변경하면 됩니다.
👉 우클릭이 막혀있어 복사를 할 수 없어요 → 드래그 ~~ 컨트롤 + C 를 이용하면 간단하게 복사하실 수 있습니다.
스킨 수정은 크롬 브라우저 or 크로미움을 기반으로 한 브라우저를 이용하여 수정하고 싶은 부분을 마우스 오른쪽 클릭 → 검사 를 눌러 뜨는 우측 창에서 style.css 중 가장 위에 있는 부분과 그 근처의 css를 껐다 켰다 하며 수치를 조정할 수 있습니다. 이를 응용하셔서 수정한 후 그대로 티스토리에 적용하시면 수정이 훨씬 쉬우니 꼭 해보세요!
- 악용하여 다른 스킨을 무단으로 퍼가거나 다른 사람의 소스를 무단으로 복사하지 않도록 합시다!!
나눔 스킨에는 수정 문의 답변 드리지 않습니다. 남겨주시는 댓글 제가 다 답글은 못드리지만 읽고 있습니다. 늘 감사합니다 :D
