[나눔] 티스토리 스킨 34 (v1.0) - 19.05.21 업데이트

티스토리 스킨 34 - 전체 스크린샷

무료 다운로드

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

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

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

카피라이트 문구 변경, 삭제는 금지합니다. ( 발견 시 나눔 종료 )

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

본문 수정 삭제는 글 정보^[각주:1]에 마우스를 올리면 나타납니다.

이 스킨은 몇가지 단축키를 지원합니다.

w = 글 작성

e = 스킨 편집

g = 방명록

h = 첫화면

단축 키 삭제는

html 하단에 있는 // 단축키 하단의 스크립트를 삭제하시면 되며

수정도 간단하니 보시고 직접 수정해서 사용하세요 :)

블로그 관리 > 스킨 편집 > 커버 > 공지 > 수정

입력한 글 목록 > 공지 수정 > 수정

아래 보이는 창에서 내용과 이미지만 수정하시면 됩니다.

타이틀과, URL에 주소를 넣으셔도 스킨에서 삭제를 했기 때문에 작동하지 않습니다.

태그 사용이 가능하니 글쓰기에서 공지를 예쁘게 작성한 후 html 모드에서 복사 하여 이 곳 내용에 붙여넣기 하세요

1. 목록 형태

전체 목록의 형태를 쉽게 변경할 수 있습니다.

2. 트위터 ID

트위터 아이디를 적어 넣은 후 커버를 설정하면 트위터 위젯을 설정할 수 있습니다.

3. 트위터 링크 색상

트위터 위젯의 링크 색상을 설정합니다. #을 뗀 6자리 색상코드를 입력하면 됩니다.

예시

노이미지 : noimg.jpg

보호글 : secret.jpg

댓글, 방명록 프로필 사진 없는 경우 : profile.jpg

가장 빠른 방법은 파일명과 확장자를 동일하게 맞춰 파일 업로드^[각주:2]하는 것입니다.

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

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

노이미지. 보호글은 각각 한 군데씩 총 두군데, 프로필은 두 군데 수정하시면 됩니다.

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

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

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

그래도 안된다면. 파일명을 바꿔 업로드한 후 html에서 위 파일명을 찾아 변경한 파일명으로 바꿔줍니다.

html

원래 제 스킨에 기본으로 포함되는 소스였으나 33번 스킨부터는 포함되지 않습니다. ( 스킨 옵션의 목록형태를 적용하기 위해 제거했습니다 )

<script>
    var pathArray = location.href.split('/');
    if(pathArray[3] == '') {
        $('html').css('display','none');
        location.href = '(내티스토리url)/경로';
    }
 </script>
 

위 소스를 html의 노이미지 스크립트 윗 부분에 삽입을 하고

첫 페이지로 원하는 곳의 url을 상대 경로^[각주:3]로 넣습니다. 

예를 들어 공지 게시판인 경우 /notice, 게시글 모두 보기 /category, 특정 카테고리 /category/gallery, 특정 게시물 /324 과 같은 방식으로

앞에 내 티스토리의 url을 적지 않고, 내 티스토리 url의 / 뒷부분을 입력하면 됩니다.

CSS에서 아래 색상 코드를 찾아 변경 ( 일괄 바꾸기 기능이 있는 텍스트 프로그램, 메모장, 노트패드+, 소스보기 기능 이용해서 일괄 바꾸면 빠르고 쉽습니다 )

기본 색상 : #000

CSS

/* 배경 */
body {
    background: #fff;
    transition: .5s;
}

색상 변경 : background-color: #fff; 의  색상코드를 원하는 색상 코드로 변경

배경을 이미지로 변경하려면 아래 소스를 추가 (위 소스 삭제하면 안됨)

/* 배경 */
body {
    background-image: 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=Noto+Sans+KR');

원하는 웹폰트를 찾아 위 소스를 지우고 붙여넣기 한 다음 아래 소스를 찾아 font-family: 'calibri', 'Noto Sans KR', sans-serif; 을 변경합니다.

아래에서 색상 코드 하나 변경한다고 모든 색상이 변경되는 것은 아니니 위 색상 변경 안내에 따라 일괄 변경을 추천 드립니다.

/* 전체 폰트 */
body,
th,
td,
input,
select,
textarea,
button {
    font-size: 10px; /* 폰트 사이즈 */
    font-family: 'calibri', 'Noto Sans KR', sans-serif; /* 폰트 - 순서대로 영문, 한글 */
    color: #000; /* 색상 */
    line-height: 1.7; /* 줄간격 */
}

CSS에서 아래 소스를 찾아 원하는 소스로 변경합니다.

색상 변경은 색상 코드만 변경하면 되고, 밑줄 과 같은 효과는 text-decoration, 그림자는 text-shadow, 자간 letter-spacing 등으로 원하는 효과를 검색을 통해 찾은 후 아래 소스에 붙여넣기 합니다.

a:hover {}

CSS

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

크롬, 크로미움 기반 브라우저 외에는 공식적으로 지원하지 않으니

익스플로러, 엣지 등 기타 브라우저의 스크롤바 소스는 검색을 통해 해결해주세요 :)

