스킨 파일 업로드 후 반드시 images 폴더 안 파일까지 모두 업로드하세요
반응형 / 갤러리 + 목록형 / 공지 / 댓글과 방명록에 프로필 사진 / 탑버튼 / 크롬 지원
---
오랜만에 스킨을 나눔합니다.
이번 스킨은 트위터를 모티브로 한 스킨인데
첫번째 스킨을 만든지 너무 오래 되었고 비슷하지만 최근 작업하는 것과는 조금 달라
새로운 설명이 필요하다 판단해 나눔하기로 했어요 :)
나눔 종료
이 스킨은 카피라이트를 무단으로 삭제하거나 변경하신 후 시정하지 않은 분이 있어 나눔을 중단하였습니다.
나눔 시작 부터 안내드렸던 부분이고, 이 부분을 변경하여 재나눔이나 판매를 할 생각이 없는 점 양해 바랍니다.
윈도우10 / 웨일(크롬, 크로미움 기반 브라우저) / LG G6 / 안드로이드 8.0 오레오 / 삼성브라우저 에서 테스트하였으며
이 외의 환경에서는 제대로 작동하지 않을 수 있습니다.
수정은 가능하지만 어떠한 경우에도 재배포는 불가하며
사회적으로 문제가 되는 주제를 가진 블로그에서는 사용할 수 없습니다.
CSS에서 아래 색상코드 찾아서 변경
기본 색 : #444 / 포인트색 : #e6ecf0 , #d6e2ea , #bbb , #eee , #ddd , #1da1f2 , #17bf63 , #e0245e
CSS 에서 아래 부분을 수정하면 됩니다.
다른 효과로 변경할 경우 아래 입력된 사항을 모두 삭제한 후 검색사이트에서 text hover 등으로 검색하여 적용합니다
| a:hover { transition: all .5s; color: #bbb; } | cs |
CSS
폰트 변경은 가장 상단에 필요한 웹폰트 주소 입력 (보통 아래와 같이 @import url 로 시작함)
1 | @import url('https://fonts.googleapis.com/!@#!$$%$&%*&*(*)'); | cs |
전체 폰트는 아래 부분에서 "Segoe UI", Arial을 삭제하고 변경하면 되며,
그 외 부분의 폰트는 CSS에서 원래 있던 폰트 명을 검색 후 변경한 폰트 명으로 변경합니다.
| /* 전체 폰트 */ body, th, td, input, select, textarea, button { font-size: 12px; font-family: "Segoe UI", Arial, sans-serif; color: #444; line-height: 1.7; } | cs |
폰트 사이즈 :font-size: 12px; 이 부분만 수정
CSS에서 아래 부분에서 e6ecf0 를 삭제한 후 다른 색상 코드 입력
| /* 배경 */ body { background: #e6ecf0; } | cs |
CSS
| /* 배경 */ body { background: #e6ecf0; } | cs |
삭제 후 파일업로드 → 아래 내용 붙여넣은 후 파일 명과 확장자 동일하게 변경
| body{ background: url('./images/파일명.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment:fixed; } | cs |
CSS 아래 주석에 따라 수정
(크롬 & 크로미움 기반 브라우저만 해당, 익스플로러 및 엣지 등 기타 브라우저는 검색을 통해 해결해주세요)
| /* 스크롤바 */ ::-webkit-scrollbar { width:5px; /* 세로 스크롤 넓이 */ height:5px; /* 가로 스크롤 높이 */ background:transparent; } ::-webkit-scrollbar-thumb { width:5px; /* 움직이는 부분 넓이 */ background:#d6e2ea; /* 움직이는 부분 색상 */ } | cs |
html 에서 첫화면 부분을 찾아 공지 URL 경로 입력
공지를 공지 게시판에 적었으면 /notice 또는 /notice/??? 로,
일반 카테고리에 적었으면 /category/??? 로 수정
| <!-- 첫화면 --> <script> var pathArray = location.href.split('/'); if(pathArray[3] == '') { $('html').css('display','none'); location.href = '/category/경로'; } </script> | cs |
기본 URL : html 에서 아래 스크립트 삭제
티에디션 or 태더데스크 : 아래 스크립트 삭제 후 티에디션 or 태더데스크 설정
| <!-- 첫화면 --> <script> var pathArray = location.href.split('/'); if(pathArray[3] == '') { $('html').css('display','none'); location.href = '/category'; } </script> | cs
|
CSS
| #container { margin: 100px auto 50px; /* 외부 여백 */ width: 560px; /* 가로 넓이 */ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 30px; /* 내부 여백 */ background: #fff; /* 내부 배경 색상 */ border-radius: 10px; /* 모서리 둥글게 */ } | cs |
CSS
logo.jpg 에 맞춰 파일 업로드하거나 아래 부분을 동일하게 맞춰줍니다.
동일하게 맞췄는데도 변경되지 않는 경우 크롬에서는 컨트롤+쉬프트+R 을 동시에 누르면 캐시까지 강제 새로고침 되니 해보세요.
| #header .logo { background-image: url("./images/logo.jpg"); /* 파일명과 확장자 동일하게 */ background-position: center center; background-repeat: no-repeat; background-size: cover; width: 40px; /* 넓이 */ height: 40px; /* 높이 */ border-radius: 100%; /* 모서리 둥글게 */ border: 1px solid #eee; /* 테두리 */ float: left; margin-right: 10px; } | cs |
CSS
카테고리 아이콘 Category 문구 수정은 html에서 아래 문구를 찾아 원하는 문구로 변경
디자인 변경은 CSS
| #header .catebox .cate > p { padding: 7px 20px; /* 내부 여백 */ border: 1px solid; /* 테두리 */ border-radius: 30px; /* 모서리 둥글게 */ font-weight: bold; /* 폰트 굵기 */ position: relative; display: block; text-align: center; /* 폰트 정렬 */ cursor: pointer; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } | cs |
카테고리 수정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | a.link_item, a.link_sub_item { border: 1px solid; /* 테두리 */ border-radius: 30px; /* 모서리 둥글게 */ padding: 8px 0; /* 내부 여백 */ display: block; text-transform: capitalize; font-weight: bold; /* 폰트 굵기 */ background: rgba(255,255,255,0.7); /* 배경색 */ white-space: nowrap; text-align: center; /* 폰트 정렬 */ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } a.link_sub_item { color: #888; /* 서브 카테고리 색상 */ } a.link_item:hover, a.link_sub_item:hover { background: #fff; /* 마우스 오버시에 배경색 */ transition: all .8s; color: #ccc; /* 마우스 오버 시에 폰트와 테두리색 */ } | cs |
카테고리 모두보기가 필요한 경우
CSS에서 아래 부분 삭제
| .link_tit { display: none; } | cs |
카테고리 또는 서브 카테고리가 많아 마우스 오버 시에 짤릴 경우
| #header .cate:hover .tt_category { max-height: 700px; /* 카테고리 마우스 오버 시 높이 */ overflow: hidden; transition: max-height linear 0.5s; } .category_list > li:hover > .sub_category_list { max-height: 200px; /* 서브 카테고리 마우스 오버 시 높이 */ } | cs |
꼬다리
| #header .catebox .other li:first-child::before, #header .catebox .other li:first-child::after { content: ''; position: absolute; border-style: solid; border-width: 0 10px 10px; /* 꼬다리 크기 */ border-color: #bbb transparent; /* 꼬다리 그림자 */ display: block; width: 0; z-index: 1; top: -10px; /* 화면 위에서부터 꼬다리 위치 */ left: 15px; /* 화면 왼쪽에서 부터 꼬다리 위치 */ } #header .catebox .other li:first-child::after { border-color: #fff transparent; /* 꼬다리 내부 색상 */ } | cs |
카테고리 오른쪽 메뉴 변경
| #header .catebox .other > ul { z-index: 900; background: #fff; /* 메뉴 배경색 */ border-radius: 4px; /* 모서리 둥글게 */ display: block; position: absolute; box-shadow: 0 1px 4px rgba(0,0,0,0.25); /* 그림자 */ opacity: 0; } | cs |
마우스 오버 시에 배경 색상 변경
| #header .catebox .other li:hover { background: #eee; /* 마우스 오버 시에 배경 색상 변경 */ transition: all .8s; } | cs |
썸네일 비율 변경
html에서 C200x200을 검색해 원하는 사이즈로 모두 수정 (사이즈가 커질 수록 로딩이 느려짐)
이 스킨은 R???x??? 사이즈로는 권장하지 않습니다.
참고 http://cocosoft.kr/349
썸네일 수정 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | #lst_gal .thumb { width: 32.7%; /* 넓이 */ position: relative; float: left; margin: 0.3%; /* 외부 여백 */ overflow: hidden; border-radius: 5px; /* 모서리 둥글게 */ } #lst_gal .thumb .info { text-align: center; /* 폰트 정렬 */ position: absolute; top: 0; height: 100%; width: 100%; opacity: 0; overflow: hidden; } #lst_gal .thumb .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform : translate(-50%, -50%); -ms-transform : translate(-50%, -50%); -o-transform : translate(-50%, -50%); max-width: 90%; padding: 0 4px; font-weight: bold; /* 제목 폰트 굵기 */ } #lst_gal .thumb:hover img { opacity: 0.3; /* 마우스 오버 시에 썸네일 이미지 투명도 */ } #lst_gal .thumb:hover .info { opacity: 1; /* 마우스 오버시에 제목 투명도 */ } | cs |
보호글 : secret.jpg
이미지가 없는 글 : noimg.jpg
와 동일하게 맞춰 파일 업로드
파일명 또는 확장자가 다른 경우
html에서 위 문구를 검색해 변경하려는 이미지의 파일명, 확장자를 맞춰 수정합니다.
각각 한 군데씩 총 두군데 수정하시면 됩니다.
동일하게 맞추고, 파일 업로드도 했는데 변경 전 이미지가 나올 경우
크롬 기준 컨트롤+쉬프트+R을 동시에 누르면 강제 새로 고침되니 해보시거나
브라우저 설정에서 쿠키, 캐시를 삭제하세요!
html에서 lst_gal → lst_web 으로 변경
1 | <div class="list_wrap" id="lst_gal"> | cs |
html에서 /category/카테고리명' || ptn =='/category/카테고리명 입력
1개일 경우 || 뒷부분은 삭제
카테고리 명이 영문 숫자를 제외한 다른 언어인 경우
해당 메뉴에서 마우스 우측클릭 → 링크주소복사 (크롬or크로미움 기반 브라우저 해당) 를하여 /category/%EB%91%90%EB%B2%88%EC%A7%B8 처럼 입력하면 됩니다.
만약 모든 게시판을 목록형으로 변경한 후 일부만 갤러리형으로 사용할 경우 아래 소스 중 lst_web을 lst_gal으로 변경한후 나머지는 위 안내를 따라 변경해줍니다.
| <!-- 부분 리스트형 --> <script> var ptn = window.location.pathname; if(ptn == '/category/text' || ptn =='/category/gallery/sub-text'|| ptn =='/category/text/sub-text2'){ $(".list_wrap").attr("id","lst_web");} </script> | cs |
자세한 사항은 티스토리 가이드 참고 (링크)
html 아래 부분 삭제
| <s_notice_rep> <div class="entryNotice"> <div class="title"><a href=""></a> - <span class="date"><script type="text/javascript"> var TDate = ''; MMDD= TDate.substr(5,5); document.write(MMDD); </script></span></div> <div class="text"></div> </div> </s_notice_rep> | cs |
아래 부분 입력
| <s_notice_rep> <div class="entryNotice"> <div class="titleWrap"> <h2><a href=""></a></h2> <span class="date"> </span> </div> <div class="article"></div> </div> </s_notice_rep> | cs |
CSS 에서 /* 공지 */ 라고 적혀진 부분의 내용을 모두 삭제 후 하단 내용 입력
타이틀, 날짜, 공지 본문 이라고 적혀진 부분을 원하는대로 커스텀
| .entryNotice .titleWrap h2 {타이틀} .entryNotice .titleWrap .date {날짜} .entryNotice .article {공지 본문} | cs |
CSS 0.0s~2.5s 를 자유롭게
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .entryNotice:nth-of-type(1) { animation-delay: 0s; } .entryNotice:nth-of-type(2) { animation-delay: 0.5s; } .entryNotice:nth-of-type(3) { animation-delay: 1.0s; } .entryNotice:nth-of-type(4) { animation-delay: 1.5s; } .entryNotice:nth-of-type(5) { animation-delay: 2.0s; } .entryNotice:nth-of-type(6) { animation-delay: 2.5s; } | cs |
CSS
| .cmt-list img, .guest-list img { left: 0px; width: 35px; height: 35px; border-radius: 50%; position: absolute;/*여기에 display: none; 을 추가 */ } .cmt-list .info, .guest-list .info { margin-left: 45px; /* 삭제 */ } | cs |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* 리트윗 */ .icon { margin-top: 10px; /* 삭제는 여기에 display:none; 을 추가 */ } .commenti, .retweet, .heart, .letter { margin-right: 20px; /* 각 영역마다 오른쪽 여백 */ } .commenti:hover, .actionTrail:hover .cnt > a { color: #1da1f2 /* 댓글 아이콘에 마우스 오버 시 색상 */ } .retweet:hover { color: #17bf63 /* 리트윗 아이콘에 마우스 오버 시 색상 */ } .heart:hover { color: #e0245e /* 마음 아이콘에 마우스 오버 시 색상 */ } .commenti i, .retweet i, .heart i, .letter i { margin-right: 10px; /* 각 아이콘의 오른쪽 여백 */ } | cs |
CSS 모바일 관련한 수정은 모두 하단 괄호 안에서 하시면 됩니다.
| /* 모바일 영역 */ @media all and (max-width: 768px) { } | cs |
👉 우클릭이 막혀있어 복사를 할 수 없어요
→ 우클릭을 풀려면 제 블로그 전체를 풀어야하는데 저는 그렇게 하고 싶지 않습니다.
크롬을 사용하신다면 일시적으로 우클릭을 풀 수 있는 확장앱을 찾아 설치해보세요.
스킨 수정은 크롬 브라우저 or 크로미움을 기반으로 한 브라우저를 이용하여
수정하고 싶은 부분을 마우스 오른쪽 클릭 → 검사 를 눌러 뜨는 우측 창에서 style.css 중 가장 위에 있는 부분과 그 근처의 css를 껐다 켰다 하며 수치를 조정할 수 있습니다.
이를 응용하셔서 수정한 후 그대로 티스토리에 적용하시면 수정이 훨씬 쉬우니 꼭 해보세요!
나눔 스킨은 수정 문의를 받지 않겠습니다.