[나눔] 티스토리 스킨 29 (v1.1)

스크린샷 모두 보기 → 티스토리 스킨 29

무료 다운로드

스킨 파일 업로드 후 반드시 images 폴더 안 파일까지 모두 업로드하세요

스킨 설치 & 적용 & 간단한 설정 가이드

반응형 / 갤러리 + 목록형 / 공지 / 서브 카테고리 / 크롬 지원

윈도우10 / 웨일(크롬, 크로미움 기반 브라우저) / LG G6 / 안드로이드 8.0 오레오 / 삼성브라우저 에서 테스트하였으며

이 외의 환경에서는 제대로 작동하지 않을 수 있습니다.

수정은 가능하지만 어떠한 경우에도 재배포는 불가하며

사회적으로 문제가 되는 주제를 가진 블로그에서는 사용할 수 없습니다.

CSS에서 아래 색상코드 찾아서 변경

기본 색 : #666

# 단순 배경색 변경 - CSS 에서 아래 부분을 찾아 background-image: url('./images/bg.jpg'); 와, 색상코드를 지우고 원하는 색상코드 입력

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

# 고정된 이미지 배경

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

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 

폰트 변경은 가장 상단에 필요한 웹폰트 주소 입력하고 필요 없는 폰트를 삭제 한 후 아래 안내에 따라 폰트명을 바꿔줍니다.\

@import url('https://fonts.googleapis.com/css?family=Galada'); /*카테고리 영문 폰트 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); /* 한글 폰트 */

전체 폰트는 아래 안내에 따라 변경하면 됩니다.

/* 전체 폰트 */
body, th, td, input, select, textarea, button {
    font-size: 14px; /* 폰트 사이즈 */
    font-family: 'Noto Sans KR', sans-serif; /* 전체 폰트 */
    color: #666; /* 전체 폰트 색상 및 테두리, 라인 색상 */
    line-height: 1.7; /* 줄 간격*/
}

CSS 에서 아래 부분을 수정하면 됩니다. 

검색사이트에서 text hover 등으로 검색하여 적용합니다

a:hover {
}

CSS 아래 주석에 따라 수정 

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

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

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 {
    position: relative;
    margin: 100px auto 50px; /* 외부 여백 위 / 가로는 자동 / 아래 */
    width: 600px; /* 전체 넓이 */
}

width 사이즈를 늘려 본문영역이 넓어져 갤러리형의 썸네일 또한 커진 경우

아래 썸네일 수정을 참고해서 html을 수정하거나 배열을 변경해야 썸네일이 깨지지 않습니다.

CSS

/* 상단 영역 */
#header {
    position: relative;
    display: flex;
    height: 57px; /* 높이 */
    font-family: 'Galada', cursive; /* 영문 폰트 */
    font-size: 1.1em; /* 폰트 사이즈 */
    margin-bottom: 20px; /* 하단 외부 여백 */
    overflow: hidden;
    text-transform: capitalize;
    white-space: nowrap;
}
#header:before, #header:after {
    content: "";
    box-sizing: border-box;
    border-color: inherit;
    position: absolute;
    bottom: 8px;
    height: 20px;
}
#header:before {
    left: 0;
    width: 15%;
    border-right: 2px solid;
    border-top: 2px solid;
}
#header:after {
    left: 15%;
    width: 100%;
    margin-left: -2px;
    border-left: 3px solid;
    border-top: 2px solid;
    transform: skew(-45deg);
    transform-origin: left bottom;
}
#header .title {
    flex: 1.5; /* 타이틀이 긴 경우 이 부분 수치를 늘려 조절 / 카테고리 수치를 늘렸을 경우 이 부분 수치를 줄여 조절 */
    margin-left: 10px;
} /* 타이틀, 카테고리가 모두 길어 겹치는 경우 해결 불가 */
#header .catebox {
    flex: 8.5; /* 타이틀 길이를 늘린 경우 이 부분 수치를 줄여 조절 / 카테고리가 많아 길이가 부족하면 이 부분 수치 늘려 조절 */
    text-align: right;
    position: relative;
}
.catebox .etc > span {
    cursor: pointer;
}

CSS

    /* 카테고리 */
    .tt_category, .category_list > li, .sub_category_list > li, #header .catebox .cate, #header .catebox .etc {
        display: inline-block;
    }
    .link_tit {
        display: none; /* 모두 보기가 필요한 경우 이 부분 삭제 */
    }
    .sub_category_list, #header .catebox .etc .etcbox { /* 아래 줄로 내려가는 서브카테고리, more 메뉴 */
        position: absolute;
        right: 0;
        display: none;
        padding-top: 10px; /* 상단 여백 */
        z-index: 9999999;
        width: 100%;
        font-size: .9em; /* 폰트 사이즈 */
    }
    .category_list > li:hover .sub_category_list, #header .catebox .etc:hover .etcbox {
        display: block;
    }
    a.link_item, a.link_sub_item, #header .catebox .cate:first-child, #header .catebox .etc, .search, #header .catebox .etc a {
        margin: 0 10px; /* 각각의 카테고리 사이 여백 */
    }
    a.link_sub_item, #header .catebox .etc a {
        opacity: 0.8; /* 투명도 - 아랫줄은 색상이 조금 연하도록 */
    }
    /* 검색 */
    .search {
        display: inline-block;
    }
    .search input {
        border: 0;
        background: transparent; /* 검색창 배경 */
        font-family: 'Galada', cursive; /* 영문 폰트 */
        width: 80px; /* 넓이 */
        font-size: .9em; /* 폰트 사이즈 */
        text-align: right;
        opacity: 0.8; /* 투명도 */
    }
    .search .submit {
        display: none;
    }

