티스토리 스킨 03 (v1.1) - 나눔 종료

작년 말 부터 만들기 시작해서 대략 한달이 걸린 세번째 스킨이네요

마찬가지로 html, css, js 등 이해하고 만든 스킨이 아니기 때문에 복잡한 수정은 답변이 어렵습니다. 이해하실 분만 받아주세요

스킨 특징 및 설정

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

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

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

서브카테고리

공지 게시판

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

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

스킨 설정

표시 : 글 목록을 12 이상 3의 배수로

형태 : 목록+내용

상세 스크린샷 

(스크린샷과 배포 버전은 약간 차이가 있습니다. 자세한 사항은 미리보기를 이용해주세요)

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

수정 OK / 수정 후 재배포 NO

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

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

기본 폰트 색 : #333 / 포인트 색 : #A54040, #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: #eee;
}

CSS

body {
    background: #eee;
}

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

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:0px; /* 세로 스크롤 넓이 */
    height:2px; /* 가로 스크롤 높이 */
    background:rgba(0,0,0,0); /* 스크롤바 배경 색상 코드 */
}
::-webkit-scrollbar-thumb {
    width:0px; /* 스크롤바 움직이는 부분  넓이 */
    border-radius:30px; /* 모서리 둥글게 */
    background:#fff; /* 스크롤바 움직이는 부분 색상 */
}

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

margin-left: -225px; 부분을 가로 넓이 ÷ 2 만큼 적어줘야 화면 가운데에 출력이 됨

/* 전체 박스 */
#container {
    width: 450px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -400px;
    margin-left: -225px;
    border-radius:40px;
    overflow:hidden;
    background:rgba(255,255,255,0.5);
}

반투명 배경은 background:rgba(255,255,255,0.5); 에서 원하는 색상으로 변경

CSS에서 height: 700px; 을 원하는 높이로 변경

#content {
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 700px;
    clear: both;
}

후 위에 설명한 넓이 변경 및 배경색 변경에 적었던 설명과 같이

margin-top: -400px; 을 본문 길이+heder+footer = 총 길이 ÷ 2만큼으로 적어줘야 화면 가운데 출력됩니다.

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>

위와 같은 구성으로 티에디션 적용하기

메인(인덱스)을 기본URL or 티에디션 or 태더데스크로 변경 을 따라 한 이후

티스토리 설정 → 꾸미기 → 설정 → 티에디션을 사용합니다 → 티에디션 설정하기

아무거나 위젯 하나 놓고 디자인 → HTML 안에 내용을 모두 삭제 후 

원하는 메인 이미지 경로를 복사해서 이미지 경로 부분에 붙여넣고 

내용입력 부분에 원하는 내용을 입력 

(게시판에서 작성한 후 html 소스보기해서 복사한 다음 내용입력 부분에 붙여넣기 하면 편함 )

<div class="profile">
  <div class="logo"></div>
  <div class="name"><span>묘연</span></div>
  <div class="more"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
</div>
<img src="이미지경로"width="100%">
<div class="title-bottom"> <i class="fa fa-heart" aria-hidden="true"></i> <i class="fa fa-comment-o" aria-hidden="true"></i> <i class="fa fa-paper-plane-o" aria-hidden="true"></i> <i class="fa fa-bookmark-o" aria-hidden="true"></i>
  <div class="info"><span class="blogger">묘연</span> 
      <span> 내용입력 </span></div>
</div>
 

html에서 달콤한 환상 삭제 후 Instagram 입력

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

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

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

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

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

동그란 정도를 변경하려면 border-radius:100% 수치 변경

삭제는 display:none; 입력

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

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