CSS

/* 전체 박스 */
#container {
    margin: 100px auto; /* 외부 여백 */
    max-width: 550px; /* 넓이 */
}
#tt-body-index #container {
    max-width: 650px; /* 첫 화면 넓이 */
}

CSS

/* 스위치 */
body.bg {
    background: #000; /* 스위치 온 시 배경색 */
}
img.active,
iframe.active { /* 스위치 온 시 이미지와 아이프레임 투명도 */
    opacity: 0.3;
}
.switch { /* 스위치 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 40px; /* 넓이 */
    height: 80px; /* 높이 */
    border: 1px solid; /* 테두리 */
    padding: 10px 8px; /* 내부 여백 */
    cursor: pointer;
    z-index: 20;
    border-radius: 3px; /* 모서리 둥글게 */
    margin: auto;
}
.switch.active {
    border: 1px solid #fff; /* 스위치 온 테두리 */
}
.switch .switch-top,
.switch .switch-bottom {
    display: block;
    width: 100%;
    height: 50%;
    left: 6px;
    border: 1px solid; /* 내부 버튼 테두리 */
}
.switch .switch-top {
    border-bottom: 0;
    border-radius: 3px 3px 0 0; /* 내부 버튼 위쪽 모서리 */
}
.switch .switch-top.active {/* 스위치 온 - 내부 버튼 위쪽 */
    border-top: 7px solid #fff; /* 위 테두리 */
    border-left: 1px solid #fff; /* 왼쪽 테두리 */
    border-right: 1px solid #fff; /* 오른쪽 테두리 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
}
.switch .switch-bottom {
    border-radius: 0 0 3px 3px; /* 내부 버튼 아래쪽 모서리 */
    border: 1px solid #fff; /* 내부 버튼 위쪽 테두리*/
    border-top: 0;
}
.switch .switch-bottom.active {/* 스위치 온 - 내부 버튼 아래쪽 */
    border-left: 1px solid; /* 왼쪽 테두리 */
    border-right: 1px solid; /* 오른쪽 테두리 */
    border-bottom: 7px solid; /* 아래 테두리 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
}
 

카테고리에 마우스 올렸을 때 서브 메뉴가 깜빡깜빡 하시는 분은

html에서 mouseover를 검색 후 hover 로 바꿔주세요

CSS

/* 검색 */
.search {
    text-align: center; /* 가운데 정렬 */
    margin: 20px 0; /* 외부 여백 */
}
.search input {
    border: 0;
}
.search .submit {
    display: none;
}

@media all and (min-width: 768px) {
    .search .search_input {
        margin: auto;
        text-align: center; /* 가운데 정렬 */
        background: transparent; /* 배경 투명 */
    }
    .search_input::-webkit-input-placeholder {
        color: #fff; /* 검색창 폰트색 */
    }
    .search_input:-moz-placeholder {
        color: #fff; /* 검색창 폰트색 */
    }
    .search_input::-moz-placeholder {
        color: #fff; /* 검색창 폰트색 */
    }
    .search_input:-ms-input-placeholder {
        color: #fff; /* 검색창 폰트색 */
    }
    .search_input::placeholder {
        color: #fff; /* 검색창 폰트색 */
    }

    /* 카테고리 */
    .catebox {
        text-align: center; /* 가운데 정렬*/
        margin: 10px 0; /* 외부 여백 */
        opacity: 0; /* 투명도 */
        transition: .5s;
        visibility: hidden; /* 보이지 않게 */
    }
    .catebox.active { /* 스위치 온 시 카테고리 보이게 */
        opacity: 1; /* 투명도 */
        visibility: visible; /* 보이게 */
    }
    .tt_category {
        display: inline-block;
    }
    .tt_category a,
    .catebox .scroll > a {
        color: #fff; /* 폰트 색상 */
    }
    .link_tit {
        display: none;
    }
    .category_list > li,
    .catebox .scroll > a {
        display: inline-block;
        position: relative;
        margin: 0 10px; /* 카테고리 간격 */
        white-space: nowrap;
    }

    .link_item:after {
        content: "v"; /* 서브 카테고리 있을 경우 */
        font-size: .8rem; /* 폰트 사이즈 */
        margin-left: 3px; /* 왼쪽 여백 */
    }
    .link_item:only-child:after {
        content: ''; /* 서브 카테고리 앖을 경우 */
    }
    .sub_category_list {
        position: absolute;
        white-space: nowrap;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        max-height: 0;
        overflow: hidden;
        transition: .5s;
        z-index: 1;
    }
    .category_list > li:hover .sub_category_list {
        max-height: 500px; /* 서브 카테고리가 많아 짤릴 경우 수정 */

    }
}

블로그 관리 > 꾸미기 - 스킨 편집 > 스킨 옵션 > 목록 형태 > 썸네일형, 목록형, 웹진형 중 원하는 타입으로 변경

후 밑에는 해도 되고 안해도 되지만 하면 좋은 작업입니다. 카테고리 이름에 text, web  등이 있다면 반드시 진행해주세요

html 4/5 지점에 아래 스크립트 삭제

// 부분 목록
var ptn = window.location.pathname;
if (ptn == '/category/text' || ptn == '/category/gallery/sub-text' || ptn == '/category/text/sub-text2') {
    $(".myoskin").attr("id", "myo_bbs");
}

html

html에서 아래 소스를 참고해 /category/카테고리명' || ptn =='/category/카테고리명 입력

1개일 경우 || 뒷부분은 삭제

카테고리 명이 영문 숫자를 제외한 다른 언어인 경우

해당 메뉴에서 마우스 우측 클릭 → 링크주소복사 (크롬or크로미움 기반 브라우저 해당) 를하여 /category/%EB%91%90%EB%B2%88%EC%A7%B8 처럼 입력하면 됩니다.

(익스 플로러에서 한자, 일본어 등 기타 언어를 사용한 카테고리의 페이지를 넘기면 아래 스크립트가 적용이 되지 않는 다는 제보가 있습니다. 이 부분 확인해주세요)

// 부분 목록
var ptn = window.location.pathname;
if (ptn == '/category/text' || ptn == '/category/gallery/sub-text' || ptn == '/category/text/sub-text2') {
    $(".myoskin").attr("id", "myo_bbs");
}

썸네일 비율 변경

html에서 C200x200을 검색해 원하는 사이즈로 모두 수정 ( 이 스킨은 R000x0 사이즈로는 추천하지 않습니다.)

본문 영역 넓이를 늘려 썸네일 크기가 늘어나 깨지는 경우 더 큰 사이즈로 변경합니다

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

참고 http://cocosoft.kr/349 

CSS

/* 갤러리형 */
#myo_gal .lst {
    width: 23%;  /* 썸네일 넓이 - 줄이면 썸네일의 한 줄의 갯수가 늘어나고 늘리면 줄어들음 */
    margin: 1%;  /* 여백 = 간격 */
    float: left;
    position: relative;
    overflow: hidden;
}
#myo_gal .lst a {
    display: block;
}
#myo_gal .lst img {
    width: 100%;
    vertical-align: top;
    transition-property: opacity;
    transition-duration: .5s;
}
#myo_gal .lst .info {
    position: absolute;
    top: 0;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .5s;
    text-align: center;
    display: flex;
    -ms-display: flexbox;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#myo_gal .lst .title {
    display: -webkit-box;
    -webkit-line-clamp: 6; /* 최대 6줄 = 크롬에서만 적용됨 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 100px;
    font-weight: bold;
    margin: 0 5px;
}
#myo_gal .lst .date {
    display: none;  /* 날짜, 요약글 삭제 */
}
#myo_gal .lst:hover img {  /* 마우스 오버 */
    -webkit-filter: blur(1px); /* 블러 */
    filter: blur(1px); /* 블러 */
    opacity: 0.3;  /* 투명도 */
}
#myo_gal .lst:hover .info {
    opacity: 1;  /* 마우스 오버 시 글 투명도 */
}