CSS

/* 본문 영역 */
#content .main {
    height: 100%;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 20px; /* 내부 여백 */
}

썸네일 비율 변경

html에서 C200x200을 검색해 원하는 사이즈로 모두 수정

#container에서 width를 늘려 썸네일 크기가 늘어나 깨지는 경우 200x200보다 더 큰 사이즈로 변경합니다

(사이즈가 커질 수록 로딩이 느려짐, 늘릴 수록 움짤 플레이가 짧아질 수 있음 = 스킨으로 인한 것이 아님)

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

참고 http://cocosoft.kr/349 

썸네일 수정 CSS

/* 갤러리형 */
#lst_gal .thumb {
    width: 29.3%; /* 썸네일 사이즈 */
    position: relative;
    float: left;
    margin: 2%; /* 외부 여백 = 간격 */
    overflow: hidden;
}
#lst_gal .thumb * {
    transition: 0.5s;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#lst_gal .thumb a {
    display: block;
    border: 2px solid; /* 테두리 */
}
#lst_gal .thumb img {
    width: 100%;
    vertical-align: top;
}
#lst_gal .thumb:hover img {
    opacity: 0.6; /* 마우스 올렸을 때 썸네일 투명도 */
    -webkit-filter: blur(1px); /* 마우스 올렸을 때 블러 */
    filter: blur(1px); /* 마우스 올렸을 때 블러 */
}
#lst_gal .thumb:hover .info {
    opacity: 1; /* 마우스 올렸을 때 글 정보 투명도 */
}
#lst_gal .thumb .info { /* 글 정보 */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    text-align: center; /* 정렬 */
    opacity: 0; /* 투명도 */
    line-height: 1.4; /* 줄간격 */
    background: rgba(102, 102, 102, 0.8); /* 배경색 */
    color: #fff; /* 폰트 색 */
}
#lst_gal .thumb .info .title { /*  글 제목 */
    font-weight: bold; /* 굵게 */
    letter-spacing: 2px; /* 자간 */
    width: 80%;
    display: -webkit-box;
    -webkit-line-clamp: 7; /* 최대 7중 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lst_gal .thumb .info .date {
    font-size: .8em; /* 작성일 폰트 사이즈 */
}

보호글 : 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으로 변경한후 나머지는 위 안내를 따라 변경해줍니다.

//부분 목록
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");}

CSS

/* 목록형 */
#lst_web .thumb {
    position: relative;
}
#lst_web .thumb a {
    display: block;
    padding: 15px 0; /* 내부 여백 = 줄 간격 */
    border-bottom: 2px solid; /* 라인 */
}
#lst_web .thumb img {
    display: none; /* 썸네일 이미지 */
}
#lst_web .thumb .title, #lst_web .thumb .date {
    display: inline-block;
    vertical-align: middle;
}
#lst_web .thumb .title {
    width: calc(100% - 60px); /* 글 제목 길이 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold; /* 굵기 */
    transition: .5s;
}
#lst_web .thumb:hover .title {
    letter-spacing: 2px; /* 마우스 올렸을 때 글 제목 자간 */
}
#lst_web .thumb .date {
    font-size: .8em; /* 작성일 폰트 사이즈 */
    float: right;
    line-height: 23px; /* 타이틀의 높이만큼 지정해야 위나 아래로 쏠리지 않고 가운데 위치함 */
}

CSS

/* 공지 */
.entryNotice {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    animation: notice 0.5s 0s ease both 1;
    margin: 40px auto; /* 외부 여백 */
    padding: 30px; /* 내부 여백 */
    border: 2px solid; /* 테두리 */
}
.entryNotice:last-child {
    margin-bottom: 0; /* 마지막 글의 하단 외부여백은 0으로 */
}

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

html 아래 부분 삭제

<s_notice_rep>
    <div class="entryNotice">  </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

블로그 관리 > 플러그인 > 블로그 아이콘 표시 > 적용 후 아래 안내를 따라 수정합니다.

.cmt-list img, .guest-list img {
    position:absolute;
    left: 0;
    top: 0;
    width: 50px; /* 프사 넓이 */
    height: 50px; /* 프사 높이 */
    border-radius: 100%; /* 모서리 둥글게 */
    display: none; /* 삭제 */
}
.cmt-list .info, .guest-list .info {
    /* margin-left:60px; */   /* 주석 처리 해제 */
    }

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

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

자주 묻는 질문 + tmi

카피라이트 삭제, 안보이게, 문구 변경 = 금지 

색상, 위치 수정 = 가능

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

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

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

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

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

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

나눔 스킨은 수정 질문을 받지 않습니다.