.searchList .logo {
    background-image: url("./images/logo.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    border: 1px solid #eee;
    margin: 10px 20px;
    margin-right: 0;
    float: left;
}

CSS에서 게시판 상단 로고 변경과 같은 방법으로 수정

가로세로 넓이는 35px을 수정하면 됨

위에서 제시한 티에디션을 사용할 분은 !important; 를 절대 삭제하지 말것 !!

.profile .logo {
    border-radius: 100% !important;
    background: url(./images/logo.jpg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    width: 35px !important;
    height: 35px !important;
    border: 1px solid #eee !important;
    float: left !important;
}

CSS에서 content 부분을 변경 (참고 : http://fontawesome.io/icons/ )

카테고리

.category a.link_item:before {
    content:'\f07b';
    font-family: FontAwesome;
    font-size: 6px;
}

서브카테고리

.sub_category_list a:before {
    content: '\f0d7';
    font-family: FontAwesome;
    font-size: 6px;
}

html에서 C300x300 원하는 사이즈로 수정 (이미지 사이즈가 커질 수록 로딩이 느려짐)

참고 http://cocosoft.kr/349 

<img src="//i1.daumcdn.net/thumb/C300x300/?fname=">

CSS

#lst_gal .thumb {
    float: left;
    width: 32.1%;
    margin:0.6%;
    position: relative;
    border-radius: 5px;
}

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

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

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

<!-- 노이미지 --> 
    <script>
        $(function(){
            $(".thumb-link").not(":has(.thumb-img)").prepend("<span class=thumb-img><img src=./images/noimg.jpg></span>");});
   </script> 

후 CSS에서 이 부분을

#lst_gal .thumb .info .text {
    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 .thumb .info .text {
    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 .thumb:hover .hover {
    opacity: 1;
    background: url(./images/hover.png) center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    border-radius: 5px;
    z-index: 9;
}

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/text' || ptn =='/category/gallery/sub-text'|| ptn =='/category/text/sub-text2'){
        $(".list_wrap").attr("id","lst_web");}
   </script>

CSS에서 #lst_web .thumb img 에는 display:none; 을 입력,

#lst_web .info에는 margin-left:85px;을 삭제하거나 0으로 적어줍니다

#lst_web .thumb img {
    border-radius: 100px;
    float: left;
    margin-right: 15px;
    width: 70px;
}
#lst_web .info {
    padding: 20px 0;
    margin-left:85px;
}

CSS 공지가 나타나는 속도를 조절하기 위해서는 0.8s ~ 4.4s 부분을 자유롭게 조정하면 됩니다.

한 페이지에 6개 정도 설정을 해놨으나 더 필요하신 분은 필요한 만큼 추가하시면 되며

아래로 갈 수록 숫자가 올라가야 위에서부터 차례대로 하나씩 출력됩니다.

.entryNotice:nth-of-type(1) .notice-article {animation-delay: 0.8s;}
.entryNotice:nth-of-type(2) .notice-article {animation-delay: 1.5s;}
.entryNotice:nth-of-type(3) .notice-article {animation-delay: 2.5s;}
.entryNotice:nth-of-type(4) .notice-article {animation-delay: 2.8s;}
.entryNotice:nth-of-type(5) .notice-article {animation-delay: 3.4s;}
.entryNotice:nth-of-type(6) .notice-article {animation-delay: 4.4s;}

CSS

댓글 프로필 사진 삭제

.commentList img {
    left: 0px;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    position: absolute;
}

display:none; 입력 후

.commentList .info {
    margin-left: 60px;
    margin-bottom: 10px;
}

에서 margin-left: 60px; 삭제 또는 0으로 변경

방명록 프로필 사진 삭제

.guestList img {
    top: 0px;
    left: 0px;
    width: 64px;
    height: 64px;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #eee;
}

display:none; 입력 후

