티스토리 스킨 23 (v1.0) - 나눔 종료

스킨 파일 업로드 후 반드시 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;
}

CSS 

폰트 변경은 가장 상단에 필요한 웹폰트 주소 입력 (보통 아래와 같이 @import url 로 시작함)

@import url('https://fonts.googleapis.com/!@#!$$%$&%*&*(*)');

전체 폰트는 아래 부분에서 "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;
}

폰트 사이즈 :font-size: 12px; 이 부분만 수정

CSS에서 아래 부분에서 e6ecf0 를 삭제한 후 다른  색상 코드 입력

/* 배경 */
body {
    background: #e6ecf0;
}

CSS 

/* 배경 */
body {
    background: #e6ecf0;
}

삭제 후 파일업로드 → 아래 내용 붙여넣은 후 파일 명과 확장자 동일하게 변경

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;
}

CSS 아래 주석에 따라 수정 

(크롬 & 크로미움 기반 브라우저만 해당, 익스플로러 및 엣지 등 기타 브라우저는 검색을 통해 해결해주세요)

/* 스크롤바 */
::-webkit-scrollbar {
    width:5px; /* 세로 스크롤 넓이 */
    height:5px; /* 가로 스크롤 높이 */
    background:transparent;
}
::-webkit-scrollbar-thumb {
    width:5px; /* 움직이는 부분 넓이 */
    background:#d6e2ea; /* 움직이는 부분 색상 */
}

html 에서 첫화면 부분을 찾아 공지 URL 경로 입력

공지를 공지 게시판에 적었으면 /notice 또는 /notice/??? 로,

일반 카테고리에 적었으면 /category/??? 로 수정

<!-- 첫화면 -->
<script>
    var pathArray = location.href.split('/');
    if(pathArray[3] == '') {
        $('html').css('display','none');
        location.href = '/category/경로';
    }
 </script>

기본 URL : html 에서 아래 스크립트 삭제

티에디션 or 태더데스크 : 아래 스크립트 삭제 후 티에디션 or 태더데스크 설정

<!-- 첫화면 -->
<script>
    var pathArray = location.href.split('/');
    if(pathArray[3] == '') {
        $('html').css('display','none');
        location.href = '/category';
    }
 </script>

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; /* 모서리 둥글게 */
}

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;
}

CSS

카테고리 아이콘 Category 문구 수정은 html에서 아래 문구를 찾아 원하는 문구로 변경

<p>Category</p>

디자인 변경은 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;
}

카테고리 수정

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; /* 마우스 오버 시에 폰트와 테두리색 */
}

카테고리 모두보기가 필요한 경우

CSS에서 아래 부분 삭제

.link_tit {
    display: none;
}

카테고리 또는 서브 카테고리가 많아 마우스 오버 시에 짤릴 경우

#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; /* 서브 카테고리 마우스 오버 시 높이 */
}

꼬다리

#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; /* 꼬다리 내부 색상 */
}

카테고리 오른쪽 메뉴 변경

#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;
}

마우스 오버 시에 배경 색상 변경

#header .catebox .other li:hover {
    background: #eee; /* 마우스 오버 시에 배경 색상 변경 */
    transition: all .8s;
}

썸네일 비율 변경

html에서 C200x200을 검색해 원하는 사이즈로 모두 수정 (사이즈가 커질 수록 로딩이 느려짐)

이 스킨은 R???x??? 사이즈로는 권장하지 않습니다.

참고 http://cocosoft.kr/349 

썸네일 수정 CSS

#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; /* 마우스 오버시에 제목 투명도 */
}

보호글 : secret.jpg

이미지가 없는 글 : noimg.jpg

와 동일하게 맞춰 파일 업로드

파일명 또는 확장자가 다른 경우

html에서 위 문구를 검색해 변경하려는 이미지의 파일명, 확장자를 맞춰 수정합니다.

각각 한 군데씩 총 두군데 수정하시면 됩니다.

동일하게 맞추고, 파일 업로드도 했는데 변경 전 이미지가 나올 경우

크롬 기준 컨트롤+쉬프트+R을 동시에 누르면 강제 새로 고침되니 해보시거나

브라우저 설정에서 쿠키, 캐시를 삭제하세요!

html에서 lst_gal → lst_web 으로 변경

<div class="list_wrap" id="lst_gal">

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>

자세한 사항은 티스토리 가이드 참고 (링크)

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>
 

아래 부분 입력

<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>

CSS 에서 /* 공지 */ 라고 적혀진 부분의 내용을 모두 삭제 후 하단 내용 입력

타이틀, 날짜, 공지 본문 이라고 적혀진 부분을 원하는대로 커스텀

.entryNotice .titleWrap h2 {타이틀}
.entryNotice .titleWrap .date {날짜}
.entryNotice .article {공지 본문}

CSS 0.0s~2.5s 를 자유롭게 

.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;
}

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; /* 삭제 */
}

CSS

/* 리트윗 */
.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; /* 각 아이콘의 오른쪽 여백 */
}

CSS 모바일 관련한 수정은 모두 하단 괄호 안에서 하시면 됩니다.

/* 모바일 영역 */
@media all and (max-width: 768px) {
}

자주 묻는 질문 + tmi

👉 우클릭이 막혀있어 복사를 할 수 없어요 

→ 우클릭을 풀려면 제 블로그 전체를 풀어야하는데 저는 그렇게 하고 싶지 않습니다.

크롬을 사용하신다면 일시적으로 우클릭을 풀 수 있는 확장앱을 찾아 설치해보세요.

스킨 수정은 크롬 브라우저 or 크로미움을 기반으로 한 브라우저를 이용하여

수정하고 싶은 부분을 마우스 오른쪽 클릭 → 검사 를 눌러 뜨는 우측 창에서 style.css 중 가장 위에 있는 부분과 그 근처의 css를 껐다 켰다 하며 수치를 조정할 수 있습니다. 

이를 응용하셔서 수정한 후 그대로 티스토리에 적용하시면 수정이 훨씬 쉬우니 꼭 해보세요!

나눔 스킨은 수정 문의를 받지 않겠습니다.