티스토리 스킨 01 (v1.3) - 나눔 종료

전문 지식 없이 야매로 만든 제 첫 스킨이라 부족한 점이 많고 피드백이 어려운 점 감안하셔서 사용하셨으면 합니다. 따라서 수정에 관한 답변이 어려우니 스스로 해결 해주셨으면 좋겠어요.

스킨을 소개하자면 기본 갤러리형 스킨이예요

목록형에도 이미지를 첨부할 경우가 있는데 그냥 목록형은 뭔가 묻히는 기분이 들어 목록형에도 작게 썸네일을 적용한 그런 스킨입니다.

스킨 특징 및 설정

반응형 + 모바일 ( 태블릿은 PC와 동일 )

갤러리형 + 목록형 ( 리스트형 or 웹진형 )

크로미움 기반 브라우저 지원

서브카테고리

노이미지 썸네일을 본문 출력하도록 변경 가능

유튜브 등 기타 썸네일 자동으로 긁어오지 못함ㅠㅠ

스킨 설정

표시 : 글 목록을 2와 3의 배수 중 겹치는게 좋습니다 = 6의 배수 (ex 6, 12,)

(PC에서는 썸네일이 가로로 3칸, 모바일에서는 2칸이기 때문에 PC에 맞춰 9로 설정할 경우 모바일에서 하단 한줄이 숫자가 맞지 않음)

형태 : 목록+내용

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

상세 스크린샷

카피라이트 색상 변경은 OK / 삭제는 NO

수정 OK / 수정 후 재배포 NO

재배포 및 N차 공유 NO (너무 허접해서 그러니 양해해주세요)

참고 : 용쯔님, 울현님, 티스토리 가이드 감사합니다.

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

기본 폰트 색 : #333 / 포인트 색 : #ccc, #eee (폰트가 아닌 것도 있으니 잘 확인 할 것!!)

CSS에서 폰트 변경은 아래 부분 삭제 후 다른 웹폰트 주소 입력

@import url('//cdn.rawgit.com/young-ha/webfont-archive/master/css/NanumBarunGothic.css');

폰트 변경 : font-family: 이부분을 바꾼 폰트 명으로 변경

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

/* 기본 설정 */
body, th, td, input, select, textarea, button {
    font-size: 11px;
    font-family: 'NanumBarunGothic', sans-serif;
    line-height: 1.5;
    color: #333;
}

CSS에서 아래 부분 #eee 를 다른 색상으로 변경

body {
    background-color: #eee;
}

CSS

body {
    background-color: #eee;
}

삭제 후 파일업로드 → 아래 내용 붙여넣기

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

html 에서 

<!-- 스크롤바  -->
<script src="./images/jquery.nicescroll.js"></script>
<script>
 
$(window).scroll(function() { 
$("html").getNiceScroll().resize()    
$(function() {  
$("html,textarea").niceScroll({cursorborder:"0px solid #ccc",cursorcolor:"#ccc",cursorwidth: "5px",boxzoom:true}); 
}); 
}) 
</script>

cursorborder : 테두리 사이즈, 선, 테두리색상

cursorcolor : 스크롤바 색

cursorwidth : 스크롤바 굵기

html 

<!-- 스크롤바  -->
<script src="./images/jquery.nicescroll.js"></script>
<script>
$(window).scroll(function() { 
$("html").getNiceScroll().resize()    
$(function() {  
$("html,textarea").niceScroll({cursorborder:"0px solid #ccc",cursorcolor:"#ccc",cursorwidth: "5px",boxzoom:true}); 
}); 
}) 
</script>

위 부분 삭제 후 스크롤바 색상 변경은

익스플로러는 포털사이트 검색을 통해 해결하시고

크롬 (크로미움 기반) 브라우저에서는

삭제 후 아래 부분을 넣어 원하는대로 커스텀하면 됩니다.

::-webkit-scrollbar {
    width:스크롤바 배경 넓이px;
    background:#스크롤바 배경 색상 코드;
}
::-webkit-scrollbar-thumb {
    width:스크롤바 움직이는 막대기px;
    background:#막대기 색상 코드;
}