.guestList .guest-list .guest {
    max-width: 60%;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 10px;
    margin-left: 75px;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

에서 margin-left: 75px; 삭제 또는 0으로 변경

페이지 버튼을 본문영역 하단으로 이동 할 경우 방명록에 글쓰기 부분이 페이지 넘김 부분을 가리고 있기 때문에 방명록에서 페이지 버튼을 사용할 수 없게 됩니다. 따라서 페이지 버튼을 본문 영역 하단으로 변경하려면 방명록 부분 수정이 필수로 필요합니다.

.guestWrite {
    position: absolute;
    bottom: 54px;
    width: 100%;
    background: #fff;
    margin: -10px;
    border-bottom: 1px solid #eee;
    z-index: 11;
    padding-top: 5px;
}

위 부분을 아래와 같이 변경하면 아래부분에 작성 부분이 고정되어있지 않고 

윗 부분으로 이동, 그리고 방명록 내용과 함께 움직입니다.

.guestWrite {
    position: relative;
    width: 450px;
    background: #fff;
    margin: -10px;
    border-bottom: 1px solid #eee;
    z-index: 11;
    padding-top: 5px;
    display: inline-block;
}

그리고 방명록 목록 부분이 가리는 것을 방지하기 위해 줬던 여백을 삭제해야 하므로

.guestList .guest-list:last-child li:last-child {
    margin-bottom: 150px;
}

이 부분을 삭제 한 후

html에서 

<s_paging>
    <div class="paging">
         <a  class="no-more-prev"><i class="fa fa-arrow-left" aria-hidden="true"></i></a> 
        <a  class="no-more-next"><i class="fa fa-arrow-right" aria-hidden="true"></i></a> 
    </div>
</s_paging>

이 부분을 잘라내기 하고

</div><!-- content close --> 여기에 붙여넣습니다 <div id="footer">

숫자로 된 페이지도 필요하다면 위 내용 대신 아래 내용을 붙여넣기 하면 됩니다.

<s_paging>
    <div class="paging">
         <a  class="no-more-prev"><i class="fa fa-arrow-left" aria-hidden="true"></i></a> 
<s_paging_rep> <a  class="num"></a> </s_paging_rep>
        <a  class="no-more-next"><i class="fa fa-arrow-right" aria-hidden="true"></i></a> 
    </div>
</s_paging>

후 CSS에서 /* 페이지 */ 부분을 찾아 원하는대로 커스텀하면 모든 작업이 끝

원래 푸터 부분에 페이지 버튼을 설정하였으나 티에디션 사용 시 페이지 버튼으로 설정해둔 아이콘이 출력되지 않아 페이지 버튼을 둘 곳을 궁리하다 지금과 같이 카테고리 하단에 두었는데 푸터 부분에 설정하실 분은 그렇게 하시고 푸터에서 제거하신 기능을 카테고리에 페이지 버튼이 있던 영역에 추가해서 사용하면 됩니다.

CSS에서 @media all and (max-width: 768px) 영역안에 있는 부분을 수정해야 합니다

    #container {
        width: 95%;
        height: 96%;
        top: 0;
        left: 0;
        margin: 10px;
    }

width: 95%; height: 96%; margin: 10px;

을 width: 100%, height: 100%, margin: 0px로 수정

모서리가 둥그렇게 깎아지는 부분도 수정하려면 overflow:unset; 추가

#footer 에 border-radius: 0; 추가 (ie에서는 하단 부분이 overflow가 먹히지 않길래 별도로 설정했음)

모바일에서 본문영역 고정을 해제하고 전체 영역을 길게 스크롤해서 사용하려면 마찬가지로 CSS @media all and (max-width: 768px) 영역안에 아래 부분에 position:relative; 만 추가하면 됩니다.

    #container {
        width: 95%;
        height: 96%;
        top: 0;
        left: 0;
        margin: 10px;
    }

_M#]

 

이 외 질문은, 스킨 수정에 대한 간단 질문만 공개 댓글로 받습니다. 다른 분들의 빠른 답변과, 제가 중복 답변으로 인해 소모되는 시간을 줄여주세요. 비밀 댓글로 질문하실 경우 답변 드리지 않습니다. 

(질문글이 아닌 경우 비댓OK)

질문 하시기 전에 수정하고 싶은 부분을 마우스 오른쪽 클릭 → 검사 를 누른 후 오른쪽 창에서 html과 css를 수정해 원하는대로 수정을 해보시고 정 안될 경우 질문해주세요. 저 또한 이 부분으로 전문적으로 알지 못하고, 공부한 것도 아니기 때문에 이와 같은 방법으로 스킨을 만들고 제작하고 수정합니다.

또한 질문을 남기실 때 로그인, 스킨 적용 한 후에 질문을 주시면 답변에 도움이 되며, 기본 블로그가 아닐 경우 별도로 적용하신 블로그의 주소를 적고, 오류나 잘 되지 않는 부분을 상.세.하.게 적어 주시면 서로 질답 소모시간이 줄어드니 상세하게 적어주세요.

※ 티스토리 특성상 댓글이나 방명록을 로그인하지 않고 비밀글로 작성할 경우 제가 공개 답변이 아닌 비밀답글을 적으면 답글을 확인할 수 없습니다.  (비로그인이신지 일일이 확인하지 않아요!)

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