CSS

/* 목록형 */
#myo_bbs .lst {
    margin-bottom: 40px; /* 외부 여백 = 간격 */
    text-align: center; /* 폰트 정렬 */
}
#myo_bbs .lst a {
    display: block;
}
#myo_bbs .lst img {
    display: none;
}
#myo_bbs .lst .title { /* 글 제목 */
    white-space: nowrap; /* 한 줄로 */
    overflow: hidden; /* 영역 넘어가면 삭제 */
    text-overflow: ellipsis; /* 삭제 시 말 줄임표 */
}
#myo_bbs .lst .text {
    display: none;
}

CSS 분홍색 부분을 찾아 아래와 동일하게 변경합니다.

.list img {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    /* display: none; */
}

.list .info {
    margin: 40px 0 40px 40px;
    /* margin: 40px 0; */
}

https://themify.me/themify-icons

html에있는 아이콘 폰트는 여기에서 참고해 클래스명을 바꾸시면 되며

CSS에 적용되어있는 아이콘 폰트는 크롬 또는 웨일 등 크로미움 기반 브라우저에서 쉽게 확인할 수 있습니다.

위 사이트에서 필요한 아이콘 위에서 우클릭 > 검사를 한 후 나오는 창에서 선택 되어있는 span 클래스를 열면 ::before 이란 단어가 나오는데 이걸 클릭하면 우측에 나오는 css창에 적혀진 content:"/영숫자" 를 복사해

스킨의 CSS에서 수정하고 싶은 아이콘을 변경하면 됩니다.

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

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

자주 묻는 질문 + tmi

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

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

이제 드래그는 가능하실테니, 우클릭하지 마시고 컨트롤 + C 를 이용하면 간단하게 복사 붙여넣기 하실 수 있습니다.

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

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

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

- 악용하여 다른 스킨을 무단으로 퍼가거나 다른 사람의 소스를 무단으로 복사하지 않도록 합시다!! 

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

수정 문의 외 다른 문의는 받습니다.

---

각주

1. 글 제목, 작성일 [본문으로]
2. 블로그 관리 > 꾸미기 - 스킨 편집 > html편집 > 파일 업로드 [본문으로]
3. 내 티스토리 url을 기준으로 뒷 부분 경로 [본문으로]