CSS에서 삭제는 아래 부분 삭제 

색상 변경은 #333 , #ccc 를 원하는 색상코드로 변경

/* 드래그 */
::selection {
    color: transparent;
    text-shadow: 0 0 3px #333;
    transition: all 250ms ease-in;
}
::-moz-selection {
 color: transparent;
 text-shadow: 0 0 3px #ccc;
 transition: all 250ms ease-in;
}

CSS

메뉴 윗 부분 꼬다리 

.category_box:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 11px 14px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -14px;
    left: 54px;
}

본문 영역 좌측 꼬다리

#content:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 14px 9px 0;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    left: -14px;
    top: 30px;
}

border-width 꼬다리 사이즈

border- color 꼬다리 색상 색상코드 적혀있는 부분만 수정할 것 (transparent는 수정 X)

left, top 꼬다리 위치

CSS에서 아래 부분을 찾아 width:750px; 을 원하는 사이즈로 변경

#container {
    position: relative;
    width: 750px;
    max-width: 100%;
    margin: 0 auto;
    padding: 100px 15px;
    padding-bottom: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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>

jpg 파일인 경우 logo.jpg로 파일명을 변경한 후

블로그관리 → 꾸미기 → HTML. CSS편집 → 우측 상단 파일업로드에서 업로드.

jpg 파일이 아닌 경우 CSS에서 아래 부분을 찾아 logo.jpg를 파일명과 확장자에 맞춰 변경 후 저장

사이즈 변경은 :width:70px, height:70px; 수치 변경

동그란 정도를 변경하려면 border-radius:50px; 수치 변경

삭제는 display:none; 입력

정확하게 했는데도 변경이 되지 않거나 간헐적으로 될 경우

인터넷 쿠키 삭제 or 강제 새로 고침 (크롬, 크로미움 기준 단축키 컨트롤+쉬프트+R)

#logo {
    width: 70px;
    height: 70px;
    overflow: hidden;
    background-image: url("./images/logo.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-size: cover;
    display: inline-block;
    margin: 10px auto;
}

html에서 아래 부분 삭제

<li class="title"><a href="https://sweet-myo.tistory.com/">달콤한 환상</a></li>
<li class="title_bar">----------------</li>

CSS에서 아래 부분 찾아 *을 다른 표시로 변경

.sub_category_list a:before {
    content: '*';
    padding-left: 11px;
}

html에서 아래 부분을 찾은 후 

<li class="tab_guestbook" ><a href="https://sweet-myo.tistory.com/guestbook"><i class="fa fa-backward" aria-hidden="true"></i></a></li>
<li class="tab_write"><a href="https://sweet-myo.tistory.com/manage/entry/post"><i class="fa fa-play" aria-hidden="true"></i></a></li>
<li class="tab_admin"><a href="https://sweet-myo.tistory.com/manage"><i class="fa fa-forward" aria-hidden="true"></i></a></li>

<i class ~~~></i> 3군데를 모두 삭제

http://fontawesome.io/icons/ 원하는 아이콘의 소스를 복사 후 삭제한 부분에 붙여넣기하거나 이모지로 등 원하는 디자인으로 변경

참고로 위에서 부터 공지, 방명록, 글쓰기, 설정 순

html에서 C300x300 원하는 사이즈로 수정 

참고 http://cocosoft.kr/349 

<img src="//i1.daumcdn.net/thumb/C300x300/?fname=" onError="this.src='./images/noimg.jpg'">

CSS

#lst_gal .list_content {
    float: left;
    width: 32.3%;
    margin: 0 0.5%;
    margin-bottom: 1%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

width 수치를 줄이면 가로 썸네일 갯수가 늘어나고 높이면 줄어들음

이에 맞게 margin 수치를 미세하게 조절해서 간격 조절

margin-bottom 은 썸네일 아랫쪽 여백 조정

모바일은 아래 부분에서 조절, 방법은 같음

/* 갤러리 */
#lst_gal .list_content {
    width: 49%;
}

html 아래 부분 삭제 (이미지는 예제)

<img src="./images/noimg.jpg" class="thumb2">

후 CSS에서 이 부분을

#lst_gal .list_content .list-con .text-post{
        display:none;
        /*display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; */
        overflow: hidden;
        text-overflow: ellipsis; 
        white-space: normal;         
}

밑에 소스로 변경 (display:none을 삭제하고 주석처리를 풀면 됨)

#lst_gal .list_content .list-con .text-post{
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; 
        white-space: normal;         
}

CSS에서 아래 부분 삭제 또는 다른 효과로 변경

#lst_gal a:hover img {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    transition: .5s ease;
}

참고 : http://www.blueb.co.kr/?c=2/35&cat=Image&uid=4079

CSS에서 아래 부분 삭제

변경은 다른 이미지를 업로드하여 url 주소 부분에 파일명.확장자와 동일하게 맞춰주시거나 백그라운드 url을 삭제 후 색상코드 입력하는 등으로 커스텀

#lst_gal .list_content:hover .list-hover {
    opacity: 1;
    background: url(./images/hover.png) center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    border-radius: 10px;
}

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 처럼 입력하면 됩니다.

<!-- 부분 리스트형 --> 
<script>
            var ptn = window.location.pathname;
            if(ptn == '/category/2' || ptn =='/category/3'){
          $(".list_wrap").attr("id","lst_web");
}
</script>

html에서 아래 부분 삭제

<img src="./images/noimg.jpg" class="thumb2">

CSS에서 아래 두 부분에 모두 display:none; 을 입력해주세요

#lst_web .list_content .thumb {
    width: 45px;
    border-radius: 100px;
    float: left;
    margin-right: 15px;
    margin-top: 7px;
    position: absolute;
}
#lst_web .thumb2, #lst_web .secret img {
    width: 45px;
    border-radius: 100px;
    float: left;
    margin-right: 15px;
    margin-top: 7px;
}

블로그관리 → 플러그인 → 블로그 아이콘 표시 플러그인 설정 후

( 댓글/방명록 이모티콘 표시 플러그인은 꼭 해제할 것 )

블로그관리 → 관리 → 블로그 → 아이콘 최적 사이즈 32x32, 64x64 / 파일형식 JPG, GIF, PNG 이 부분에 프로필 사진으로 사용할 이미지 업로드

CSS 댓글에 아이콘 적용

댓글에 아이콘 적용

.commentList img {
    top: 5px;
    left: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: none;
    /* position: absolute; */
}
 /*.cmt-info, .cmt-r-info {margin-left:50px;} */

방명록에 아이콘 적용

.guestList img {
    top: 5px;
    left: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display:none;
    /* position: absolute;*/
}
/* .guestList .guest-list .guest-info, .guest-re-info {margin-left: 50px;} */

두 군데 공통적으로 적용되는 부분으로

display:none; 을 삭제 하고 주석처리 ( /* */  ) 되어 있는 부분의 주석을 해제합니다.

( /* , */ 표시만 삭제 | 내용은 삭제X )

댓글에는 프로필사진 치환자가 따로 있는데

방명록에는 치환자가 없어서 기본 아이콘이 서로 다르게 나옵니다

초보라. 이 부분에 대해서는 좀 더 연구해볼게요

카테고리 ( 내용 ) 부분의 수정,  모바일 메뉴 버튼도 style css

메뉴 버튼을 눌렀을 때 슬라이딩 하는 메뉴 형태의 사이즈 , 위치 수정은

별도로 첨부 된 bootstrap.offcanvas.css에서 하면 됩니다.

수정이 번거로우니 style.css에 합쳐보려했으나 잘 안됐고

제 수준이 거기까지 미치지 않아서 합치지 못했으니 번거로워도 이해해주세요

http://sweet-myo.tistory.com/284

(18.06.11) 이제 무료 나눔 스킨은 질문을 받지 않겠습니다 :)

긴 글 읽어주셔서 감사합니다 :D